Die neuen semantischen Layout Elemente - PageSpeedPlus/Web-Development GitHub Wiki
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
oder
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.
- 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.
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.
<header>
<div class="block1">
<a href="index.html">
<img src="img/logo.gif" alt="Logo">
</a>
</div>
<div class="block2">
<ul>
<li>Featuretext</li>
<li>Featuretext</li>
<li>Festuretext</li>
</ul>
</div>
</header>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.
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.
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Seite A</a></li>
<li><a href="#">Seite A</a></li>
<li><a href="#">Seite A</a>
<ul>
<li><a href="#">Unterseite 1</a></li>
<li><a href="#">Unterseite 2</a></li>
<li><a href="#">Unterseite 3</a></li>
</ul>
</li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>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.
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.
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.
<main>
<h1>Willkommen bei XYZ</h1>
<p>
Bla bla Rhabarber Bla Blub
</p>
<section>
<h2>Saftpressen</h2>
Bla bla Bla Blub
</section>
<section>
<h2>Rasierer</h2>
Bla bla Bla Blub
</section>
</main>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>-Taggesetzt werden.
<main>
<article>
<h1>Zum Liebesleben tibetanischer Bergziegen</h1>
<p>
Die klassische tibetanische Bergziege hat nicht nur vier Beine, sondern auch ein erfülltes Liebesleben. Trotz steilster Hänge und unwirtlichen Gegenden vermehren sich die Biester wie die Fliegen.<br />
Bla bla Bla Blub<br />
Bla bla Bla Blub<br />
Bla bla Bla Blub
</p>
</article>
</main><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.
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.
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.