Warum neue Elemente?

HTML5 kommt mit vielen neuen Elementen, wovon viele unter dem Begriff "Semantische Elemente" zusammengefasst werden. Doch warum wurden diese überhaupt eingeführt?

Schaut man sich die semantische Funktion dahinter an, dann können wir feststellen, dass wir einen Header, Footer oder auch einen Artikeltext mit dem universellen <div>-Container bereits vor dieser Neueinführung realisieren konnten. Doch genau an diesem Punkt setzt HTML5 an:

Wir haben nun die Möglichkeit auf einen Blick zu sehen, um was es sich bei dem Element handelt. Da die Namensgebung hier bereits passiert ist, hat das <header></header> Element auch genau die semantische Funktion eines Headers. Sehen wir also in einem Codeabschnitt ein schließenden </div>-Tag, so müssen wir rätseln, um was für einen Container es sich dabei handelt. Bei einem schließenden </header>-Tag erübrigt sich das.

Des Weiteren haben diese Elemente eine enorm wichtige Bedeutung für Programme, die Webseiten auslesen und auf genau diese Semantik angewiesen ist. Ein Programm kann bei folgendem Code <span id="head"></span> nicht Unterscheiden, ob es sich um eine Überschrift handelt (vom eng. heading) oder um eine Header; und bei diesem Beispiel waren wir noch gnädig...

Die semantischen Elemente im Überblick

Hier sollen alle neuen semantischen Elemente von HTML5 einmal aufgelistet und kurz beschrieben werden:

TagBeschreibung
<article>vom eng. article = Artikel

Definiert einen spezifischen Inhalt, der für sich alleine stehen kann und nicht unbedingt in einem Zusammenhang mit anderem Inhalt stehen muss.
<aside>vom eng. aside = Nebenbemerkung

Definiert einen Inhalt, der auch visuell neben dem Inhalt steht und sich auf diesen Bezieht.
<details>vom eng. details = Einzelheiten

Definiert zusätzliche Informationen, die der Benutzer auf Abruf öffnen oder schließen kann.
<figcaption>vom eng. figure caption = Überschrift des Darstellungs-Elements

Definiert eine Überschrift, für das <figure></figure> Element.
<figure>vom eng. figure = Darstellung

Bindet Diagramme, Fotos, Grafiken, oder Illustrationen ein.
<footer>vom eng. footer = Fußzeile

Definiert eine Fußzeile, die weitere Informationen, wie beispielsweise Links zum Impressum, dem Logo oder ein Seitenverzeichnis enthält.
<header>vom eng. header = Kopfzeile

Definiert eine Kopfzeile, meistens in Verbindung mit dem Logo der Webseite, einer Navigationsleiste und einem Suchbutton.
<main>vom eng. main = wichtigste

Definiert den wichtigsten und wesentlichen Inhalt einer Webseite.
<mark>vom eng. mark = markieren

Markiert einzelne Wörter und Phrasen aus einem Text, die besonders hervorgehoben werden sollen. Der Inhalt dieses Elements wird visuell mit einer gelblichen Hintergrundfarbe markiert, als würde man dies auf einem Blatt Papier mit dem Marker tun.
<nav>vom eng. navigation = Navigation

Definiert mehrere Links, die zur Seitennavigation zu verwenden sind.
<section>vom eng. section = Bereich

Definiert einen Bereich auf einer Webseite, wie beispielsweise den Header, den wesentlichen Inhalt oder auch den Footer.
<summary>vom eng. summary = Zusammenfassung

Definiert eine visuell sichtbare Überschrift für das <details></details> Element.
<time>vom eng. time = Zeit

Definiert eine Zeitangabe in einem Textfluss.

Semantische Elemente zur Einteilung

Die semantischen Elemente

  • <header></header>
  • <footer></footer>
  • <main></main>
  • <section></section>
  • <article></article>
  • <nav></nav>
  • <aside></aside>

