Struktur & Semantik für Dokumente - HTML5 - page 30

3. Quick Links
2. Tauziehen zwischen W3C und WHATWG geht ...
3. Navigation

Mit den kursiv geschriebenen Einträgen Link Block und Navigation begegnen
uns genau jene zwei Headings wieder, die wir über display: none im Layout
versteckt hatten. Hätten wir sie ganz weggelassen, wäre an ihrer Stelle zwei-
mal der Text Untitled Section erschienen. So aber vervollständigen sie die
Struktur und tragen damit zur besseren Lesbarkeit der Outline bei.

Zur Wahl der Heading-Ränge h1 bis h6 muss Folgendes festgehalten werden:
Prinzipiell kann jeder sectioning content mit h1 beginnen, er muss es aber nicht.
In unserem Fall spiegeln die Ränge die jeweilige Hierarchie in der Outline wi-
der: h1 gilt für die Blogüberschrift, h2 für den Artikeltitel, den Link-Block und
die footer -Navigation sowie h3 für die restlichen Überschriften. Alles mit h1
auszuweisen hätte die gleiche Outline als Resultat, nur das Layout würde et-
was darunter leiden und Handarbeit im CSS-File erfordern.

Bei der Verwendung von hgroup ist zu beachten, dass die Outline immer nur das
höchste Ranking der hgroup berücksichtigt. Aus diesem Grund erscheint auch
nicht der Untertitel Tipps, Tricks & Tratsch für Webentwickler von heute .

Auch wenn derzeit noch kein Browser den Outline-Algorithmus in irgendeiner
Form direkt verwendet, heißt das nicht, dass er in Zukunft keine größere Rolle
spielen könnte. Automatisch generierte Navigationsleisten bieten sich eben-
so an wie kurze, prägnante Inhaltsangaben oder Verbesserungen für Crawler
beim Extrahieren wesentlicher Inhalte für Suchmaschinen. Bis dahin gilt: Es
schadet nie, sich ausführlich Gedanken über die Struktur seines Dokuments
zu machen. Und wenn diese so leicht zu überprüfen ist - warum sollte man es
dann nicht auch tun?

2.6 Abbildungen mit »figure« und »figcaption«

Die Elemente figure und figcaption zählen zwar nicht zu den Strukturelemen-
ten, sind aber dennoch eine willkommene Erweiterung der Möglichkeiten, um
mehr Struktur beim Einbau von eigenständigen Bildern, Grafiken, Diagram-
men oder Codelistings zu erzielen. Jedes figure -Element darf dabei nur ein fig-
caption -Element beinhalten. Ob dieses vor oder nach der jeweiligen Abbildung
steht, bleibt dem Autor überlassen. Ein kurzes Beispiel mit Markup und seiner
Umsetzung im Browser könnte so aussehen: