HTML & CSS für Einsteiger (Teil 21): Semantik fürs Web (4)

In diesem letzten Video-Training der Semantik-Element-Reihe werdet ihr weitere Strukturierungselemente kennenlernen. Tatsächlich bietet HTML5 nämlich auch Elemente für Navigationsbereiche, Marginalien und für Zusammenfassungen.
... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!
Auch hier sei zu Beginn des Tutorials wieder darauf hingewiesen, dass ihr von den vorgestellten Elementen keine Wunderdinge erwarten solltet. Optisch machen diese nämlich tatsächlich noch nicht viel her. Interessant sind sie aber natürlich vor dem Hintergrund, dass ihr damit eure Dokumente logisch und semantisch strukturieren könnt.
Ein Beispiel:
Innerhalb von
Zunächst ein Beispiel für den Einsatz von
Der Inhalt des
Interessant könnte das beispielsweise im Zusammenhang mit einem Video-Player sein. Auch hierfür ein Beispiel:
Wird die Seite aufgerufen, ist zunächst einmal nur das Playerfenster zu sehen.
Klickt ein Besucher nun allerdings auf den Ein- und Ausblenden-Link, werden die innerhalb von
Laut Spezifikation sollen die Browser, wenn kein
Interessant ist übrigens auch das
Wird dieses Attribut gesetzt, ist der Inhalt des
Innerhalb von
Zugegebenermaßen könnte man auf- und zuklappbare Bereiche natürlich auch ganz einfach per JavaScript realisieren. Ist JavaScript allerdings im Browser deaktiviert, wird die Anwendung nicht funktionieren. Von daher ist eine baldige breite Unterstützung von
Beachtet bitte, dass in der HTML5-Spezifikation nicht festgelegt ist, welche Dimension für einen über
Das folgende Beispiel zeigt die Definition eines
Für Menschen werden die Zeitangaben ins time-Element geschrieben. Um den Browsern die Chance zu geben, die Zeitinformationen ebenfalls auslesen zu können, wird das
An dieser Stelle noch einmal der Hinweis, dass das in den aktuellen Browsern zunächst einmal keine optischen Auswirkungen hat, sondern ausschließlich dazu gedacht ist, Zeitangaben maschinenlesbar zu machen.
Ein Beispiel:
Wie die Browser die Hervorhebung umsetzen, ist dabei nicht festgelegt.
Google Chrome und Firefox setzen allerdings beide auf einen gelben Hintergrund.
Auch hierzu wieder ein Beispiel:
Sobald die Schaltfläche angeklickt wird, ist der Dialog zu sehen. Damit das Ganze funktioniert, wird im vorherigen Beispiel auf eine Kombination aus HTML5, CSS und JavaScript gesetzt.
Navigationsbereiche
Über dasnav
-Element lassen sich Navigationsleisten oder andere Bereiche für zusätzliche Elemente semantisch auszeichnen. Gedacht ist dieses Element also hauptsächlich, um Hyperlinks auf andere Seiten oder auf ergänzende Informationen zu markieren.Ein Beispiel:
<nav> <a href="index.html">Startseite</a> <a href="html5.html">HTML5 lernen</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
Innerhalb von
nav
könnt ihr beliebige Elemente verwenden. Ihr könnt die Navigation also nach wie vor über Listen definieren. Andere Elemente lassen sich aber ebenfalls problemlos innerhalb von nav
einsetzen. nav
darf zudem innerhalb eines Dokuments auch mehrfach vorkommen.Details angeben
Ein weiteres interessantes Element istdetails
. Darüber kann man – und das lässt bereits der Elementname erahnen – zusätzliche Informationen über einen Inhalt angeben. Beachtet, dass das details
-Element erst in Verbindung mit dem summary
-Element richtig interessant wird. Mehr zu diesem Element dann im Anschluss.details
:<article> <details> <summary>Verweise zum Artikel...</summary> <ul> <li><a href="verweise1.html">Link 1</a></li> <li><a href="verweise2.html">Link 2</a></li> <li><a href="verweise3.html">Link 3</a></li> </ul> </details> <details> <summary>Quellenangaben zum Artikel ...</summary> <ul> <li><a href="quelle1.html">Link 4</a></li> <li><a href="quelle2.html">Link 5</a></li> <li><a href="quelle3.html"">Link 6</a></li> </ul> </details> </article>
Der Inhalt des
details
-Elements wird so lange vor dem Besucher versteckt, bis der das innerhalb von details enthaltene summary
-Element anklickt.<video id="film" width="320" height="180" autoplay> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video> <details open> <summary>Videoplayer-Steuerung ein-/ausblenden</summary> <p> <button id="start" onClick="start()">Start/Pause</button> <button id="stumm" onClick="stumm()">Stummschalten</button> <button id="lauter" onClick="lauter()">Lauter</button> <button id="leiser" onClick="leiser()">Leiser</button> </p> </details>
Wird die Seite aufgerufen, ist zunächst einmal nur das Playerfenster zu sehen.
summary
definierten Inhalte angezeigt.summary
-Element gefunden wird, einen Standardinhalt anzeigen.Interessant ist übrigens auch das
open
-Attribut für details.<details open> … </details>
Wird dieses Attribut gesetzt, ist der Inhalt des
summary
-Elements beim Laden der Seite direkt zu sehen.Zusammenfassungen
Jetzt also noch einmal ein etwas detaillierter Blick auf dassummary
-Element.<article> <details> <summary>Verweise zum Artikel...</summary> <ul> <li><a href="verweise1.html">Link 1</a></li> <li><a href="verweise2.html">Link 2</a></li> <li><a href="verweise3.html">Link 3</a></li> </ul> </details> <details> <summary>Quellenangaben zum Artikel ...</summary> <ul> <li><a href="quelle1.html">Link 4</a></li> <li><a href="quelle2.html">Link 5</a></li> <li><a href="quelle3.html"">Link 6</a></li> </ul> </details> </article>
Innerhalb von
summary
wird also in Verbindung mit details
der noch nicht geöffnete Inhalt definiert. Dank summary
lassen sich also zusätzliche Informationen einbinden, die erst bei Bedarf eingeblendet werden.Zugegebenermaßen könnte man auf- und zuklappbare Bereiche natürlich auch ganz einfach per JavaScript realisieren. Ist JavaScript allerdings im Browser deaktiviert, wird die Anwendung nicht funktionieren. Von daher ist eine baldige breite Unterstützung von
details
und summary
wünschenswert.Randbereiche und Marginalien
Zusätzliche Informationen, Marginalien, Querverweise usw. lassen sich in HTML5 mit demaside
-Element auszeichnen. Der dadurch ausgezeichnete Inhalt befindet sich zwar im Kontext mit dem Gesamtdokument, ist ihm aber nicht direkt zugehörig.Beachtet bitte, dass in der HTML5-Spezifikation nicht festgelegt ist, welche Dimension für einen über
aside
ausgezeichneten Bereich gelten soll. Somit könnte der aside-Inhalt also beispielsweise als Marginalie, aber auch als Sidebar angezeigt werden.Das folgende Beispiel zeigt die Definition eines
aside
-Bereichs.<body> <header> <h1>PSD-Tutorials.de</h1> </header> <article> <h2>Web-Apps erstellen (Teil 10): jQuery mobile (2)</h2> <p>In diesem Tutorial wird die erste echte jQM-Seite erstellt. Voraussetzung dafür ist das HTML-Grundgerüst, das ihr bereits kennengelernt habt.</p> <aside> <h3>Weiterführendes</h3> <ul> <li><a href="#/fn1">Weiterführende Informationen gibt es…</a></li> </ul> </aside> </article> <aside> <nav> <h2>Navigation</h2> <ul> <li><a href="#">Startseite</a></li> <li><a href="# ">Kontakt</a></li> </ul> </nav> </aside> </body>
Zeitangaben hinzufügen
Zeitangaben können über das neuetime
-Element speziell ausgezeichnet werden. Die Besonderheit dieses Elements besteht darin, dass die Zeitangaben von Mensch und Maschine lesbar sind.Für Menschen werden die Zeitangaben ins time-Element geschrieben. Um den Browsern die Chance zu geben, die Zeitinformationen ebenfalls auslesen zu können, wird das
datetime
-Attribut des time
-Elements verwendet.<p>Wir treffen uns am <time datetime="2014-04-15 19:00">15. April um 19 Uhr</time>. </p>
An dieser Stelle noch einmal der Hinweis, dass das in den aktuellen Browsern zunächst einmal keine optischen Auswirkungen hat, sondern ausschließlich dazu gedacht ist, Zeitangaben maschinenlesbar zu machen.
Texte hervorheben
Mit demmark
-Element gibt es die Möglichkeit, Wörter oder ganze Textpassagen optisch hervorzuheben. Dabei wird in der Spezifikation von HTML5 ausdrücklich darauf hingewiesen, dass das Element nur in Verbindung mit textuellen Inhalten verwendet werden soll. Zudem muss es in einer bestimmten Beziehung zum Kontext stehen.Ein Beispiel:
<p>In diesem Tutorial wird die erste echte jQM-Seite erstellt. Voraussetzung dafür ist das <mark>HTML-Grundgerüst</mark>, das ihr bereits kennengelernt habt.</p>
Wie die Browser die Hervorhebung umsetzen, ist dabei nicht festgelegt.
Google Chrome und Firefox setzen allerdings beide auf einen gelben Hintergrund.
Dialoge auszeichnen
Auch an die gesonderte Auszeichnung von Dialogen wurde in HTML5 gedacht. Hierfür gibt es dasdialog
-Element. Momentan wird das dialog
-Element allerdings ausschließlich von Safari und Google Canary, also der Entwicklerversion des Browsers, unterstützt.<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;"> <p>Das ist der Inhalt der Box.</p> <button id="hide">Schließen</button> </dialog> <button id="show">Zeige den Inhalt</button> </div> <script type="text/JavaScript"> (function() { var dialog = document.getElementById('dialog'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })(); </script>
Sobald die Schaltfläche angeklickt wird, ist der Dialog zu sehen. Damit das Ganze funktioniert, wird im vorherigen Beispiel auf eine Kombination aus HTML5, CSS und JavaScript gesetzt.
Weitere Teile
- Tutorial: HTML & CSS für Einsteiger (Teil 01): Ein erster Blick auf HTML, CSS & Co.
- Tutorial: HTML & CSS für Einsteiger (Teil 02): Die erste HTML-Seite
- Tutorial: HTML & CSS für Einsteiger (Teil 03): Elemente, Tags und Attribute
- Tutorial: HTML & CSS für Einsteiger (Teil 04): Texte strukturieren
- Tutorial: HTML & CSS für Einsteiger (Teil 05): Texte aufhübschen
- Tutorial: HTML & CSS für Einsteiger (Teil 06): Listen
- Tutorial: HTML & CSS für Einsteiger (Teil 07): Tabellen (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 08): Tabellen (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 09): Grafiken fürs Web (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 10): Grafiken fürs Web (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 11): Hyperlinks definieren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 12): Hyperlinks definieren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 13): Formulare (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 14): Formulare (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 15): Formulare (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 16): Formulare (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 17): Formulare (5)
- Tutorial: HTML & CSS für Einsteiger (Teil 18): Semantik fürs Web (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 19): Semantik fürs Web (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 20): Semantik fürs Web (3)
- HTML & CSS für Einsteiger (Teil 21): Semantik fürs Web (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 23): Multimedia für die Webseite (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 24): iFrames
- Tutorial: HTML & CSS für Einsteiger (Teil 25): Das ist CSS
- Tutorial: HTML & CSS für Einsteiger (Teil 26): So klappt der Zugriff mit den Selektoren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 27): So klappt der Zugriff mit den Selektoren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 28): So klappt der Zugriff mit den Selektoren (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 29): Schöner Text durch CSS (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 30): Schöner Text durch CSS (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 31): Farben und Hintergründe
- Tutorial: HTML & CSS für Einsteiger (Teil 32): Außenabstände und Außenränder
- Tutorial: HTML & CSS für Einsteiger (Teil 33): Den Textfluss kontrollieren
- Tutorial: HTML & CSS für Einsteiger (Teil 34): Rahmen
- Tutorial: HTML & CSS für Einsteiger (Teil 35): Listen und Counter
- Tutorial: HTML & CSS für Einsteiger (Teil 36): Das Boxmodell
- Tutorial: HTML & CSS für Einsteiger (Teil 37): Elemente positionieren
- Tutorial: HTML & CSS für Einsteiger (Teil 38): Alles im Fluss mit float
- Tutorial: HTML & CSS für Einsteiger (Teil 39): Die verschiedenen Layoutvarianten
- Tutorial: HTML & CSS für Einsteiger (Teil 40): Zwei- und dreispaltige Layouts
- Tutorial: HTML & CSS für Einsteiger (Teil 41): Das Layout entwickeln
- Tutorial: HTML & CSS für Einsteiger (Teil 42): Das Layout weiter anpassen
- Tutorial: HTML & CSS für Einsteiger (Teil 43): Das Grundgerüst erstellen
- Tutorial: HTML & CSS für Einsteiger (Teil 44): Den Inhaltsbereich gestalten
- Tutorial: HTML & CSS für Einsteiger (Teil 45): Schicke Schriften für die Seite
- Tutorial: HTML & CSS für Einsteiger (Teil 46): Das Kontaktformular (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 47): Das Kontaktformular (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 48): Die Webseite geht online

Passend zum Inhalt empfehlen wir:
Modernes CSS mit Sass – Praxis-Tutorial
Vielen Dank für das Video!
LG Zaina
Danke für den weiteren Teil der Serie :)
Vielen Dank. Wieder sehr interessant und informativ.
Herzlichen Dank für das Tutorial.
Immer wieder sind gute Tipps dabei – vielen Dank!!!
Vielen Dank,
langsam aber sicher verändert sich auch die HTML-Welt.
LG
Wieder ein toller Teil. Vielen Dank
Vielen Dank für das informative Tutorial!
vielen Dank!
Vielen Dank für den 21. Teil, gutes Tutorial.
Jetzt bin ich wieder ein entscheidendes Stück beim Bau meiner Webseite weiter.
Wieder sehr interessant. Vielen Dank.
Herzlichen Dank für den weiteren Teil.
Vielen Dank für das interessante Video dieser tollen Reihe und die Datei.
Vielen Dank für das interessante Video.
Vielen Dank für das Tutorial.