Categories: Software

HTML5: So nutzt man die verschiedenen Sektionselemente richtig

Die neue HTML5-Spezifikation enthält eine neue Basisvorlage, mehrere überarbeitete Elemente sowie zusätzlich Sektions- und Strukturelemente, die man zur Optimierung von Kodierungsverfahren zur Auszeichnung einsetzen kann.

Einige Elemente fallen zugleich unter Sektions- und Strukturbeschreibungen, darunter die Tags <article>, <aside> und <section>, sowie Beschreibungen für die korrekte Verwendung der Überschriftengruppe <hgroup> und der Überschriften <h1 – h6> .

Sektionselemente wurden zu der Spezifikation hinzugefügt, um Content im Web semantisch darzustellen. Damit will die Spezifikation gegen die ungezügelte Verwendung von div– und class-Elementen vorgehen, die in den letzten Jahren bei den Kodierungsverfahren zur Auszeichnung auftrat. Webautoren wird dringend empfohlen, das <div>-Element wirklich nur im Notfall zu benutzen. Erst wenn kein anderes Element geeignet ist und alle Sektionselementoptionen erschöpft sind, darf <div> verwendet werden. Die Nutzung des <div>-Elements anstelle besser geeigneter Sektionselemente verursacht Zugangsprobleme für die Leser und erhöht den Wartungsaufwand für die Autoren. Für die semantische Bedeutung kann das Einfügen einer ID erforderlich und ratsam sein: beispielsweise <article id=“blog“>.

<article>

Dieses Element fällt unter die Kategorien Flow Content und Sectioning Content der Spezifikation. Die Spezifikation <article> legt fest, dass das article-Element eine eigenständige Komposition in bestimmten Dokumenten, Seiten, Anwendungen oder Websites darstellen kann, die sich unabhängig wiederverwenden lässt oder zur Distribution verfügbar ist, zum Beispiel bei der Syndikation. Das article-Element umfasst gewöhnlich das Format eines Blogposts, eines Zeitungs- oder Zeitschriftenartikels, eines Kommentars oder eines Widgets oder Gadgets oder jeder anderen Form einer unabhängigen Content-Einheit. Verschachtelte article-Elemente müssen generell auf das äußere Element bezogen sein, beispielsweise Kommentare. Das folgende Beispiel zeigt einen Blogpost unter Verwendung des <article>-Elements:

 <article>
  <header>
   <h1>Bon Vivant Adventures</h1>
  </header>
  <p>Want to order water with your dinner in Paris? Be like the French, and
be sure you use the proper inflection when you ask for <i>carafe d'eau</i>.</p>
  <footer>
  <a href="?comments=1">Show comments...</a>
  </footer>
 </article>

<aside>

Diese Nutzung des Elements wurde neu bewertet, nachdem seine ursprüngliche Spezifikation es als Medium für sekundären Content in Bezug auf die Website als Ganzes eingestuft hatte, beispielsweise die allgemein bekannte Seitenleiste. Nun gilt die Nutzung eines <aside>-Elements für sekundären Content als akzeptabel, wenn keine Verschachtelung innerhalb eines article-Elements vorliegt.

Die neue Definition der Nutzung eines <aside>-Elements bedeutet, dass bei einer Verschachtelung innerhalb eines <article>-Elements der Content einen speziellen Bezug auf den Content innerhalb des article-Elements aufweisen muss. Wenn das <aside>-Element außerhalb eines <article>-Elements genutzt wird, sollte der Content einen Bezug zur Website als Ganzes aufweisen, beispielsweise Navigation, Blogroll und relevanter Content für die Seite. Das Beispiel unten zeigt die Nutzung des <aside>-Elements innerhalb eines Blogposts und der Seite:

  <body>
  <header>
   <h1>The Blog</h1>
  </header>
 <article>
  <h2>The Next Blog Post</h2>
    <p>This blog post is contained within the article element.</p>
    <aside>
     <h3>Footnotes</h3>
      <ul>
       <li><a href="#/fn1">Footnote#1</a> This aside pertains to the contents of this article</li>
      </ul>
     </aside>
    </article>
    <aside>
     <nav>
      <h2>Navigation</h2>
      <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#/blog">Blog</a></li>
     </ul>
     </nav>
   </aside>
  </body>

<section>

