Encapçalaments

L'encapçalament superior d'una pàgina de DevSite ha de ser un <h1> . El cos de la pàgina no ha de contenir un altre <h1> per evitar confondre els navegadors no visuals. L'eina nbgenerate converteix el contingut i les plantilles HTML i Markdown de DevSite en quaderns Jupyter compatibles amb Colab.

Mides

Títol 1

Títol 2

Títol 3

Títol 4

Títol 5
Títol 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>

Reducció

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

Taula de continguts

A DevSite, <h2> i <h3> s'afegeixen automàticament a la taula de continguts (TdC) "en aquesta pàgina".

Amaga els encapçalaments de la TdC

Per evitar que s'afegeixi un encapçalament (com ara "Encapçalament 2" i "Encapçalament 3" a la secció anterior, que no apareixen a la TdC), apliqueu class="hide-from-toc" .

Títol 2

Títol 3

HTML

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

Reducció

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

Personalitza el text de l'encapçalament a la TdC

Si voleu que el text de la TdC difereixi de l'encapçalament real (com aquesta secció!), establiu un atribut data-text a l'encapçalament:

Títol 2

HTML

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

Reducció

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

Incloeu els encapçalaments dins de les taules de la TdC

També podeu posar un <h2> o <h3> dins de la capçalera d'una taula ( <th> ) per forçar la taula a la TdC. Dins de la capçalera d'una taula, <h2> i <h3> tenen un estil de text normal, de manera que els lectors no ho podran dir.

A les pàgines de documentació (no a les pàgines "d'amplada completa", com la majoria de pàgines de destinació), els encapçalaments diferents de <h1> també tenen un botó per copiar l'enllaç, que només apareix quan passeu el cursor per sobre de l'encapçalament.

Per desactivar aquest botó per a un encapçalament específic, apliqueu class="no-link" a l'encapçalament.

HTML

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

Reducció

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

Per forçar el botó d'enllaç a aparèixer en un encapçalament que d'altra manera no el tindria (per exemple, un <h1> o qualsevol encapçalament d'una pàgina d'ample complet), afegiu class="add-link" a l'encapçalament.

Títol 1

HTML

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

Reducció

# Heading 1 {:.add-link}

Encapçalaments numerats

Per prefixar els encapçalaments <h2> amb números seqüencials per designar seccions amb contingut complex com a passos diferents en un procés de diversos passos, afegiu una classe numerada a cada encapçalament.

Primer encapçalament numerat

Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.

Segon encapçalament numerat

Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.

Tercer encapçalament numerat

Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.

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.

Reducció

## 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ítols numerats

Per prefixar els encapçalaments <h3> que segueixen els encapçalaments <h2> amb números seqüencials, afegiu una classe numerada a cada encapçalament <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.

Reducció

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

Encapçalament numerat

Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.

Subtítol numerat

Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.

Subtítol numerat

Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.

Subtítol numerat

Contingut complex format per paràgrafs, llistes, taules, imatges, vídeos, ginys.