HTML5 ist der aktuelle Webstandard, zusammen mit CSS3 und JavaScript. Mit HTML5 ist es unter anderem möglich, Audio und Video ohne ein Plug-in abzuspielen. Flash wird dafür nicht mehr benötigt. In diesem Artikel möchten wir Ihnen die wichtigsten Tags in HTML5 vorstellen.
article
Ein article-Element wird – wie der Name es verrät – zur Auszeichnung eines Artikels genutzt. Dies kann zum Beispiel ein Blogartikel sein. Dieses Elementtag kann wiederum verschiedene andere Tags beinhalten.
aside
Dieses Elementtag wird genutzt, um eine Seitenleiste zu definieren. Dabei ist es irrelevant, ob die Seitenleiste rechts oder links platziert wird. Früher wurde hier ein normales div-Tag genutzt, welches die ID „aside“ bekam.
audio
Das audio-Element dient dazu, Soundelemente zu definieren. War früher dafür noch ein Plug-in notwendig, so können heute alle modernen Browser Sound abspielen. Für Videos gibt es das video-Tag.
figure
Dieses Elementtag wird für verschiedene Medieninhalte genutzt, beispielsweise Anmerkungen, Codebeispiele, Bilder, Fotos und Videos. Dabei enthält es oft das img-Tag, welches die Bildinhalte selbst enthält. Als zweites Kindelement enthält das Elementtag in der Regel auch ein figcaption-Element.
figcaption
Das figcaption-Element dient als Bildunterschrift für den Inhalt eines figure-Elementes. Es ist dabei nicht mit dem alt-Attribut des img-Tags zu verwechseln. Das figcaption-Element darf auch Links (a-Tags) und andere Inline-Elemente enthalten. Ein figcaption-Element sollte nur einmal je figure-Element genutzt werden.
footer
Dieses Elementtag dient dazu, eine „Fußzeile“ auf der Seite oder einem anderen Element wie section oder article zu beschreiben.
header
Dieses Elementtag dient dazu, ähnlich wie footer eine „Kopfzeile“ auf der Seite oder einem anderen Element wie section oder article zu beschreiben. Wenn es die Kopfzeile einer Website beschreibt, enthält das header-Element oft die Hauptnavigation.
main
Dieses Elementtag dient dazu, den Hauptinhaltsbereich einer Webseite zu definieren. Es enthält in der Regel weder den Kopf-, den Fußbereich einer Webseite noch die Seitenleiste.
nav
Ein nav-Eelement dient als Container für Links, die eine Navigation bilden. Typischerweise enthält ein nav-Element eine ungeordnete Liste mit den Navigationslinks. Ein nav-Element wird nicht genutzt, um Links innerhalb eines Textes zu beschreiben.
section
Dieses Elementtag dient dazu, den Inhalt in verschiedene Sektionen zu teilen. So kann dieses Tag zum Beispiel in einer Seitenleiste für die verschiedenen Elemente darin genutzt werden. In einer Seitenleiste bilden zum Beispiel die Suche, Kontaktinformationen und ein Werbebanner jeweils eine Sektion (drei insgesamt).
video
Das video-Element wird genutzt, um Videos auf einer Webseite anzuzeigen. Dabei muss kein Plug-in installiert sein. Die modernen Browser können Videos ohne Plug-ins anzeigen und abspielen. Dabei ist aber zu beachten, dass es grob zwei konkurrierende Codecs gibt. Während Safari und der Internet Explorer (und Edge) auf den H264-Codec setzen, bevorzugen Opera und Firefox WebM bzw. Theora. Um alle Browser zu unterstützen, müssen also mindestens zwei Videocodecs genutzt werden. Dies ist dank des source-Tags innerhalb eines video-Tags möglich.
Mögliche Struktur
Wie die grundlegende Struktur einer Webseite mit den genannten Elementtags (innerhalb eines body-Elementes) aussehen könnte, sehen Sie nun:
<header> <nav>Eine Liste mit Links</nav> </header> <main> <article> <video> <source src="webm" type="video/webm"> <source src="h264" type="video/mp4"> <p>Fallback: Ein Trainingsvideo zu HTML5 würden Sie sehen, wenn Sie einen modernen Browser nutzen würden.</p> </video> </article> <article> <audio>Ein Sound zu HTML5</audio> </article> <article> <figure> <img src="?" alt="Unser Bild" /> <figcaption>Eine Bildunterschrift zum Bild. Mehr finden Sie unter <a href="#">XYZ</a></ficaption> </figure> </article> </main> <aside> <section>Suche</section> <section>Kontaktinformationen</section> <section>Werbebanner</section> </aside> <footer>Der Fußbereich mit dem aktuellen Datum. Hier kann auch eine zweite Navigation sein.</footer>
Wenn Sie HTML und CSS erlernen möchten, können Sie ein Seminar bei allskills Training buchen. Wir bieten Grundlagen– sowie Vertiefungskurse zu HTML5 an.