Artikelbild HTML 5 Elemente
Webtechniken

HTML 5 Basics: Die neuen semantischen Layout-Elemente

Mit HTML 5 wurde HTML um viel Neues erweitert und die Auszeichnungssprache auf aktuellen Stand gebracht. Die neuen semantischen Elemente erlauben eine saubere Auszeichnung der Webseitenstruktur – wo Suchmaschinen in Kürze drauf achten werden. Wenn sie es nicht längst tun.

Mit HTML 5 wurde HTML um viele neue sinnvolle Möglichkeiten erweitert. Unter anderem auch mit semantischen Elementen, mit denen die Struktur einer Seite besser ausgezeichnet werden kann. Diese Tags ersetzen teils die bisherigen <div>-Konstruktionen und können wie alle bisherigen HTML-Tags wie <p> oder <table> auch ohne Zuweisung einer ID oder Klasse mit CSS formatiert werden.

Die Tags erlauben es den Suchmaschinen, den Inhalt und die Struktur der Webseite besser zu erfassen. Wer also neue Projekte beginnt oder ältere überarbeitet, sollte auf deren Verwendung achten.

Artikelbild semantische Layout-Elemente

Vom <header> bis zum <footer>

Webseiten Aufbau klassischDie Überschrift deutet es schon an: Die neuen Tags haben nicht irgendwelche kryptischen Bezeichnungen sondern reden sozusagen Klartext. Denn die meisten Webseiten bestehen nun mal aus den folgenden Teilen:

  • ein Kopfbereich mit Logo, Slogan usw.
  • die Navigation
  • der Hauptinhaltsbereich
  • eine Seitenleiste mit Zusatzinfos
  • dem Footer

Und so sind die Namen der semantischen Elemente auch selbsterklärend: Header, Nav, Main, Aside und Footer.

HTML 5 – Basics: <header> </header>

Mit dem Header ist übrigens nicht der Bereich zwischen dem <head> und </head>-Tag gemeint. Dieser bleiben wie gewohnt den Metadaten vorbehalten.
Meist sind im Header einer Webseite immer ähnliche Inhalte hinterlegt. Ein Logo mitsamt Slogan, kleine Textlinks zu Kundenkonto oder sonstigen Infos oder auch die Navigation der Webseite. Um diesen Teil der Seite korrekt auszuzeichnen, muss er zwischen den Tags <header> und </header> stattfinden.

 

Das Beispiel zeigt einen Header. Im ersten DIV-Block ist das Logo platziert, im zweiten eine kleine Auflistung der Features.
Doch der <header>-Tag beschränkt sich nicht nur auf den Kopfbereich der Seite, sondern kann auch in anderen Elementen verwendet werden. Dazu weiter unten mehr.

Navigation mit <nav> </nav>

Eine Webseite ohne Navigation muss man lange suchen. Selbst die derzeit sehr beliebten One-Pager haben irgendwo Links zum Impressum und anderen Pflichtangaben. Wer großen Wert auf die Navigation seiner Webseite legt, sollte für diese das <nav>-Tag verwenden.

Zwischen den <nav>-Tags sollten die wichtigsten Navigationen der Webseite untergebracht sein. Für den Aufbau von Linklisten oder Blogrolls ist es nicht vorgesehen.
Das <nav>-Tag muss auch nicht separat alleine stehen, sondern kann auch Teil von <header> sein, wenn sich die Navigation im Kopf der Seite befindet.

Inhalte in <main>

Statt den Teil mit dem Hauptinhalt der Seite über ein <div id=“content“> zu erstellen, genügt mit HTML 5 einfach das <main>-Tag. Und hier sollte sich eben auch wirklich nur der Hauptinhalt befinden, nichts weiter. Keine Navigationen, Sidebars oder Footer.

Themen in <section>

Auf einer Seite sind viele verschiedene Inhalte, die sich aber thematisch nicht gleichen? Mit <section></section> können diese gegliedert werden. Wer also, warum auch immer, Text zu Saftpressen und Rasierapperaten auf einer Webseite hat, sollte diese mit <section></section> einfassen.

Diese Tags müssen sich natürlich im Hauptinhaltsbereich befinden. Ermöglicht wird dadurch aber auch die Unterteilung der Sidebar in verschiedene Themenbereiche.

Artikel? Dann rein damit in <article>

Auch hier ist die Verwendung offensichtlich: Zwischen <article> und </article> stehen Artikel. Passend also für Artikel in Blogs, die in sich (thematisch) geschlossen sind.

Gibt es auf einer Seite mehrere Artikel, sollten diese also mit diesen Tags umfasst werden. Hat jeder Artikel zu Beginn immer die Angaben zum Autoren, Veröffentlichkeitsdatum oder ähnliches, können diese auch in ein <header>-Tag gesetzt werden.

Die Sidebar mit <aside>

<aside> und </aside> sind für die Auszeichnung von zusätzlichen Inhalten vorgesehen. <aside> wird häufig für die Sidebar verwendet, kann aber auch für die Platzierung von Werbebannern, Linklisten oder empfohlene, weiterführende Artikel verwendet werden. Ist die Navigation nicht im Header der Seite sondern in der Sidebar platziert, kann hier natürlich auch die Navigation hinein.

<footer> – Der Fuß der Seite

Ganz klar: Zwischen <footer> und </footer> befindet sich der Fuß der Webseite. Footer sind häufig mit Links zu Impressum und Kontakt, Anschrift oder Social-Media-Links ausgestattet.

Doch <footer> ist nicht für diesen Zweck geeignet. Er kann auch für andere Elemente verwendet werden. Stehen am Ende eines Artikels Angaben zum Autor und Veröffentlichungsdatum, können diese auch zwischen <footer> und </footer> stehen.

Müssen die neuen Elemente von HTML 5 unbedingt genutzt werden?

Die Antwort lautet nein. Es werden auch weiterhin auf herkömmliche Art erstellte Webseiten von allen Browsern korrekt dargestellt werden. Da aber die Suchmaschinen auch an der Spezifikation von HTML 5 mitgearbeitet haben, kann es nicht schaden auf die korrekte Verwendung der Elemente zu achten.

0 Kommentare zu “HTML 5 Basics: Die neuen semantischen Layout-Elemente

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich akzeptiere die Datenschutzhinweise.