Neue semantische HTML5-Elemente als DIVs verwenden

Mit HTML5 kommen einige Neuerungen auf Internetsurfer und auch Webentwickler zu. Die neuen sogenannten semantischen Tags, wie header, article, footer, aside und section sollen es ermöglichen, Inhaltsbereichen eine exaktere Bedeutungsentsprechung zuzuordnen.

Viele Webmaster sehen in den Tags die Chance, ihre DIV-Suppe auszudünnen, indem sie die umstrittenen Layout-Elemente durch HTML5-Tags ersetzen und diese mit CSS formatieren. Leider funktioniert das nicht immer so, wie gewünscht.

Die Problematik am Verwenden der semantischen Tags als Layout-Elemente liegt in der fehlenden Unterstützung älterer Browser und den nicht standardisierten Display-Eigenschaften. So ignoriert Internet Explorer ≤ 8 o.g. Elemente vollkommen und in verschiedenen modernen Browsern werden sie teils als inline-, teils als block-Elemente oder gar als Mischungen dargestellt.

Es gibt einige Workarounds mit JavaScript und CSS, welche entweder das HTML-Dokument überschreiben, um konform für den entsprechenden Browser zu werden, oder die display-Attribute neu setzen. Aber ehrlich, das ist nicht das Wahre, oder?

Mein Workaround ist der, semantische Tags um Blockelemente zu setzen. Zwar verursacht das einen etwas längeren Code, aber so kann jeder Browser etwas mit dem Dokument anfangen.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML5-Dokument</title>
    </head>
    <body>
        <header>
            <div id="header">
                <h1>Semantische HTML5-Elemente</h1>
                <p>Slogan der Seite</p>
            </div>
        </header>
        <nav>
            <ul id="navigation">
                <li>Startseite</li>
                <li>Zweite Seite</li>
                <li>Dritte Seite</li>
            </ul>
        </nav>
        <article>
            <div id="article">
                <h2>Probleme bei der Verwendung semantischer HTML5-Tags</h2>
                <p>Lorem Ipsum</p>
                <p>Ad Onum</p>
            </div>
        </article>
        <footer>
            <p id="footer">Impressum | Kontakt | AGB | …</p>
        </footer>
    </body>
</html>

Im CSS-Stylesheet werden nicht die HTML5-Elemente, sondern die darin befindlichen Blöcke angesprochen, damit auch alte Browser die Formatierungen übernehmen können.

Dieser Artikel wurde vertaggt mit , , , , .
Kategorien: CSS, Grundwissen, HTML

Hat Ihnen dieser Artikel gefallen? - Dann abonnieren Sie vlblog um über neue Themen rund ums Web informiert zu werden.

2 Kommentare zu “Neue semantische HTML5-Elemente als DIVs verwenden”

  1. Jon sagt:

    Mich würde interessieren, aus welchem Grund man dann überhaupt die neuen semantischen tags setzen soll, denn sie haben so ja ausschliesslich ein bisschen Text strukturierende Wirkung.
    Und wenn selbst die css-Datei die neuen semantischen Tags nicht referenziert, kann man sie ja auch gleich weglassen.
    Sinn würde es doch höchstens machen, wenn man für die alten Browser sozusagen ein css-Fallback schreibt, was natürlich noch mehr Arbeit bedeuten würde.
    Die andere Alternative ist, dass man alte Browser ignoriert und den Benutzer darauf hinweist, dass sein Browser veraltet ist.

    • vitus37 sagt:

      [...], denn sie haben so ja ausschliesslich ein bisschen Text strukturierende Wirkung.

      Genau! Doch diese Wirkung ist wichtig. Mittlerweile kann auf Webseiten nicht mehr nur zwischen Texten und Bildern unterschieden werden, sondern zwischen Textteilen, Textformen, Bildern, Videos, Kommentaren, Zeiten und diversen anderen Inhalten.

      Das mag zwar keine direkte optische Auswirkungen auf den Besucher haben, aber einem Internetteilnehmer hilft das ganz ungemein: den Suchmaschinen. Sie haben es so wesentlich leichter relevantes von irrelevantem zu unterscheiden.

      Als ich diesen Blog von HTML4 auf HTML5 umstellte und hier und da semantische Tags einfügte, konnte ich feststellen, dass Besucher, die über Suchmaschinen zu meiner Site gelangen, durch wesentlich passendere Sucheingaben zu mir fanden. Seltener hat sich jemand zu mir „verirrt“.

Hinterlasse eine Antwort