Tips zum richtigen Umgang mit html5-Container-Elementen

HTML5-Elemente wollen alle artgerecht eingesetzt werden. Grundsätzliches:

  1. <main>

    Hier befinden sich die Haupt-Inhalts-Blöcke. Das <main>-Element ist meist Kind des <body>-Elements.

  2. <section>

    Wird zur Gruppierung für verwandte Inhalts-Blöcke verwendet. Die semantische Schwester des <div>-Elements. Anstatt nun alle <divs> auszutauschen, lieber fragen: “Sind die Blöcke verwandt?” Wenn es keinen <header> hat, soll es besser eine <section> werden.

  3. <aside>

    Wird für lose verwandte Inhalts-Blöcke verwendet. Nur weil Inhalte an unterschiedlichen Stellen auftreten, rechtfertigt noch nicht dessen Einsatz. Frage: “Kann der Inhalt im <aside>-Element weggelassen werden, ohne die Aussage des Hauptinhalts zu mindern?” Blockzitate sind ein schönes Beispiel.

  4. <header>

    <header>-Elemente bilden nicht nur die Einleitungs-Elemente der Seite, sondern auch die der <article>-Elemente. Es wäre schön, wenn jedes <section>-Element eines hätte. Also sind mehrere <header>-Elemente pro Seite völlig in Ordnung.

  5. <nav>

    Vorgesehen für Haupt-Navigations-Elemente, nicht für eine lose Kohorte Links. Seitenweite Navigation gehört in ein <nav>-Element.

  6. <footer>

    Hört sich zwar an wie eine Positionsbeschreibung, ist aber keine. <footer>-Elemente enthalten Informationen über ihr enthaltendes Element: Wer hat es geschrieben, copyright, weiterführende Links usf. <footer> kommen nicht nur als Kinder des <body>-Elements, sondern auch des <section>-Elements vor.

  7. <article>

    Wird für unabhängige, selbsttragende Inhalte verwendet. Ein Artikel sollte alleine für sich selbst veröffentlicht werden können. Anstatt nun alle <divs> auszutauschen, solle man sich lieber fragen: “Könnte man dies unabhängig vom Rest der Webseite lesen?” Wenn es einen <header> hat, soll es besser ein <article> werden.

HTML5 Skelett

Beispielhaft sei hier ein html5-Skelett aufgezeichnet. Die einfachen alten Tags dienen jeweils als einzelne Beispiele, dass man sie an dieser Stelle einsetzen könnte.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Template für ein besseres html5</title>
  </head>
  <body>
    <nav><ul><li></li></ul></nav>
    <header><h1></h1></header>
    <main>
      <header><h1></h1></header>
      <article>
        <header>
          <h1></h1>
        </header>
        <p></p>
      </article>
      <article>
        <header>
          <h1></h1>
        </header>
        <p></p>
      </article>
    </main>
    <aside>
      <section><p></p></section>
      <section><p></p></section>
      <section><p></p></section>
    </aside>
    <footer></footer>
  </body>
</html>