rundfunk operating

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.

4. <nav>

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

5. <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.

6. <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>