Berni's Blog: HTML5 Elemente im Überblick

Februar 2013
Mo	Di	Mi	Do	Fr	Sa	So
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28
Dezember

Produktion interaktiver Medien HTML5 Elemente im Überblick

bernhard.wolitz.uni-linz, 9. Februar 2013, 16:23

In diesem Artikel möchte ich auf die neuen Semantikbehafteten Elemente der HTML5 Spezifikation eingehen: header, footer, nav, section, article, aside. Im Moment gibt es noch kein 100% richtig bei der Nutzung dieser Elemente und die Spezifikationen der Whatwg oder des W3C Konsortiums lassen viel Interpretationsspielraum. Da auf den ersten Blick nicht eindeutig abgegrenzt ist wann welches Element genutzt wird, werde ich versuchen meine Gedanken in diesem Artikel zu Ordnen und den für mich ersichtlichen roten Faden, der sich meines Erachtens herauskristallisieren wird, darlegen.

HTML5 Outline

Beginnen möchte ich mit dem Outline welches von jedem Browser erstellt wird wenn dieser eine HTML Dokument ladet. Meines Erachtens liefert das Verständnis dieser Technik einen großen Beitrag zum Gesamtverständnis. Unter einem Dokumenten Outline kann man sich das Inhaltsverzeichnis einer Seite vorstellen, welche das Dokument in Kapitel und Abschnitte gliedert.

In HTML 4.01 und XHTML 1.0 stehen für die Dokumentenstrukturierung nur die Überschriften <h1> bis <h6> zur Verfügung. Die Benutzung dieser Tags ist ähnlich wie die eines Buches. Der Titel wird mit <h1> gekennzeichnet, die Chapter mit <h2> und die Unterteilungen dieser mit den Übrigen <h3> - <h6>. Die Überschriften werden somit nach ihrer Wichtigkeit gewichtet.

HTML

<h1>Ein tolles Buch<h1>
<h2>Chapter1</h2>
<h3>Chapter1: Unterkaptiel1</h3>
<h4> Chapter1: Unterkaptiel1: Teilbereich1</h4>
<h3> Chapter1: Unterkaptiel2</h3>
<h2>Chapter2</h2>

Outline

1. Ein tolles Buch

1. Chapter1

1. Chapter1: Unterkapitel1

1. Chapter1: Unterkapitel1: Teilbereich1

2. Chapter1: Unterkapitel2

2. Chapter2

In HTML5 gibt es bei die Outline-Technik von Seiten eine grundlegende Änderung, denn diese basiert nicht mehr wie oben beschrieben auf den Überschriften sondern auf den Sektion Elementen: nav, section, article und aside. (Sektion wird im Folgenden als Synonym für die gerade aufgezählten Elemente verwendet.) Dieser Umstand führt dazu, dass innerhalb jeder Sektion die Überschriftenhierarchie von neuem anfängt. Es kann also mit <h1> von neuem begonnen werden. Generell sollte jede Sektion eine Überschrift besitzen, da sie sonst z.B. als „Untitled section“ in der Outline aufscheint und eine Sektion stellt schließlich einen Themenbereich (mehr dazu später).

In der Überschriftenhierarchie nimmt eine Sektion den Platz unter dessen am nächsten stehenden Elternelement ein. Das Root oder Wurzelelement einer jeden Website ist der body und eine darin erstellte Sektion steht automatisch eine Hierarchiestufe unter diesem.

HTML

<body>
<h1>Überschrift zum Thema der gesamten Seite</h1>

      <section>
           <h1>1. Überschrift der Sektion 1</h1>
           <p>…</p>
      </section>

      <section>
            <h1>1. Überschrift der Sektion 2</h1>
            <p>…</p>
       </section>
</body>

Outline

Überschrift zum Thema der gesamten Seite
1. 1. Überschrift der Sektion
2. 1. Überschrift der Sektion

Am Ergebnis würde sich auch nichts ändern, wenn die h1 Überschrift vom body nach der 2. Sektion stehen würde. Das Ergebnis wäre dasselbe, denn das naheste Elternelement ist der body und dieser hat als erste Überschrift das h1 Element. Die Kindelemente section reihen sich darunter:

<body>
    <section>
       <h1>1. Überschrift der Sektion 1</h1>
      <p>…</p>
    </section>

    <section>
    <h1>1. Überschrift der Sektion 2</h1>
    <p>…</p>
    </section>

<h1>Überschrift zum Thema der gesamten Seite</h1>
</body>

Die Elemente header und footer erstellen keine neue Sektion und werden vom Outliner ignoriert. D.h. darin verwendete Überschriften orientieren sich am Elternelement und bilden keine eigene Überschriftenhierarchie.

Verschiedene Kombinationen können unter: http://gsnedders.html5.org/outliner/ getestet werden um ein Gefühl für die Funktionsweise des Outliners zu bekommen.

Die Semantik

