HTML5 tags: nav, doctype, details und summary

Worum geht´s?

In diesem HTML Tutorial lernst du einige neue HTML-Tags kennen, die mit HTML5 eingeführt worden sind. Eine der größten Neuerungen sind sogenannte semantische HTML-Tags – mit diesen werden wir uns hier beschäftigen. Außerdem lernen wir, wie wir das HTML Tag details und das HTML Tag summary nutzen können, um „aufklappbare“ Inhalte zu realisieren.

1. Was sind semantische HTML-Tags in HTML5?

Das Wort „Semantik“ heißt so viel wie „Bedeutung“. Semantische HTML-Tags sind in HTML5 spezielle HTML-Tags, die an sich keine neuartige Funktionalität bringen. Sie helfen aber dabei, besser zu unterscheiden, welche Inhalte im HTML-Code wo zu finden sind.

Anstatt also alle Unter-Bereiche einer Websites über DIVs zu lösen, verwenden wir nun in HTML5 verschiedene neue, semantische HTML-Tags. Hier nur einige aufgezählt:

• nav Tag für Navigationselemente
• footer Tag für den Footer-Bereich der Website
• aside Tag für Neben-Elemente wie z.B. einer Anmelde-Box zum Newsletter

2. Warum sind semantische HTML-Tags in HTML5 wichtig?

Wir Menschen sind ja im Durchschnitt relativ gut darin zu erkennen, welche Website-Elemente welchen Zweck erfüllen – wo der Inhalt ist, wo Navigationselemente usw.

Es gibt aber zwei große Gruppen an Website-Besucher, die sich da nicht so leicht tun:

• Blinde oder sonstwie beeinträchtigte Menschen
• Suchmaschinen

Blinde Menschen benutzen beim Besuch einer Website oft sogenannte Screen Reader. Das sind Programme, die den Inhalt der Website vorlesen. Je einfacher es für diesen Screen Reader ist, sich innerhalb der Website zurechtzufinden, desto einfacher ist es auch für den blinden Menschen, sich zurechtzufinden.

Die zweite große Gruppe an Website-Besuchern, die von semantischen HTML-Tags profitiert, sind Suchmaschinen. Diese tun sich leichter, eine Website zu indexieren (sich einen Überblick zu verschaffen), wenn klar ist, welche Website-Bereiche welche Inhalte beinhalten.

Man könnte jetzt argumentieren, dass Suchmaschinen und Screen Reader ja auch einfach z.B. die Klassen und IDs der jeweiligen HTML-Elemente durchsuchen können, um rauszufinden, was z.B. die Haupt-Überschrift ist und wo wichtige Links sind.

Das würde aber nur dann funktionieren, wenn alle Websites diese Klassen, IDs usw. nach ähnlichen Prinzipien gestalten würden – was kaum der Fall ist. Außerdem verwenden manche ProgrammiererInnen dann für die Bezeichner dieser Klassen, IDs usw. womöglich z.B. deutsche oder kroatische oder russische Bezeichnungen – sehr verwirrend für Suchmaschinen und Screen Reader.

Deswegen wurden in HTML5 eben semantische Tags eingeführt, um diesen Aufwand zu reduzieren.

3. Was semantische HTML-Tags dir als Website-Betreiber bringen

Der erste, offensichtliche Grund ist dieser: Je besser Suchmaschinen deine Website verstehen, desto besser wird deine Website indexiert werden. Und je besser sie indexiert wird, desto besser für deine Suchmaschinen-Optimierung (SEO).

Es gibt aber noch einen Grund, der in Zukunft relevant sein wird: Vielleicht ist dir schon aufgefallen, dass Google bei bestimmten Suchen oft gewisse Vorschau-Inhalte anzeigt, bevor die „normale“ Liste an Links angezeigt wird.

Semantisches HTML hilft den Suchmaschinen, deine Inhalte dort (ganz oben und deutlich sichtbar!) anzuzeigen.

Und das beste ist: Wenn du Content Management Systeme wie WordPress benutzt und die jeweiligen Formatvorlagen (Themes) entsprechend programmiert sind, kannst du die Nutzung semantischer HTML Tags von HTML5 im Grunde vollständig automatisieren.

Es ist also nicht allzu viel Arbeit, und zahlt sich langfristig aus.

4. Die wichtigsten neuen HTML-Tags in HTML5

Die folgende Auflistung ist eine kleine Auswahl an häufig verwendeten HTML5-Tags:

4.1 Das nav HTML Tag

