HTML5 Logo

Einen Beitrag zur letzten Abschlussprüfung, in der das Thema „HTML5“ lautete, gibt es bereits. Dort werden auf der zweiten Seite auch die semantisch strukturellen Tags zur HTML5-Dokumentstruktur erwähnt und erklärt. Dieser weiterführende Artikel soll einen tieferen Einblick mit Anwendungsbeispielen und möglichen Aufgabenstellungen liefern.

Die HTML-5 Dokumentstruktur

Anbei noch einmal eine Übersicht – der für die Prüfung relevanten – semantisch-strukturellen HTML5 Tags:

TagVorkommenVerwendung und Zweck
<header>ggf. mehrfachKennzeichnet einen „Kopfbereich“.Gilt zum Beispiel für den Kopf einer Seite, aber auch für den Kopfbereich eines Artikels, in dem z.B. Überschrift, aber auch Veröffentlichungsdatum, Autor, Anzahl der Kommentare etc. stehen.
<nav>ggf. mehrfachKennzeichnet ein Navigationselement. Klassischerweise für die Hauptnavigation, sollte aber auch für andere Arten der Navigation, wie z.B. nächste Seite/letzte Seite, Tag-Clouds etc. verwendet werden.
<main>einmaligDarf nur einmalig verwendet werden, um den Hauptcontent einer Seite zu kennzeichnen, also zum Beispiel die Anzeige der Artikel einer Suche, den Content-Teil der Startseite oder einen einzelnen Artikel.
<article>ggf. mehrfachKennzeichnet jeweils einen einzelnen Artikel. So können auch auf Übersichtsseiten einzelne Artikel voneinander abgegrenzt werden. Dies war mit dem inhaltsleeren <div>-Tag vorab nicht möglich.
<section>ggf. mehrfachDient dazu, um eine Seite/einen Artikel in verschiedene Segmente zu gliedern.Beispiele:

  1. Den Newsbereich auf der Startseite von den aktuellen Terminen, die jeweils mehrere Artikel umfassen.
  2. Verschiedene Segmente innerhalb eines Artikels wie zum Beispiel bei einem Rezept die Vorbereitungen, die Zubereitung, die Inhaltsstoffe/Nährwerte und die Kommentare
<aside>ggf. mehrfachZusatzinfos zum Artikel/der Seite, die keinen so hohen Stellenwert besitzen. Klassischerweise genutzt z.B. für den Seitenbalken oder die aus dem Printbereich bekannten „Marginalien“.
<footer>ggf. mehrfachEin Fußelement, wie zum Beispiel auf jeder Seite ganz unten mit Copyright, Impressumslink etc. Kann aber auch innerhalb eines Artikels verwendet werden, um zum Beispiel „Weitere Links zum Thema“ etc. zu kennzeichnen.

 

Dies sind jedoch bei Weitem nicht annähernd alle HTML5-Tags, die zur näheren Erschließung des Content z.B. durch Suchmaschinen, Screenreader usw. dienen. Es gibt weitere wie z.B. <time> (Kennzeichnung eines Datums/Termins in maschinenlesbarer Form), <figure> (Eine Abbildung ggf. mit Bildunterschrift <figcaption>) und einige mehr. Dazu gibt es weitere Tags, um multimedialen Content einzubinden. Diese haben aber – entgegen der Meinung vieler, die dies in verschiedenen Foren diskutieren – nichts mit der Dokumentstruktur zu tun! Den Nachweis dazu liefert auch der W3C in seiner Dokumentation zur HTML5-Dokumentstruktur.
Fazit: Mit den genannten Tags solltet ihr euch für die Prüfung auf sicherem Terrain bewegen und könnt euch den Kopf für andere Dinge frei machen ;)

 HTML5-Dokumentstruktur – Anwendungsbeispiele

Zur einfacheren Übersicht, wann und wo welche HTML5-Tags zur Strukturierung des Content verwendet werden können bzw. sollten, habe ich einige Screenshots bereit gestellt, die die Anwendung verdeutlichen sollen.

Anmerkung: Auch wenn ich hier die „Best-Practice„, also die vorgeschlagene Anwendungsform, aufzeige, bedeutet dies nicht gleichzeitig, dass es bei den Beispiel-Websites selbst auch so angewendet wurde! Dies hat viele Gründe und rührt z.B. daher, dass fertige Templates verwendet wurden.

Beispiel 1: HTML5- Dokumentstruktur einer einfachen Startseite ohne verschiedene Themenbereiche

HTMl5- Dokumentstruktur einer einfachen Startseite ohne unterschiedliche Themenbereiche
HTML5- Dokumentstruktur einer einfachen Startseite ohne unterschiedliche Themenbereiche

Zur Farbkodierung:

Rot: <header>-Tag

Grün: <nav>-Tag

Grün MIT HINTERGRUND: <nav>-Tag, aber ggf. nicht sinnvoll!!
Warum? Weil nur die wirklich für die Seite relevantesten Navigationselemente mittels <nav> gekennzeichnet werden sollten. Kennzeichnen wir in diesem Fall wirklich jede Hilfsnavigation (Kategorien, Tagcloud/Stichwortwolke) mittels <nav>-Tag verlieren die für die Seitennavigation wichtigsten Navigationselemente wiederum an Relevanz!

Gelb: <main>-Tag

Orange: <article>-Tag

Blau: <footer>-Tag

Violett: <aside>-Tag

Dunkelgrün: <section>-Tag

Beispiel 2: HTML5-Dokumentstruktur einer einfachen Artikelseite

HTML5-Dokumentstruktur einer einfachen Artikelseite
HTML5-Dokumentstruktur einer einfachen Artikelseite

Farbkodex wie oben.

Erwähnenswert an dieser Stelle:

Violett: <aside>-Tag – Die Autoren-Info ist als <aside> angelegt, da sie sich als Zusatzinfo/Marginalie zum Artikel verhält.

Dunkelgrün: <section>-Tag – Hilfreich-Bewertung und Kommentare sind jeweils <sections> zum Artikel, da sie Unterbereiche des Artikels sind.

Grün: <nav>-Tag – Der Seitenschalter am Fuß der Seite ist natürlich ein Kernelement der Seiten-Navigation!

 

 

One Thought to “Abschlussprüfung Mediengestalter Sommer 2015, Medienproduktion, Alle Fachrichtungen: U5: HTML5-Dokumentstruktur”

Leave a Comment

Ich akzeptiere