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.

Hinterlasse eine Antwort