sind Hilfsmittel zur Einteilung einer Webseite. Damit haben wir die Möglichkeit unsere Seite geschickt und semantisch korrekt zu gestalten. Die Verwendung dieser Elemente soll hier an einem Bild dargestellt werden:

Semantische Elemente in HTML5 - CodingLab

In einem <header></header> Element steht in der Regel ein einleitender Inhalt. Benutzt man dieses Element für die Einleitung einer Webseite so finden wir dort Navigationslinks, das Webseitenlogo oder auch eine Suchleiste. Alles was für die Einleitung und die richtige Benutzung der Webseite als Hilfsmittel dient, kann in den Header-Bereich. Dieses Element wird standardmäßig auf allen Webdokumenten einer Internetpräsenz an der gleichen Stelle dargestellt und nimmt somit den Platz einer immer wieder kehrenden Hilfsleiste ein:

  • Html
  • Ergebnis
<header> <img src="https://www.coding-lab.de/img/logo_std.png" alt="Logo" /> <nav> <ul> <li><a href="#">Bildergallerie</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> </ul> <input name="suchfeld" placeholder="Geben Sie ein Thema ein..." /> <button id="suchbutton">Suchen</button> </nav> </header>

Benutzen wir dieses Element für einen Artikel, so finden wir darin Überschriften, Links und Paragraphen, die den Artikel treffend einleiten. Dieses Element kann also durchaus an mehreren Stellen im Dokument vorkommen und seinen Zweck immer noch treffend erfüllen.

  • Html
  • Ergebnis
<section> <header> <h1>Section Überschrift</h1> <p>Autor: CodingLab</p> </header> <article> <header> <h1>Artikel Überschrift</h1> <h3>Slogan</h3> <p>Notiz: Eine wichtige Notiz</p> </header> <p>Artikel Inhalt sollte hier folgen...</p> </article> <section>

Das <footer></footer> Element wird als Fußzeile eines Inhalts benutzt. Beziehen wir dieses Element wieder auf die gesamte Webseite, so finden wir darin allerlei ergänzende Angaben, wie beispielsweise ein Seitenverzeichnis (Sitemap), Links zum Impressum oder einer Serviceseite oder Copyright angaben.

  • Html
  • Ergebnis
<footer> <img src="https://www.coding-lab.de/img/logo_std.png" alt="Logo" /> <nav> <h1>Unternehmen</h1> <h2>Struktur</h2> <ul> <li><a href="#">Impressum</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Datenschutz</a></li> </ul> <h2>Bilder</h2> <ul> <li><a href="#">Gallerie 1</a></li> <li><a href="#">Gallerie 2</a></li> <li><a href="#">Gallerie 3</a></li> </ul> </nav> <p> <strong>Copyright © Unternehmen | Alle Rechte vorbehalten.</strong> </p> </footer>

Ebenfalls wichtig ist dieses Element, wenn wir es in einem <section></section> Element benutzen. Dort enthält es ähnlich, wie die Fußnote in Büchern, Informationen, die zwar eher nebensächlich, aber dennoch in Verbindung zum Artikel stehen; etwa Quellenangaben oder Querverweise. Demnach kann also auch dieses Element mehrmals im Dokument stehen.

  • Html
  • Ergebnis
<section> <article> <p>Artikel<sup>1</sup> Inhalt<sup>2</sup> sollte hier folgen...</p> <footer> <ul> <li><sup>1</sup>Ein Artikel ist...</li> <li><sup>2</sup>Dieses Wort bezieht sich auf...</li> </ul> </footer> </article> <footer> <p>Footer des Section-Elements</p> </footer> <section>

Das <main></main> Element kennzeichnet den wesentlichen Inhalt einer Webseite. Stellen wir uns vor, wir haben eine Webseite, die einen spannenden Zeitungsartikel wiedergeben soll. Was finden wir zu aller erst? Eine Header-Leiste mit Logo und Links. Eventuell noch ein Cookie-Disclaimer und ein Menü auf der linken Seite. Außerdem wollen wir ja noch Kommentare zu dem Artikel angeben, die dann darunter angezeigt werden. Bei den ganzen Extras, die man heutzutage so braucht, ist es erforderlich, dass der Zeitungsartikel besondere Aufmerksamkeit bekommt, denn genau für diesen wurde dieses Webdokument ja erstellt. Somit zeichnen wir den Artikel mit <main></main> aus.

  • Html
  • Ergebnis
