HTML5: Tags zur Abschnittsunterteilung

Inhaltsverzeichnis

Encapsulator Kompatibilität für diesen Artikel
MerkmalUnterstützt?MerkmalUnterstützt?
<section> ja <article> ja
<aside> ja Kopfzeile ja
<hgroup> ja Fußzeile ja
Abbildung ja <figcaption> ja
<nav> ja

Mit Tags zur Abschnittsunterteilung können Sie den Content-Fluss auf einer Webseite organisieren und die Content-Elemente ganz einfach an anderer Stelle wiederverwenden. Diese Tags bieten aussagekräftigere Optionen als die generischen <div>-Tags und stellen einen guten Ersatz für diese dar. Sie eignen sich sehr für die Syndizierung und das dynamische Zusammenstellen von Content aus verschiedenen Quellen. Außerdem helfen sie beim Gliedern von Texten, wie Büchern oder Blogs, die aus mehreren Seiten und Themen bestehen.

Konkreter bedeutet die Verwendung von Tags zur Abschnittsgliederung, dass der Abschnitt (Section) als Hauptknoten in der Dokumentstruktur festgelegt wird, mit dem alle nachfolgenden Elemente verknüpft sind. Eine Erweiterung dieser Struktur würde etwa Folgendes ergeben:

Abschnitt | +--h1 (Überschrift 1, dem Abschnitt untergeordnet) | | | +--Textknoten "Hallo WebWorld" | +--p (dem Abschnitt untergeordnet, gleichrangig mit h1) | +--Textknoten "Dies ist Ihr Text" |

<section>, <article> und <aside>

Das Haupt-Tag ist <section>, und wie der Name schon sagt, handelt es sich dabei um eine thematische Gruppierung von Content, in der Regel mit einer Überschrift. Das <section>-Tag ist generisch und kann an die Gliederung Ihres Content angepasst werden. So können Einleitung, Entwicklung, Fazit und weiterführende Informationen jeweils einen eigenen Abschnitt bilden.

Wird der Content jedoch auf andere Seiten syndiziert, sollte stattdessen das Tag <article> verwendet werden. <article> erstellt einen Abschnitt oder ein autarkes Element, das unabhängig verteilt oder wiederverwendet werden kann. Außerdem hilft es Ihnen auch, das Layout Ihrer Dokumentation beizubehalten, indem es unterschiedliche Überschriften voneinander trennt. Wenn Sie also die Tags <h1> bis <h6> in unterschiedlichen Artikeln definieren, gibt es keine Konflikte zwischen den verschiedenen Artikeln.

Das Tag <aside> definiert Content, der den Content rund um das <aside>-Element berührt, jedoch als von diesem Content getrennt angesehen werden könnte. Ein Beispiel dafür wären ein Seitenknoten zu einem bestimmten Land in einem Artikel über Europa oder Links zu Archiven eines Blogs. Das Tag <aside> kann auch zum Zitieren von Textstellen und für Seitenleisten verwendet werden, um so Werbung oder anderen Content einzubinden, der nicht direkt zum Haupt-Content gehört.

Weitere neue Tags zur Abschnittsunterteilung

Innerhalb eines <section>-, <article>- oder <aside>-Bereichs können die folgenden Tags verwendet werden:

<header>: Steht für eine Gruppe von einleitenden oder Navigationshilfen zur Gliederung des Dokuments. Diese Tags enthalten normalerweise die Abschnittsüberschriften, können aber auch verwendet werden, um den Inhalt eines Abschnitts, ein Suchformular oder relevante Logos zu gliedern.

<hgroup>: Die Überschrift eines Abschnitts. Das Element dient zum Gruppieren eines Satzes von h1–h6-Elementen, wenn die Überschrift mehrere Ebenen, wie Unterüberschriften, alternative Titel oder Taglines, hat.

<figure> und <figcaption>: <figure> ist ein Element, das Grafiken innerhalb des Content darstellt und im Allgemeinen zum Kommentieren von Illustrationen, Diagrammen, Fotos, Code-Listings usw. verwendet wird. Die Abbildungsunterschrift wird durch das optionale Element <figcaption> angegeben.

<nav>: Dieses Tag wird zur Angabe eines Blocks von Navigationslinks für einen Abschnitt (section) verwendet.

<footer>: Mit diesem Tag werden dem jeweils nächsten Vorfahren, der den Content in Abschnitte unterteilt (<article>, <aside>, <nav>, <section>) in der Regel Informationen zum Abschnitt, wie Links, Copyright-Daten, Angaben zum Autor usw, zur Verfügung gestellt.

HTML5 Section demo

Title goes here

And subtitle...

Home | Blog | About | Contact |

Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu diam magna...

Section

...angam maid ue essidnepsuS .tile gnicsipida rutetcesnoc ,tema tis rolod muspi meroL

Archives

  • October 2011
  • September 2011
  • August 2011
AppUpSM Developer Program -->
<header>
    <h1>Title goes here</h1>
    <h2>And subtitle...</h2>
    </header>

    <nav><a href="/en-us/home/">Home</a> |
      <a href="/en-us/blog/">Blog</a> |
      <a href="/en-us/about/">About</a> |
      <a href="/en-us/contact/">Contact</a> |
    </nav>

  <article>
    <h1>Article</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu diam magna...</p>
    <section>
       <h1>Section</h1>
       <p>...angam maid ue essidnepsuS .tile gnicsipida rutetcesnoc ,tema tis rolod muspi meroL</p>
    </section>
  </article>

  <aside>
    <h1>Archives</h1>
    <ul>
      <li>October 2011</li>
      <li>September 2011</li>
      <li>August 2011</li>
    </ul>
  </aside>

  <footer>AppUp<sup>SM</sup> Developer Program</footer>

Bereits vorhandene Tags zur Abschnittsunterteilung

Auch schon vor HTML5 gab es eine Reihe von Tags für die Unterteilung von Content. Die folgenden werden von der neuen Spezifikation weiterhin unterstützt:

<body>: Gibt den Haupt-Content des Dokuments an. Jede HTML-konforme Seite hat immer nur ein <body>-Element.

<address>: In früheren HTML-Versionen hat dieses Tag die Kontaktinformationen des Verfassers oder des Eigentümers der Seite angegeben. In HTML5 kann das <address>-Tag in einen <article>-Bereich eingefügt werden und so die Kontaktinformationen des Verfassers/Eigentümers dieses Artikels angeben.

Weitere Ressourcen

Für ausführlichere Informationen und Beispiele zu HTML5-Tags für die Abschnittsunterteilung empfehle ich die folgenden Quellen:

  1. "Dive Into HTML5" – die Online-Version des hervorragenden Buches "HTML5: Up and Running"

  2. HTML5-Referenz, "Sections Tags"

  3. Weitere Demos und Beispiele zu HTML5

Einzelheiten zur Compiler-Optimierung finden Sie in unserem Optimierungshinweis.