Títulos

O título principal de uma página do DevSite precisa ser um <h1>. O corpo da página não pode conter outro <h1> para evitar confundir navegadores não visuais. A ferramenta nbgenerate converte conteúdo e modelos HTML e Markdown do DevSite em notebooks Jupyter compatíveis com o Colab.

Tamanhos

Título 1

Título 2

Título 3

Título 4

Título 5
Título 6

HTML

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

Markdown

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

Índice

No DevSite, <h2> e <h3> são adicionados automaticamente ao sumário "Nesta página".

Ocultar títulos do índice

Para impedir que um título seja adicionado (como "Título 2" e "Título 3" na seção acima, que não aparecem no sumário), aplique class="hide-from-toc".

Título 2

Título 3

HTML

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

Markdown

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

Personalizar o texto do título no TOC

Se você quiser que o texto no sumário seja diferente do título real (como esta seção), defina um atributo data-text no título:

Título 2

HTML

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

Markdown

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

Incluir títulos nas tabelas do sumário

Também é possível colocar um <h2> ou <h3> dentro de um cabeçalho de tabela (<th>) para forçar a tabela no TOC. Dentro de um cabeçalho de tabela, <h2> e <h3> têm o mesmo estilo do texto normal, para que os leitores não percebam a diferença.

Nas páginas de documentação (não as de "largura total", como a maioria das páginas de destino), os títulos diferentes de <h1> também têm um botão para copiar o link, que aparece apenas quando você passa o cursor sobre o título.

Para desativar esse botão em um título específico, aplique class="no-link" ao título.

HTML

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

Markdown

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

Para forçar o botão de link a aparecer em um título que não teria, como <h1> ou qualquer título em uma página de largura total, adicione class="add-link" ao título.

Título 1

HTML

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

Markdown

# Heading 1 {:.add-link}

Cabeçalhos numerados

Para prefixar os títulos <h2> com números sequenciais e designar seções com conteúdo complexo como etapas distintas em um processo de várias etapas, adicione uma classe numerada a cada título.

Primeiro título numerado

Conteúdo complexo composto por parágrafos, listas, tabelas, imagens, vídeos e widgets.

Segundo título numerado

Conteúdo complexo composto por parágrafos, listas, tabelas, imagens, vídeos e widgets.

Terceiro título numerado

Conteúdo complexo composto por parágrafos, listas, tabelas, imagens, vídeos e widgets.

HTML

<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.

Markdown

## 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.

Subtítulos numerados

Para prefixar títulos <h3> que seguem títulos <h2> com números sequenciais, adicione uma classe numerada a cada título <h3>.

HTML

<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.

Markdown

## 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.

Cabeçalho numerado

Conteúdo complexo composto por parágrafos, listas, tabelas, imagens, vídeos e widgets.

Subtítulo numerado

Conteúdo complexo composto por parágrafos, listas, tabelas, imagens, vídeos e widgets.

Subtítulo numerado

Conteúdo complexo composto por parágrafos, listas, tabelas, imagens, vídeos e widgets.

Subtítulo numerado

Conteúdo complexo composto por parágrafos, listas, tabelas, imagens, vídeos e widgets.