<header> <nav>...</nav> </header> <aside> <ul> <li>Link1</li> <li>Link2</li> </ul> </aside> <main> <article> <p>DER WICHTIGE INHALT STEHT DOCH EIGENTLICH HIER</p> </article> </main> <footer> <p>Copyright...</p> </footer>

Das <section></section> Element kann beliebig oft in einem Dokument stehen und kennzeichnet einen Bereich. Bei dem eben genannten Beispiel eines Online-Zeitungsartikels würden wir die Kommentarfunktion gesondert vom eigentlichen Artikel als Bereich markieren:

  • Html
  • Ergebnis
<section> <article> <p>Hier steht der Artikeltext.</p> </article> </section> <section> <article> <ul> <li>Kommentar 1</li> <li>Kommentar 2</li> <li>Kommentar 3</li> </ul> </article> </section>

Ebenfalls erwünscht ist die Kombination aus <section></section>, <header></header> und <footer></footer>:

  • Html
  • Ergebnis
<section> <header> <p>In diesem Bereich wird der Zeitungsartikel gezeigt</p> </header> <article> <p>Hier steht der Artikeltext.</p> </article> <footer> <a href="#">Quelle des Artikels</a> </footer> </section> <section> <header> <p>In diesem Bereich werden Kommentare angezeigt</p> </header> <article> <ul> <li>Kommentar 1</li> <li>Kommentar 2</li> <li>Kommentar 3</li> </ul> </article> <footer> <p>Alle Kommentare sind von Facebook-Benutzern.</p> </footer> </section>

Mit dem <article></article> Element zeichnen wir in HTML5 einen für sich stehenden Inhalt aus. Nicht immer muss dies einem tatsächlichen Artikeltext gleichstehen. Vielmehr grenzen wir damit kleine Teilaspekte unserer Webseite ein:

  • Html
  • Ergebnis
<article> <h1>Artikel Überschrift 1</h1> <p>Artikeltext 1</p> </article> <article> <h1>Artikel Überschrift 2</h1> <p>Artikeltext 2</p> </article>

Oftmals fasst man mehrere Artikel zu einem Bereich (<section></section>) zusammen.

Mit dem <nav></nav> Element markieren wir einen Bereich, der für eine bessere Navigation der Webseite geeignet ist. Hier spalten sich zum Teil die Gemüter:

Während die einen meinen, dass wir dieses Element lediglich für die Links einer Navigationsleiste benutzen dürfen, meinen andere wiederum, dass wir damit generell den Bereich der Navigation auszeichnen. Bei letzterem Szenario dürfen also auch Textelemente oder sogar Formular-Elemente vorkommen. Wie das gehandhabt wird ist zwar nicht komplett egal, sollte aber aus semantischer Sicht jeder für sich entscheiden. Wenn ein Suchfeld mit einem Suchbutton fester Bestandteil der Navigationsleiste ist, sollte es auch in einem <nav></nav> Element vorkommen.

  • Html
  • Ergebnis
<nav> <ul> <li><a href="#">Referenzen</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Anfahrt</a></li> </ul> </nav>

Das <aside></aside> Element kennzeichnen wir einen Bereich, der nicht nur visuell, sondern auch inhaltlich neben dem Hauptinhalt steht, sich jedoch auf diesen Bezieht. Oftmals wird dieses Element für eine Art Inhaltsverzeichnis benutzt, dass Informationen und Links zur Webseite enthält. Dieses Element sollte dann tatsächlich am Rande stehen.

  • Html
  • Ergebnis