Das nav HTML Tag steht für „navigation“, und zeigt an, dass innerhalb des nav HTML Tags eine Gruppe von wichtigen Links zu finden ist. Üblicherweise ein Menü mit den wichtigsten Links (Haupt-Menü oder Footer-Menü), oder auch z.B. eine Breadcrumb-Ansicht („breadcrumb“ = Brotkrumen, eine Art hierarchische Einordnung, wo man sich auf einer Website befindet – siehe ganz oben auf dieser Website für ein Beispiel).

Hier das nav HTML Tag, das für die Tutorial-Übersichts-Seite von relativeMeister generiert wird:

<nav id='breadcrumbs'>
  <a class='' href='http://relativemeister.com'>relative Meister</a> &raquo; 
  <a href='http://relativemeister.com/tutorial'>Tutorials</a>
</nav>

4.2 Das doctype HTML Tag

Das doctype HTML Tag wird ganz oben vor dem <html>-Tag geschrieben, und sagt dem Browser, dass es sich hierbei um HTML-Code handelt.

Man schreibt das doctype HTML Tag einfach einmal ganz oben hin, ähnlich wie ein <br>-Tag, nur eben ganz oben:

<!DOCTYPE html>
<html>
    <head>

4.3 Das header HTML Tag, das footer HTML Tag und das main HTML Tag

Das header HTML Tag steht für den Header-Bereich einer Website (nicht zu verwechseln mit dem <head>-Tag). Also den Bereich, wo bei vielen Websites das Logo und das Hauptmenü zu finden ist.

Das footer HTML Tag funktioniert genau gleich, nur eben für den Footer.

Das main HTML Tag steht für den Haupt-Inhalt der Seite.

Du schreibst sie in etwa so:

<body>
    <header>
        Mein Header
    </header>
    <main>
        Hauptinhalt
    </main>
    <footer>
        Mein Footer
    </footer>
</body>

4.4 Das article HTML Tag und das aside HTML Tag

Im article HTML Tag beinhaltet – wie der Name vermuten lässt – Artikel, Geschichten, etc. Also Haupt-Inhalte im Sinne von Texten. Idealerweise verwendest du es dort, so der Inhalt auch als eigenständiger Artikel einer anderen Website verwendet werden könnte.

Das aside HTML Tag dagegen wird immer dort verwendet, wo es um zusätzliche Bereiche geht. Das könnte z.B. eine kleine Box unter dem Artikel sein, wo was zum Autor steht. Oder eine rechts vom Artikel, die dazu auffordert, den Blog doch zu abonnieren.

Man könnte es auch unterscheiden mit Haupt-Inhalt und Neben-Inhalt:

<main>
    <article>Der Haupt-Text</article>
    <aside>Über den Autor</aside>
</main>

4.5 Das section HTML Tag, und der zweite Nutzen des header HTML Tags

Das section HTML Tag steht in HTML5 für einen Unter-Bereich (der Website, des Artikels, …):

<main>
    <section id="introductionary">
        Hier kommt das Intro
    </section>
    <article>
        <header>Im Artikel geht's darum</header>
        Der Haupt-Text
    </article>
    <aside>Über den Autor</aside>
</main>

Das header HTML Tag von vorher kannst du auch benutzen, um z.B. innerhalb eines article HTML Tags den einführenden Absatz hervorzuheben:

<article>
    <header>Im Artikel geht's darum</header>
        Der Haupt-Text
</article>

4.6 Das details HTML Tag und das summary HTML Tag

Abschließend werden wir uns jetzt noch das details HTML Tag und das summary HTML Tag ansehen.

Diese gehören zwar auch zu den semantischen HTML Tags, lösen aber zusätzlich ein funktionales Problem auf sehr elegante Weise:

Wie erzeuge ich aufklappbare Inhalte?

Also z.B. für FAQs, wo man die Fragen durch Klicken so erweitern kann, dass man auch die Antworten sehen kann?

Damit das klappt, packst du ein summary HTML Tag in ein details HTML Tag hinein – in etwa so:

<details>
    <summary>Wer ist der schönste im Land?</summary>
    Antwort: ICH!
</details>

Anfangs wird bei diesem details HTML Tag nur der Text im summary HTML Tag angezeigt. Klickt der Website-Besucher auf den Text, wird der Rest aufgeklappt.

Sowohl im details HTML Tag als auch im summary HTML Tag kann man alle anderen HTML-Tags verwenden – also z.B. auch Bilder etc.

Bevor das details HTML-Tag und das summary HTML-Tag in HTML5 hinzukamen, war diese Aufgabe nur mit JavaScript oder dem CSS Checkbox Hack zu lösen.

Praktisch, oder?

So, das wars erstmal zu semantischem HTML in HTML5 in diesem HTML Tutorial 🙂

Diskussion zum Tutorial