html5 Tags

Tags für Gliederung von Inhalten

Mit diesen Tags kann man dem Dokument eine struktur geben. Strukturen können dann z.B. von Suchmaschinen oder Screenreadern besser ausgelesen werden. Inbesondere kann die Sitemap direkt aus dem nav Element ausgelesen werden.

  • header - Headerbereich.
  • footer - Footerbereich.
  • nav - Navigation.
  • section - Generisches Tag für einen Abschnitt.

Der Code

<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">Über uns</a></li>
      ...more...
    </ul>
  </nav>
</header>
<footer>
</footer>

Tags für Gliederung von Inhalten

Artikel bestehen aus mehreren strukurellen Elementen.

  • article - Ein ausgewiesener Artikel.
  • aside - Z.B. für eine Sidebar.
  • figure - Z.B. für eine Grafik mit Bildunterschrift
  • hgroup - Gruppiert h1-h6 Elemente.
  • time - Zeichnet ein Datum oder Zeit aus.
  • mark - Hebt Inhalte hervor.

Der Code

<article>
  <header>
    <hgroup>
      <h1>Title</h1>
      <h2>Untertitel</h2>
    </hgroup>
    <p>(<time datetime="2009-09-06">6 September, 2009</time>)</p>
  </header>
  <p>
    <mark>HTML5</mark> ist wirklich toll!
    <figure><img src="xkdc_html5.jpg" /></figure>
    <aside>Weitere Ressourcen</aside>
  </p>
</article>

Rich Media Tags

  • audio - Tag zum einbetten von Audio Inhalten.
  • video - Tag zum einbetten von Video Inhalten.
  • canvas - Tag zum einbetten einer grafischen Zeichenfläche.

Darf ich?

Kann man diese Tags schon einsetzen? Jein. Der Internet Explorer rendert das DOM falsch, d.h. mit den CSS Selektoren kommt man nicht weit. Die Jungs von HTML5Doctor haben allerdings einen Hack gefunden, um das DOM an den entsprechenden Stellen zu korrigieren. Dieser Hack basiert allerdings auf JavaScript und ist deshalb nur bedingt zu empfehlen.

Ressourcen

Referenzen