Struktur und Semantik für HTML-Dokumente im HTML5


Neue semantische Elemente in HTML5


HTML5 dreht sich nicht nur darum, bestehendes Markup zu verkürzen (obwohl es in dieser Beziehung einiges leistet). Es definiert außerdem einige neue semantische Elemente.


Das sind die Elemente, die die HTML5-Spezifikation definiert:


Die semantischen Elemente sind eine der bedeutsamen Erneuerungen in HTML5. In HTML5 sind neue semantische Elemente für die Strukturierung, Gruppierung und der Markierung des Textinhalts erschienen. Jetzt betrachten wir ausführlich semantische Elemente und ihre Werte.


<section>


Das section-Element repräsentiert einen allgemeinen Abschnitt in einem Dokument oder einer Anwendung. Ein Abschnitt ist in diesem Kontext eine thematische Gruppierung von Inhalten, die üblicherweise unter einer Überschrift stehen. Beispiele für Abschnitte wären Kapitel, die verschiedenen Tabs in einem Dialog mit Tabs oder die nummerierten Abschnitte einer wissenschaftlichen Arbeit. Die Homepage einer Website könnte mehrere Abschnitte für eine Einführung, die eigentlichen Nachrichten sowie die Kontaktdaten enthalten.


<nav>


Das nav-Element repräsentiert einen Abschnitt einer Seite, der auf andere Seiten oder Teile in der Seite verlinkt: ein Abschnitt mit Navigationslinks. Nicht alle Linkgruppen auf einer Seite müssen in einem nav-Element stehen – nur die Abschnitte, die aus wichtigen Navigationsblöcken bestehen, sind für das nav-Element gedacht. Die häufig anzutreffenden kurzen Linklisten in den Fußleisten von Webseiten, die auf verschiedene Seiten innerhalb der Site verweisen, wie Geschäftsbedingungen, Homepage oder Copyright, zählen beispielsweise nicht dazu. Das footer-Element allein, ohne eingebettetes nav-Element, reicht in solchen Fällen aus.


<article>


Das article-Element repräsentiert eine abgeschlossene Einheit in einem Dokument, einer Anwendung oder einer Site, die unabhängig verbreitet oder wiederverwendet werden kann, z.B. in RSS-Feeds. Es könnte beispielsweise ein Forenbeitrag, ein Zeitschriften- oder Zeitungsartikel, ein Blog-Eintrag, ein Benutzerkommentar, ein interaktives Widget oder Gadget oder ein Element mit unabhängigem Inhalt enthalten.


<aside>


Das aside-Element repräsentiert einen Abschnitt einer Seite, der Inhalte enthält, die sich zwar auf den das aside-Element umgebenden eigentlichen Inhalt der Seite beziehen, aber als von ihm unabhängig betrachtet werden können. In Druckwerken werden derartige Abschnitte häufig als Seitenleisten dargestellt. Das Element kann für typografische Effekte wie herausgehobene Zitate oder Seitenleisten, für Werbung, für Gruppen von nav-Elementen und andere Inhalte verwendet werden, die als vom eigentlichen Inhalt der Seite getrennt betrachtet werden können.


<hgroup>


Das hgroup-Element repräsentiert die Überschrift eines Abschnitts. Das Element wird genutzt, um einen Satz von h1–h6-Elementen zu gruppieren, wenn die Überschrift mehrere Ebenen wie Untertitel, alternative Titel oder Schlagzeigen enthält.


<header>


Das header-Element repräsentiert eine Gruppe von Einführungselementen oder Navigationshilfen. Ein header-Element soll üblicherweise die Überschrift eines Abschnitts (ein h1–h6-Element oder ein hgroup-Element) enthalten, aber erforderlich ist das nicht. Das header-Element kann auch verwendet werden, um das Inhaltsverzeichnis eines Abschnitts, ein Suchformular oder eventuelle Logos einzuschließen.


<footer>


Das footer-Element repräsentiert die Fußleiste für das unmittelbar vorausgehende abschnittsartige Element oder abschnittsartige Wurzelelement. Eine Fußleiste enthält üblicherweise Informationen zu einem Abschnitt, beispielsweise wer ihn geschrieben hat, verweist auf verwandte Dokumente, bietet Copyright-Informationen und Ähnliches. Fußleisten müssen nicht notwendigerweise am Ende eines Abschnitts erscheinen, tun das aber meist. Wenn das footer-Element vollständige Abschnitte enthält, repräsentieren diese Anhänge, Indizes, lange Kolophone, umfangreiche Lizenzbedingungen und andere derartige Inhalte.


<time>


Das time-Element repräsentiert eine Zeit auf einer 24-Stunden-Uhr oder ein genaues Datum auf dem proleptischen gregorianischen Kalender, optional mit einer Zeit und einer Zeitzonenverschiebung.


<mark>


Das mark-Element repräsentiert einen Textverlauf in einem Dokument, der zu Verweiszwecken markiert oder vorgehoben ist.

Ich weiß, Sie hungern danach, gleich mit der Verwendung dieser neuen Elemente loszulegen. Sonst würden Sie dieses Kapitel sicher nicht lesen. Aber erst müssen wir einen kleinen Umweg nehmen.


Kontakt

Email: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!
Tel : 038305 / 529 799
Erstellt mit HTML5 und CSS3 - © 2024  HTML Lernen
  Zitate bei QuotientQuotables