CSS, HTML und Javascript mit {stil}

HTML article, section, header, footer, nav

HTML5 Struktur: acticle oder section, header und nav

HTML article sind Blöcke mit Inhalten, die für sich allein stehen könnten. section fasst zusammengehörende Inhalte zusammen und bildet einen semantischen Block, der einen eigenen header, Inhalt und footer haben kann. In jedem section-Element können Überschriften von h1 bis h6 liegen, aber Sections können nicht allein für sich stehen.

Bislang haben wir Webseiten mit unzähligen div-Tags strukturiert und div-Tags haben gleichzeitig das Layout der Seite gesteuert. Für CSS und Javascript wurde den div-Tags eine Bedeutung durch class- und id-Attributen zugewiesen, so dass am Ende eine Flut von Klassen in einer Flut von div-Tags saß. Stylesheets und Javascript wurden immer undurchschaubarer.

Für den Besucher tritt die Stuktur der HTML-Seite durch das grafische Layout klar hervor, aber für Screen Reader, Sprachausgabe und die Suchmaschinen liegt nur ein Schwall von div-Tags ohne Aussage über die Struktur der Seite vor.

Struktur durch DIV-Tags<div class="header"></div><div class="menu"></div><div class="foo"></div><div class="bar"></div><div class="footer"></div><div class="foo"></div><div class="foo"></div>

article, section und nav bilden die Struktur einer Webseite ähnlich wie das Inhaltsverzeichnis eines Sachbuchs in hierarchische Kapitel ab.

Für die Semantik der HTML-Seite stehen header, main und footer zur Verfügung.

HTML5: article, section mit header und nav und aside<header><h1>Header</h1></header><nav> … </nav><article><header><h1> Das Universum </h1></header><section><header><h2> </h2> </header></section><section><header><h2> </h2> </header></section></article><aside></aside><aside></aside><footer> … </footer>

< article >

Inhalte, die unabhängig für sich allein stehen könnten – z.B. ein Post in einem Blog – können in article-Tags gepackt werden.

a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable

article sagt den Suchmaschinen, wo der tatsächliche Inhalt des Dokuments anfängt, während header, nav und footer den Rahmen für den Inhalt darstellen.

< section >

HTML5 section steht für Abschnitte des Inhalts. Sections haben i.d.R. eine Überschrift (der Validator wünscht Überschriften explizit: Section lacks heading) und können Kapitel oder die Beschreibung eines Produkts sein. Wenn ein HTML-Objekt für CSS und Javascript gebraucht wird, ist weiterhin ein div-Tag angebracht. Ein guter Anhaltspunkt, wo HTML5 section und wo ein div-Tag eingesetzt werden sollte, ist eine Zusammenfassung des Inhalts der Webseite: Wenn Inhalte in einer Liste einen eigenen Punkt haben, ist ein section-Tag die bessere Wahl als ein div-Tag. Oder noch einfacher: Wenn man, wie der Validator wünscht, eine Überschrift drüber setzen kann, dann kann ein Bereich in ein section-Tag gesetzt werden.

Anders als article ist section ein Bereich, der nicht allein stehen könnte. Der Standard hat die Grenze zwischen article und section nur hauchzart am »self-contained« ausgemacht: Das erklärt, warum wir mit diesen beiden Begriffen immer wieder ins Schlingern kommen. Theoretisch können article-Tags innerhalb von section-Tags stehen. Diese Struktur wird vom Validator ebenfalls als korrekt anerkannt.

<HTML header >

HTML5 header ist für die Einleitung des Inhalts gedacht und wird i.d.R. die typischen Kopf-Elemente wie Überschriften, Zeit und Autor enthalten. header und section gehen sozusagen Hand-in-Hand.

< nav >

Das nav-Tag ist für Links zu anderen Seiten und zu Bereichen innerhalb derselben Seite reserviert. Das nav-Element soll nur für die Haupt-Navigation der Seite benutzt werden und nicht für beiläufige Links einer Seite.

< footer >

HTML5 footer nimmt auf, was der Name schon besagt: Die Informationen im Fuß eines Artikels oder Beitrags und die Informationen im Fußbereich der Seite. Genauso wie header kann auch footer in jedem section-Objekt eingesetzt werden.

< main >

Das main-Tag stellt den Hauptinhalt der Seite oder der Anwendung dar und soll nur einmal innerhalb einer Seite oder Anwendung eingesetzt werden. Viele Webseiten benutzen einen Wrapper <div id="main">…</div> – das HTML5-Tag main ersetzt diese Konstruktion.

In diesem Sinne darf main nicht innerhalb von Tags wie section, header oder article gesetzt werden.

Verbannte HTML-Tags

Von acronym, big, tt, frameset, frame und noframes verabschieden wir uns in HTML5. Aber HTML5 hat selber auch schon Tags hervorgebracht und wieder ins Abseits befördert: bb und hgroup.

Beispiele für article und section

Die Struktur von section, header und article sieht anfangs aufgeblasen auf. Sie sind optimal für das Inhaltsverzeichnis von eBooks. Das Inhaltsverzeichnis eines eBook über Fotografie könnte z.B. wie folgt aussehen:

Fotografie von der Praxis zu den Grundlagen ........ 1
  Die Kamera 
	 Der Aufbau der Kamera ....................... 15
	 Spiegelreflexkameras ........................ 29
	 Systemkameras ohne Spiegel .................. 35
  Grundlagen 
	 Belichtungszeit und Blende .................. 67
	 PSAM Die Kreativ-Programme .................. 82
  Wie man sich gegen seine Kamera durchsetzt 
	 Belichtungskorrekturen ..................... 104
	 Manuell scharfstellen .......................127

article, aside, section, nav und h1 … h6 bilden den Anfang eines neuen Abschnitts. Die erste Überschrift in jedem Absatz ist die Überschrift einer section. So kann z.B. die Übersichtsseite eines Blogs aufgebaut sein:

<body>
   <header>
      <h1>Video in Webseiten</h1>
    </header>
   <article>
      <h2>Dateiformate für Video</h2>
      <section>
         <h3>MP4-Video</h3>
         <p> Teaser </p>
      </section>
      <section>
         <h3>OGG-Video</h3>
         <p> Teaser </p>
      </section>
   </article>
   <article>
      <h2>Video-Codecs</h2>
      <section>
         <h3>H.264</h3>
        <p> Teaser </p>
      </section>
      <section>
         <h3>Theora OGG</h3>
         <p> Teaser </p>
      </section>
   </article>
</body>

section-Tags müssen nicht innerhalb von article sitzen – genauso gut ginge es umgekehrt. Der Validator erkennt beide Aufbauten als korrekt. Ebensogut kann article in article verschachtelt werden. Wie bereits erwähnt: Der Unterschied zwischen article und section besteht nur im Grunde genommen nur aus dem »selbst-enthaltend« für article.

Auch wenn mehr als eine Überschrift h1 erlaubt sein soll: Der Validator warnt, dass viele Hilfsmittel (z.B. Screen Reader) damit noch nicht klar kommen.

var mql = window.matchMedia("screen and (min-width:720px)");
changeHeader(mql);
mql.addListener(changeHeader);

var postheader = document.querySelector('#postheader');

function changeHeader(mql) {
    if (mql.matches) {
    	document.querySelector('#postheader').appendChild(document.querySelector('template').content.cloneNode(true));
    } else {

    }
}