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.
Links clicáveis para copiar
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.
Título 4
Título 5
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.