Dieses Element stellt einen Bereich innerhalb der Webdokumentseite oder -anwendung dar, mit einer themenbezogenen Content-Anordnung. Beispiele hierfür wären Kapitel eines Buches, mehrere in Register unterteilte Seiten innerhalb eines in Register unterteilten Dialogfelds oder nummerierte Abschnitte einer wissenschaftlichen Arbeit. Weitere Beispiele für die Nutzung des <section>-Elements wären innerhalb eines Webseitendokuments, das in Abschnitte für Einleitungen, News-Einträge, Blogposts, empfohlene Inhalte und Kontaktinformationen unterteilt ist. Die HTML5-Spezifikation merkt zum <section>-Element an, dass Webautoren die Verwendung des <article>-Elements anstelle des <section>-Elements empfohlen wird, wenn der Inhalt des Elements für eine Syndication geeignet wäre. Als Faustregel gilt, dass das <section>-Element nur dann geeignet ist, wenn der Content ausdrücklich in der Übersicht des Dokuments aufgeführt wird. Unten sind verschiedene Beispiele für die Nutzung des <section>-Elements dargestellt:

Beispiel 1: Im folgenden Beispiel ist ein Artikel (Teil einer umfangreicheren Webdokumentseite) über Tomaten zu sehen, der verschiedene Unterabschnitte enthält:

 <article>
  <hgroup>
   <h1>Tomatoes</h1>
   <h2>Tasty, delicious, versatile produce!</h2>
  </hgroup>
  <p>The tomato is one of the most popularly grown home garden plants.</p>
  <section>
   <h1>Globe</h1>
   <p>This larger variety of tomato can take up to 120 days to mature, and grow up to 5" in diameter.</p>
  </section>
  <section>
   <h1>Cherry</h1>
   <p>These tiny tomatoes are perfect for salads and snacking</p>
  </section>
  <section>
   <h1>Plum</h1>
   <p>Perfect for making sauces and salsas, the Roma variety also has great flavor.</p>
  </section>
 </article>

Beispiel 2: Hier handelt es sich um die Tagesordnung einer Konferenz, die in zwei Abschnitte unterteilt ist – die gemeinsame Eröffnungssitzung und dann die Gruppensitzungen:

<h1>Conference - Day 1</h1>
 <Section>
  <h1>Opening Plenary</h1>
   <p>Welcome!</p>
   <p>Keynote Speaker Introduction</p>
   <p>Keynote Address</p>
   <p>Presentation of Annual Achievement Award</p>
   <p>State of the Department Address and Welcoming by Regional Director</p>
 </Section>
 <Section>
  <h1>Breakout Sessions</h1>
   <ul>
    <li>Securing the Infrastructure</li>
    <li>Web 2.0 Wiki and Blog's</li>
    <li>Portal Community Workgroups</li>
    <li>Internet Web Template 5.0</li>
    <li>Managing ROT</li>
    <li>Writing for the Web</li>
   </ul>
 </Section>

<hgroup>

Dieses Element stellt den Titel eines Abschnitts innerhalb eines Webseitendokuments dar. Das <hgroup>-Element wird zur Gruppierung eines beliebigen Satzes von <h1>- bis <h6>- Elementen verwendet, wenn der Titel mehrere Ebenen aufweist, wie dies bei Untertiteln, alternativen Titeln oder Kurzbeschreibungen der Fall ist. Die <h1>- bis <h6>-Sektionen können zwar Titel jeder Ebene enthalten, doch wird Webautoren dringend empfohlen, Elemente der passenden Ebene in Hinblick auf die Verschachtelungebene der Sektion zu verwenden.

Für Dokumentzusammenfassungen, Übersichten und ähnlichen Content ist der Text der <hgroup>-Elemente als der Text des <h1>- bis <h6>- Elements der höchsten Ebene definiert, abgeleitet vom <hgroup>-Element, sofern solche Elemente vorhanden sind, wobei das erste solcher Elemente zu verwenden ist, wenn auf der jeweiligen Ebene mehrere Elemente vorhanden sind. Wenn keine solchen Elemente vorhanden sind, besteht der Text des hgroup-Elements aus dem leeren String.

Hier einige Beispiele für gültige Überschriften unter Verwendung konformen Codes. In jedem Fall ist der hervorgehobene Überschriftentext der Text, der als Überschrift in einer Anwendung verwendet würde, die Überschriftendaten extrahiert und Unterüberschriften ignoriert.

<hgroup>
  <h1>Lost in Shangri-La:</h1>
  <h2>A True Story of Survival, Adventure, and the Most Incredible Rescue Mission of    World War II</h2>
</hgroup>
<hgroup>
  <h1>Blood, Bones & Butter:</h1>
  <h2>The Inadvertent Education of a Reluctant Chef</h2>
</hgroup>

Grund für die Verwendung von <hgroup> in den oben stehenden Beispielen ist das Verbergen des <h2>-Elements gegenüber dem Übersichtsalgorithmus, wenn der Browser die Kodierung des Webdokuments parst.

ZDNet.de Redaktion