Titres

L'en-tête le plus élevé d'une page de site de développement doit être un <h1>. Le corps de la page ne doit pas contenir d'autre <h1> pour éviter de confondre les navigateurs non visuels. L'outil nbgenerate convertit le contenu et les modèles HTML et Markdown de DevSite en notebooks Jupyter compatibles avec Colab.

Tailles

Heading 1

Heading 2

Heading 3

Heading 4

Titre 5
Titre 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

Sommaire

Dans DevSite, <h2> et <h3> sont automatiquement ajoutés à la table des matières "Sur cette page".

Masquer des titres dans la table des matières

Pour empêcher l'ajout d'un titre (comme "Titre 2" et "Titre 3" dans la section ci-dessus, qui n'apparaissent pas dans la table des matières), appliquez class="hide-from-toc".

Heading 2

Heading 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}

Personnaliser le texte des titres dans la table des matières

Si vous souhaitez que le texte de la table des matières diffère du titre réel (comme dans cette section), définissez un attribut data-text sur le titre:

Heading 2

HTML

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

Markdown

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

Inclure des titres dans les tableaux de la table des matières

Vous pouvez également placer un <h2> ou un <h3> dans un en-tête de tableau (<th>) pour forcer l'ajout du tableau dans la table des matières. Dans un en-tête de tableau, <h2> et <h3> sont stylisés comme du texte ordinaire, de sorte que les lecteurs ne puissent pas les distinguer.

Sur les pages de documentation (et non sur les pages "pleine largeur" comme la plupart des pages de destination), les titres autres que <h1> sont également associés à un bouton permettant de copier le lien. Ce bouton ne s'affiche que lorsque vous pointez sur le titre.

Pour désactiver ce bouton pour un titre spécifique, appliquez class="no-link" au titre.

HTML

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

Markdown

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

Pour forcer l'affichage du bouton de lien sur un titre qui ne l'aurait pas autrement (par exemple, un <h1> ou un titre sur une page en plein écran), ajoutez class="add-link" au titre.

Heading 1

HTML

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

Markdown

# Heading 1 {:.add-link}

En-têtes numérotés

Pour ajouter un préfixe de numéros séquentiels aux titres <h2> afin de désigner des sections au contenu complexe comme des étapes distinctes dans un processus à plusieurs étapes, ajoutez une classe numérotée à chaque titre.

Premier titre numéroté

Contenu complexe composé de paragraphes, de listes, de tableaux, d'images, de vidéos et de widgets

Deuxième titre numéroté

Contenu complexe composé de paragraphes, de listes, de tableaux, d'images, de vidéos et de widgets

Troisième titre numéroté

Contenu complexe composé de paragraphes, de listes, de tableaux, d'images, de vidéos et de 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.

Sous-titres numérotés

Pour ajouter un préfixe numérique aux titres <h3> qui suivent les titres <h2>, ajoutez une classe numérotée à chaque titre <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.

Titre numéroté

Contenu complexe composé de paragraphes, de listes, de tableaux, d'images, de vidéos et de widgets

Sous-titre numéroté

Contenu complexe composé de paragraphes, de listes, de tableaux, d'images, de vidéos et de widgets

Sous-titre numéroté

Contenu complexe composé de paragraphes, de listes, de tableaux, d'images, de vidéos et de widgets

Sous-titre numéroté

Contenu complexe composé de paragraphes, de listes, de tableaux, d'images, de vidéos et de widgets