Koppen

De bovenste kop van een DevSite-pagina moet een <h1> zijn. De paginatekst mag geen andere <h1> bevatten om verwarring bij niet-visuele browsers te voorkomen. De nbgenerate tool converteert DevSite HTML- en Markdown-inhoud en sjablonen naar Colab-compatibele Jupyter-notebooks.

Maten

Kop 1

Rubriek 2

Rubriek 3

Rubriek 4

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

Afwaardering

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

Inhoudsopgave

In DevSite worden <h2> en <h3> automatisch toegevoegd aan de inhoudsopgave "op deze pagina".

Verberg koppen in de inhoudsopgave

Om te voorkomen dat er een kop wordt toegevoegd (zoals "Kop 2" en "Kop 3" in het bovenstaande gedeelte, die niet in de inhoudsopgave voorkomen), past u class="hide-from-toc" toe.

Rubriek 2

Rubriek 3

HTML

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

Afwaardering

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

Pas de koptekst in de inhoudsopgave aan

Als je wilt dat de tekst in de inhoudsopgave afwijkt van de daadwerkelijke kop (zoals deze sectie!), stel dan een data-text attribuut in op de kop:

Rubriek 2

HTML

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

Afwaardering

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

Neem kopjes op in tabellen in de inhoudsopgave

Je kunt ook een <h2> of <h3> in een tabelkop ( <th> ) plaatsen om de tabel in de inhoudsopgave te forceren. Binnen een tabelkop zijn <h2> en <h3> opgemaakt als gewone tekst, zodat lezers het niet kunnen zien.

Op documentatiepagina's (niet op "volledige" pagina's zoals de meeste landingspagina's) krijgen andere koppen dan <h1> ook een knop om de link te kopiëren, die alleen verschijnt als u over de kop beweegt.

Om deze knop voor een specifieke kop uit te schakelen, past u class="no-link" toe op de kop.

HTML

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

Afwaardering

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

Om te forceren dat de linkknop verschijnt op een kop die deze anders niet zou hebben (bijvoorbeeld een <h1> of een kop op een pagina over de volledige breedte), voegt u class="add-link" toe aan de kop.

Kop 1

HTML

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

Afwaardering

# Heading 1 {:.add-link}

Genummerde kopjes

Als u <h2> -koppen wilt laten voorafgaan door opeenvolgende nummers om secties met complexe inhoud aan te duiden als afzonderlijke stappen in een uit meerdere stappen bestaand proces, voegt u een genummerde klasse toe aan elke kop.

Eerste genummerde kop

Complexe inhoud bestaande uit alinea's, lijsten, tabellen, afbeeldingen, video's en widgets.

Tweede genummerde kop

Complexe inhoud bestaande uit alinea's, lijsten, tabellen, afbeeldingen, video's en widgets.

Derde genummerde kop

Complexe inhoud bestaande uit alinea's, lijsten, tabellen, afbeeldingen, video's en 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.

Afwaardering

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

Genummerde subkoppen

Om <h3> koppen die volgen op <h2> koppen te laten voorafgaan door volgnummers, voegt u een genummerde klasse toe aan elke <h3> kop.

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.

Afwaardering

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

Genummerde kop

Complexe inhoud bestaande uit alinea's, lijsten, tabellen, afbeeldingen, video's en widgets.

Genummerde subkop

Complexe inhoud bestaande uit alinea's, lijsten, tabellen, afbeeldingen, video's en widgets.

Genummerde subkop

Complexe inhoud bestaande uit alinea's, lijsten, tabellen, afbeeldingen, video's en widgets.

Genummerde subkop

Complexe inhoud bestaande uit alinea's, lijsten, tabellen, afbeeldingen, video's en widgets.