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.
Klik-en-kopieer-links
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.
Rubriek 4
Rubriek 5
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.