Webentwicklung

Die neuen Tags in HTML 5

Sebastian Müller 18.01.2010 (8) Kommentare

Über HTML 5 wird zur Zeit viel gesprochen. Die nächste HTML Version bringt viele gute Neuerungen mit sich, die HTML noch lesbarer und semantischer machen werden. Ich habe bereits begonnen einige langfristig geplante Projekte damit umzusetzen. Ich möchte heute für alle, die noch nie mit HTML 5 gearbeitet haben, einen kleinen Einstieg in die wichtigsten neuen Tags geben und ein paar Vorteile der neuen Version nennen.

Vorteile von HTML 5

Der Doctype

In XHTML und HTML 4 gibt es unzählige Doctypes, die man fast garnicht behalten kann weil Sie so lang sind. Ich habe mir immer ein Template fertig gemacht. Mit HTML 5 wird dies Wirwarr abgeschaft.

1
<!doctype html>

Der Vorteil ist ganz deutlich. Kürzer kann ein Doctype nicht sein :) Und er wird von allen Browsern verstanden. Selbst die alten Browser wie z.B der Internet Explorer 6, der leider immer noch sehr häufig verwendet wird, unterstützen diesen Doctype. Es funktioniert bei allen Browsern, da dem Browser lediglich mittgeteilt wird, dass es ein HTML Dokument ist.

Höhere Lesbarkeit des Quelltextes

Durch die neuen Tags werden einem Zusammenhänge unter den einzelnen Elementen schneller klar. Darauf möchte ich gleich weiter eingehen wenn ich die einzelnen Tags genauer erkläre.

Einige neue Tags von HTML 5

header

Der header Tag soll, wie der Name schon sagt, den header genauer Abgrenzen. Die mehrmalige Verwendung auf einer Seite ist auch erlaubt, da das Tag auch bei Artikelüberschriften oder auch bei einzelnen Sektionen verwendet werden kann. Jeder header Tag enthält üblicherweise eine h1-h6 Überschrift.

section

Dieses Tag soll einzelnen Sektionen der Seite besser abgrenzen. Zum Beispiel Boxen in der Sidebar oder andere Inhalte, die zum Hauptartikel der Seite nicht gehören. Auch mehrer sections in sections sind möglich.

article

Dieses Tag soll verwendet werden, wenn man einen Artikel auf der Seite ausgibt. Meistens handelt es sich dabei um den Text, auf dem es hauptsächlich auf der jeweiligen Seite geht. Mehrmaliges Verwenden des Tags ist jedoch auch nicht verboten.

nav

Das nav Tag soll Navigationen erhalten. Beispiele wären: Hauptnavigation, Pagination oder sonstige Unternavigationen.

aside

Dieses Tag soll die Sidebar von dem Hauptinhalt abgrenzen. Möglich wäre der Einsatz bei allen Wordpress Themes für die Sidebar.

footer

Das Footer Tag soll weiterführende Informationen zum Hauptinhalt enthalten (Fußnoten, etc.) Aber auch Copyright Informationen und Hinweise zum Autor gehören in dieses Tag.

Es gibt noch viel mehr neue Elemente. Doch ich möchte hier erstmal nur die meiner Meinung wichtigsten Elemente nennen.

HTML 5 Elemente mit CSS Stylen

Wie immer gibt es Probleme mit dem Internet Explorer wenn es um HTML (5) geht. Der IE kennt die neuen Elemente nicht. Aus diesem Grund kann man standardmäßig keine HTML 5 Elemente mit CSS für den IE stylen. Schauen wir uns das mal in einem Beispiel an:

Wir wollen mit Hilfe von CSS den Header mit schwarze Hintergrundfarbe belegen. Die beinhaltende h1 Überschrift soll eine weiße Schriftfarbe erhalten:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="de">
<head>
    <title>Ein HTML 5 Dokument</title>
        <style type="text/css">
              header {
                 background: #000;
              }

              header h1 {
                 color: #fff;
              }
        </style>
