Überschriften

Die oberste Überschrift einer DevSite-Seite muss eine <h1> sein. Der Body der Seite darf kein weiteres <h1> enthalten, um nicht visuelle Browser nicht zu verwirren. Das Tool nbgenerate wandelt HTML- und Markdown-Inhalte und ‑vorlagen von DevSite in Colab-kompatible Jupyter-Notebooks um.

Größen

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5
Überschrift 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

Inhaltsverzeichnis

In DevSite werden <h2> und <h3> automatisch dem Inhaltsverzeichnis „Auf dieser Seite“ hinzugefügt.

Überschriften aus dem Inhaltsverzeichnis ausblenden

Wenn Sie verhindern möchten, dass eine Überschrift hinzugefügt wird (z. B. „Überschrift 2“ und „Überschrift 3“ im Abschnitt oben, die nicht im Inhaltsverzeichnis erscheinen), verwenden Sie class="hide-from-toc".

Überschrift 2

Überschrift 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}

Überschriftentext in der Inhaltsübersicht anpassen

Wenn sich der Text in der Inhaltsübersicht von der eigentlichen Überschrift unterscheiden soll (wie in diesem Abschnitt), setzen Sie für die Überschrift das Attribut data-text:

Überschrift 2

HTML

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

Markdown

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

Überschriften in Tabellen in die Inhaltsübersicht aufnehmen

Sie können auch ein <h2> oder <h3> in eine Tabellenüberschrift (<th>) einfügen, um die Tabelle in die Inhaltsübersicht aufzunehmen. In einer Tabellenüberschrift werden <h2> und <h3> wie normaler Text formatiert, sodass Leser sie nicht unterscheiden können.

Auf Dokumentationsseiten (nicht auf „Vollbreite“-Seiten wie die meisten Landingpages) wird bei Überschriften mit Ausnahme von <h1> auch eine Schaltfläche zum Kopieren des Links angezeigt, die nur erscheint, wenn Sie den Mauszeiger auf die Überschrift bewegen.

Wenn Sie diese Schaltfläche für eine bestimmte Überschrift deaktivieren möchten, wenden Sie class="no-link" auf die Überschrift an.

HTML

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

Markdown

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

Wenn die Linkschaltfläche in einer Überschrift erscheinen soll, in der sie sonst nicht angezeigt würde (z. B. in einer <h1> oder einer Überschrift auf einer Seite mit voller Breite), fügen Sie der Überschrift class="add-link" hinzu.

Überschrift 1

HTML

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

Markdown

# Heading 1 {:.add-link}

Nummerierte Überschriften

Wenn Sie <h2>-Überschriften mit fortlaufenden Nummern versehen möchten, um Abschnitte mit komplexen Inhalten als einzelne Schritte in einem mehrstufigen Prozess zu kennzeichnen, fügen Sie jeder Überschrift eine nummerierte Klasse hinzu.

Erste nummerierte Überschrift

Komplexe Inhalte aus Absätzen, Listen, Tabellen, Bildern, Videos und Widgets.

Zweite nummerierte Überschrift

Komplexe Inhalte aus Absätzen, Listen, Tabellen, Bildern, Videos und Widgets.

Dritte nummerierte Überschrift

Komplexe Inhalte aus Absätzen, Listen, Tabellen, Bildern, Videos und 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.

Nummerierte Zwischenüberschriften

Wenn Sie <h3>-Überschriften, die auf <h2>-Überschriften folgen, mit fortlaufenden Nummern versehen möchten, fügen Sie jeder <h3>-Überschrift eine nummerierte Klasse hinzu.

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.

Nummerierte Überschrift

Komplexe Inhalte aus Absätzen, Listen, Tabellen, Bildern, Videos und Widgets.

Nummerierte Zwischenüberschrift

Komplexe Inhalte aus Absätzen, Listen, Tabellen, Bildern, Videos und Widgets.

Nummerierte Zwischenüberschrift

Komplexe Inhalte aus Absätzen, Listen, Tabellen, Bildern, Videos und Widgets.

Nummerierte Zwischenüberschrift

Komplexe Inhalte aus Absätzen, Listen, Tabellen, Bildern, Videos und Widgets.