<aside> <h1>Inhaltsverzeichnis</h1> <ul> <li><a href="#Abschnitt1">Abschnitt 1</a></li> <li><a href="#Abschnitt2">Abschnitt 2</a></li> </ul> </aside> <article> <h1>Artikel Überschrift 2</h1> <p>Artikeltext 2</p> </article>

Dieses Element können wir aber auch als generelle Information über einen Inhalt benutzen:

  • Html
  • Ergebnis
<p>Auf dieser Seite lernen wir HTML5.</p> <aside> <h1>Glossar</h1> <h3>HTML</h3> <p>HTML steht für "Hyper Text Markup Language"</p> </aside>

Semantische Elemente für Bilder

Speziell für Bilder wurden zwei neue Elemente in HTML5 eingeführt:

  • <figcaption></figcaption>
  • <figure></figure>

Das <figure></figure> Element umschließt in der Regel ein <img /> Element und bietet gerade in Verbindung mit <figure></figure> die Möglichkeit dieses treffend zu beschreiben.

  • Html
  • Ergebnis
<figure> <img src="https://www.coding-lab.de/img/logo_std.png" alt="Logo" /> <figcaption> <p>Logo der Webseite</p> <a href="#">Quelle: </a> </figcaption> </figure>

Mit dieser Kombination ist ein Bild nicht länger ein Bild, sondern eine wichtige Ressource mit Quellenangabe und Beschreibung; also wesentlich aussagekräftiger.

Semantische Elemente für Zusatzinformationen

Für zusätzliche Informationen haben wir zwei Elemente

  • <details></details>
  • <summary></summary>

in HTML5. Dieser werden in aller Regel zusammen benutzt und haben gegenüber anderen Elementen einen entscheidenden Unterschied: Der Benutzer kann den Inhalt eines <details></details> Elements mit einem Mausklick öffnen und schließen. Somit entscheidet er selbst, ob diese Angaben für ihn wichtig oder nicht erscheinen.

  • Html
  • Ergebnis
<details> <summary> HTML </summary> <p>HTML steht für "Hyper Text Markup Language"</p> </details> <details> <summary> CSS </summary> <p>CSS steht für "Cascading Style Sheets"</p> </details>

Mit dem leeren Attribut open haben wir weiterhin die Möglichkeit den Ausgangszustand der Daten auszusuchen. Geben wir dieses Attribut, wird der Inhalt aus dem <details></details> Element sofort ausgeklappt.

  • Html
  • Ergebnis
<details open> <summary> HTML </summary> <p>HTML steht für "Hyper Text Markup Language"</p> </details>

Semantische Elemente für Textinhalte

Für Textinhalte haben wir weitere zwei Elemente:

  • <mark></mark>
  • <time></time>

Mit dem Element <mark></mark> markieren wir ein Wort oder einen Satz, den wir für wichtiger als die anderen befinden. Das besondere hierbei ist, dass die meisten Browser den Inhalt mit einer anderen Hintergrundfarbe (Standard: Gelb) darstellen und wir somit den tatsächlichen Effekt haben, als würden wir mit dem Textmarker drüber fahren.

  • Html
  • Ergebnis
<p> CodingLab bietet u.a. Tutorials zu wichtigen Themengebieten der <mark>Informatik</mark>. </p>

Das <time></time> Element kennzeichnet eine Zeitangabe, die für den Menschen lesbar ist.

  • Html
  • Ergebnis
<p>Am <time>24.12.2016 um 15:30 Uhr</time> gibt es Weihnachtsessen.</p>

Darüber hinaus können wir mit dem Attribut datetime="" eine für Computer lesbare Zeitangabe in verschiedenen Formaten angeben. Somit finden wir im Text nicht nur eine Zahl, die eventuell eine Zeit bedeuten könnte, sondern haben diese auch noch für Programme und Suchmaschinen lesbar dargestellt.

  • Html
  • Ergebnis
<p> Am <time datetime="2016-12-24T15:30+01:00">24.12.2016 um 15:30 Uhr</time> gibt es Weihnachtsessen. </p>