Wie bereits angedeutet gibt es semantische Elemente die eine Sektion erstellen: nav, section, article und aside und jene die keine neue Sektionierung vornehmen: header und footer. Das liegt daran das header und footer dazu gedacht sind für dessen nahestes Elternelement zusätzliche Informationen bereitzustellen. Am Dokumentenanfang oder Ende gelten sie für den body und innerhalb von section, article und aside eben für diese Sektionselemente.

aside

Das Element tut genau das was von ihm erwartet, es zeichnet einen Bereich der Seite aus der nicht direkt etwas mit dem Inhalt zu tun hat z.B. Sidebars oder Textuelle Anmerkungen in einer article Sektion die nicht essentiell für dessen Verständnis sind

nav

Dieses Element soll laut Spezifikation die Hauptnavigation der Seite umfassen. Anhand der Beispiele aus der Spezifikation würde ich es so interpretieren, dass ein nav Element einerseits die Primärnavigation der ganzen Webseite und andererseits die Primärnavigation der einzelnen Seiten (z.B. eines article) definieren kann. Ich würde intuitiv das nav Element innerhalb eines header Elements nutzen, da es wie die Überschrift den Kopf einer jeden Sektion bildet.

section & article

Der Einsatz dieser beiden Elemente hat mich zu Beginn am meisten verwirrt, da sie ähnlich aber doch grundverschieden sind und eine andere semantische Bedeutung haben.

Eine section wird als Element zur thematischen Gruppierung von Inhalten einer Seite beschrieben. Vorstellen kann man sich darunter etwa Kapitel eines Buches.

Ein article wird im Gegenzug dazu als eigenständiges Element beschrieben, welches wiederverwendbar ist und ohne Zusatzinformation alle relevanten Information für den Leser enthält. Ein gutes Beispiel ist: ergibt der Text in einem RSS Feed ohne den zusätzlichen Informationsgehalt auf der Seite für den Leser Sinn?

Soweit so gut nur ist es nun möglich diese beiden Elemente miteinander zu kombinieren. Die verständlichste Anwendungsform ist eine section innerhalb eines article. Bei dem folgenden Beispiel würde der letzte Absatz hierarchisch zu dem letzten h2 Element gereiht.

<h1>Blogartikelthema</h1>
<h2>chapter1</h2>
<p>…</p>
<h2>chapter2</h2>
<p>…</p>

<p>Wo gehört dieser Absatz hin?</p>

</article>

Was aber wenn dieser Absatz das Schlusswort für den gesamten Artikel darstellen soll? Hier kommen die section Elemente ins Spiel und nehmen eine themenrelevante Gruppierung vor (Buchkapitel):

<h1>Blogartikel</h1>

<section>
<h2>chapter1</h2>
<p>…</p>
</section>

<section>
<h2>chapter2</h2>
<p>…</p>
</section>

<p>Wo gehört dieser Absatz hin?</p>

</article>

Nun ist es auch möglich article Elemente innerhalb von section Elementen zu benutzen. Das heißt wir gruppieren verschiedene articel Elemente vom selben Themengebiet mittels section und zeigen somit, dass die verschiedenen section Bereiche auf verschiedene Themen abzielen.

<h1>Artikel zum Themengebiet X</h1>

    <article>
       <h2>Blogartikel1 zum Thema X</h2>
       <p>…</p>
    </article>

    <article>
       <h2>Blogartikel2 zum Thema X </h2>
       <p>…</p>
    </article>

</section>

<h1>Artikel zum Themengebiet Y</h1>

    <article>
       <h2>Blogartikel1 zum Thema Y</h2>
       <p>…</p>
    </article>

    <article>
       <h2>Blogartikel2 zum Thema Y </h2>
       <p>…</p>
    </article>

</section>

Div

Div Elemente dürfen und sollen weiterhin verwendet werden! D.h. nicht jedes Element im Quellcode soll durch ein semantisches Element ersetzt werden. Nach meinem Verständnis ergibt sich die folgende Reihung:

div … keine semantische Bedeutung als nichtssagendes Containerelement für z.B. Style Attribute
section … thematische Gruppierung gleichartigen Inhaltes; nicht allein stehend verwendbar
article … Inhalt der unabhängig von sonstigen Zusätzen verstanden wird und wiederverwendet werden kann

Ich hoffe dieser kleine Überblick hilft manchen weiter und spart etwas Einarbeitungszeit. Für vertiefende Informationen können die nachfolgenden Quellen zu diesem Artikel verwendet werden.

Quellen:

HTML 5

elisabeth.strauch.uni-linz, 8. Februar 2013, 01:25

Hi Berhard,

vielen Dank für deine Ausführungen, die wirklich sehr hilfreich sind!

(Kurzer Hinweis: Du hast dich bei den Unterkapitel verschrieben)

Alles Liebe,

Elisabeth

bernhard.wolitz.uni-linz, 9. Februar 2013, 16:24

Hey,

freut mich zu höhren und danke für den HInweis!

lg, Bernhard

Verlinken :: Kommentieren