06082 928047Anfahrt

Semantsiche HTML-Elemente

In HTML5 wurde semantische HTML-Elemente eingeführt, die eine bessere Lesbarkeit und Interpretation von Webseiten für Automaten(insbesondere Suchmaschinen und Screenreadern) ermöglichen soll.

Es handelt sich dabei die Elemente header, nav, main, article, address, aside, footer, die gleichzeit durch ARIA Landmark Roles (Attribut role) genauer spezifiziert werden können.

header

Definition des Kopfbereichs einer Seite(nicht zu verwechseln mit dem technischen Kopfbereichs, der durch <head> definiert wird) oder eines bestimmten Bereichs der Seite(z.B. Abschnitt, Artikel, siehe weiter unten).

Im Header einer Seite sind häufig das Firmen-Logo, die (Haupt-)Navigation und die Seitenüberschrift untergebracht.

nav

Markiert die wichtigsten Navigationsbereiche wie z.B. die Hauptnavigation oder die Toolbar einer Website.

Häufig ist die Navigation Teil des Header, so dass folgende Code-Struktur anzutreffen ist:

<header role="banner">    
        <!-- HTML-Code für den Header(z.B. Banner, Überschrift etc.)
     
        <nav role="navigation">
            <!-- HTML-Code für das Menü-->           
        </nav>
</header>

main

Mit dem main-Tag wird der Hauptteil einer Seite definiert. main darf auf jeder Seite nur einmal vorkommen und nicht innerhalb der anderen hier aufgeführten Strukturelemente stehen.

section

Mit section lässt sich der Inhalt einer Seite in mehrere Abschnitte unterteilen

article

Das article-Tag dient dazu, in sich geschlossene Textpassagen(z.B. ein Blog- oder News-Eintrag) zu deifinieren. Ein article ist in der Regel Teil einer section.

<section>
  <header>
   <h2> Unser Blog zum Thema TYPO3 CMS </h2>
  </header>
      <!-- 1. Artikel -->
    <article id="blogeintrag">
      <header>
        <h3>TYPO3 CMS im Vergleich zu anderen CMS</h2>
       </header>
        <p> ... Inhalte ... </p>
    </article>
    <!-- 2. Artikel -->
    <article id="blogeintrag">
      <header>
        <h3>Neues Releasedatum TYPO3 CMS 6.2.</h2>
       </header>
        <p> ... Inhalte ... </p>
    </article>
                .....usw....
</section>

aside

Mit aside werden Bereiche deifiniert, die nicht unmittelbar etwas mit dem Inhalt der Seite zu tun haben(z.B. Teasern zu anderen Themen, Werbebanner, Kontaktinformationen, usw.).

Meistens erhält dieses Tag die ARIA-Role complementary zugeordnet:

<aside role="complementary">
  <!-- Inhalt -->
</aside>

footer

Der footer hat die Aufgabe, ergänzende Informationen zu einer Seite(z.B. copyright-Angaben, Impressum, etc.) oder eines Artikels(z.B. weiterführende Links) zu definieren.

address

In diesem Tag finden sich meistens die Autorenangaben einer Seite oder eines Artikel wieder:

<address>
  <p>Blogeintrag von Max Mustermann, mm@waocn.de</p>
</address>