</head>
<body>
    <header>
        <h1>The Flower Blog</h1>
    </header>
</body>
</html>

Das Ergebnis dieses Tests ist eine weiße Seite. Warum? Die neuen HTML 5 Elemente werden in Zukunft alle als Block Elemente gerendert werden. Doch alle aktuellen Browser kennen dieses Tags aber noch nicht nicht und haben noch keine Standard CSS Werte für diese Tags zugewiesen.

Daher werden Sie auch nicht als Block Elemente gerendert. Dazu müssen wir unserem Test noch ein wenig CSS hinzufügen…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="de">
<head>
    <title>Ein HTML 5 Dokument</title>
        <style type="text/css">
              header,aside,footer,section,nav,article {
                 display: block;
              }      

              header {
                 background: #000;
              }

              header h1 {
                 color: #fff;
              }
        </style>
</head>
<body>
    <header>
        <h1>The Flower Blog</h1>
    </header>
</body>
</html>

Unser Ergbenis in Firefox – Weiß auf Schwarz, genauso wie wir es haben wollen:

Unser Ergebnis in IE 7 – Keine der definierten Styles wurden angewendet:

Die Lösung des Problems

Um HTML 5 Elemente für den IE zu stylen zu können, muss man die Elemente, die man benutzen möchte, mit Javascript in das Dokument schreiben lassen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html lang="de">
<head>
    <title>Ein HTML 5 Dokument</title>
        <style type="text/css">
              header,aside,footer,section,nav,article {
                 display: block;
              }      

              header {
                 background: #000;
              }

              header h1 {
                 color: #fff;
              }
        </style>
        <script>document.createElement("header");</script>
</head>
<body>
    <header>
        <h1>The Flower Blog</h1>
    </header>
</body>
</html>

Dies liefert uns folgendes Ergebnis:

Und auch für dieses Problem gibt es bereits ein kleines Projekt namens html5shiv, das genauso arbeitet wie in meinem Beispiel, jedoch für alle bisher bekannten HTML 5 Elemente.

Abschließend sei zu sagen..

HTML 5 ist schön und gut, aber leider noch nicht einsetzbar, da die Version zum ersten noch nicht abgeschlossen ist und und zum zweiten für einen User mit ausgeschaltetem Javascript und dem Internet Explorer unlesbar werden kann, da die Styles den neuen Elementen nicht zugewiesen werden.

Verwandte Beiträge
Artikel weiterempfehlen

8 Kommentare zu Die neuen Tags in HTML 5

Für kommerzielle Projekte ist HTML5 aktuell nicht geeignet, da man den IE unterstützen muss. Ansonsten lässt es sich auch jetzt eigentlich schon verwenden.

Schade nur, dass niemand so wirklich auf XHTML5 eingeht, denn dort gibt es mehr Änderungen gegenüber XHTML1.0/1.1 – nur leider kann der IE auch hier immernoch nicht Dokumente mit dem Content-Type application/xhtml+xml versteht.
Ich hoffe ja, der IE9 wird es richten …

Verfasst von Dennis Becker
20. Januar 2010 - 10:04 Uhr

Sehr umfangreiches Artikel.

Nun müssen die Webbrowser nachziehen…

Verfasst von IT-Scene.eu - Sergey F.
22. Januar 2010 - 11:09 Uhr

Also das Ganze ließt sich ja doch recht interessant mit den neuen Tags. Bin mal gespannt ab wann die ersten Webbrowser so weit verbreitet sind, dass es sich lohnt in HTML5 zu coden.

Aktuell finde ich vor allem das extra styling in CSS umständlich, weil ich das ja auch durch Div Boxen erreichen könnte und dafür keine extra Tags bräuchte.

die Frage ist also ob z.B. der header-Tag noch andere Vorteile hat.

Verfasst von Sensei
24. Februar 2010 - 23:29 Uhr