Самий верхній заголовок сторінки DevSite має бути <h1> . Тіло сторінки не повинно містити інший <h1> , щоб уникнути плутанини у невізуальних браузерах. Інструмент nbgenerate перетворює вміст і шаблони DevSite HTML і Markdown у блокноти Jupyter, сумісні з Colab.

Розміри

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Зміст

У DevSite <h2> і <h3> автоматично додаються до змісту (ToC) «на цій сторінці».

Приховати заголовки від змісту

Щоб запобігти додаванню заголовка (наприклад, «Заголовок 2» і «Заголовок 3» у наведеному вище розділі, які не відображаються в ToC), застосуйте class="hide-from-toc" .

Заголовок 2

Заголовок 3

<h2 class="hide-from-toc">Heading 2</h2>
<h3 class="hide-from-toc">Heading 3</h3>

## Heading 2 {:.hide-from-toc}
### Heading 3 {:.hide-from-toc}

Налаштуйте текст заголовка в ToC

Якщо ви хочете, щоб текст у ToC відрізнявся від фактичного заголовка (як цей розділ!), установіть атрибут data-text для заголовка:

Заголовок 2

<h2 data-text="Custom text for the ToC">Heading 2</h2>

## Heading 2 {: data-text='Custom text for the ToC'}

Додайте заголовки до таблиць у ToC

Ви також можете розмістити <h2> або <h3> всередині заголовка таблиці ( <th> ), щоб примусово включити таблицю до ToC. Усередині заголовка таблиці <h2> і <h3> оформлені як звичайний текст, тому читачі не зможуть зрозуміти.

Натисніть, щоб скопіювати посилання

На сторінках документації (не на сторінках із «повною шириною», як на більшості цільових сторінок), заголовки, окрім <h1> , також отримують кнопку для копіювання посилання, яка з’являється лише тоді, коли ви наводите курсор на заголовок.

Щоб вимкнути цю кнопку для певного заголовка, застосуйте class="no-link" до заголовка.

Заголовок 4

Заголовок 5

<h4 class="no-link">Heading 4</h4>
<h5 class="no-link">Heading 5</h5>

## Heading 4 {:.no-link}
### Heading 5 {:.no-link}

Щоб змусити кнопку посилання з’явитися в заголовку, який інакше її не було б (скажімо, <h1> або будь-який заголовок на сторінці повної ширини), додайте class="add-link" до заголовка.

Заголовок 1

<h1 class="add-link">Heading 1</h1>

# Heading 1 {:.add-link}

Нумеровані заголовки

Щоб додати до заголовків <h2> послідовні номери для позначення розділів зі складним вмістом як окремих кроків у багатоетапному процесі, додайте до кожного заголовка нумерований клас.

Перший пронумерований заголовок

Складний вміст, що складається з абзаців, списків, таблиць, зображень, відео, віджетів.

Другий пронумерований заголовок

Складний вміст, що складається з абзаців, списків, таблиць, зображень, відео, віджетів.

Третій пронумерований заголовок

Складний вміст, що складається з абзаців, списків, таблиць, зображень, відео, віджетів.

<h2 class="numbered">First numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h2 class="numbered">Second numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h2 class="numbered">Third numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

## First numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

## Second numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

## Third numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

Нумеровані підзаголовки

Щоб додати порядкові номери до заголовків <h3> , які слідують за заголовками <h2> , додайте нумерований клас до кожного заголовка <h3> .

<h2 class="numbered">Numbered heading</h2>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h3 class="numbered">Numbered subheading</h3>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h3 class="numbered">Numbered subheading</h3>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

<h3 class="numbered">Numbered subheading</h3>

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

## Numbered heading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

### Numbered subheading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

### Numbered subheading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

### Numbered subheading {:.numbered}

Complex content composed of paragraphs, lists, tables, images, videos, widgets.

Нумерований заголовок

Складний вміст, що складається з абзаців, списків, таблиць, зображень, відео, віджетів.

Нумерований підзаголовок

Складний вміст, що складається з параграфів, списків, таблиць, зображень, відео, віджетів.

Нумерований підзаголовок

Складний вміст, що складається з параграфів, списків, таблиць, зображень, відео, віджетів.

Нумерований підзаголовок

Складний вміст, що складається з абзаців, списків, таблиць, зображень, відео, віджетів.