html5area


HTML5 Aufbau

Im folgenden möchte ich den Grundaufbau einer html5 Seite darstellen, neue Elemente einbringen und diese erklären. Der Grundaufbau ähnelt einer XHTML Seite wobei die frühere globale "div" - Deklaration für Seitenaufbauelemente unterstrukturiert wird durch neue HTML5 tags, die das Verständnis und somit auch die Logik eindeutig verbessern.

Der Doctype wurde vereinfacht und läßt sich somit auch leicht merken. Das gute ist obendrein, dass es abwärtskompatibel ist und von modernen Browsern auch verstanden wird.

<!DOCTYPE html>

Am html tag hat sich wenig verändert nur dass hier die Länderkennung angefügt werden kann.

<html lang=de>

Der Meta charset ist im Headbereich, der sich nicht geändert hat und ausser den Metas Platz für Scripte und Links zu Stylesheets wichtig vorallem für z.B. deutsche Seiten mit "Umlauten" um diese richtig darzustellen

<head>
<meta charset=UTF-8>
</head>

Am body hat sich nichts geändert und dieser dient zur Anzeige der eigentlichen Seite, des sichtbaren Bereichs

<body>
...
</body>

Der Header ist ein neues Element und kann nicht nur als genereller Seitenheader Verwendung finden sondern z.B. auch in einem Artikel als Header eingesetzt werden.

<header>
...
</header>

Die hgroup ist ein neues Element, welches den bekannten "h" tag (Überschriften) gruppieren läßt. Sinnvoll wäre z.B. Seitentitel und Untertitel wie im folgenden Code angedeutet zu gruppieren.

<hgroup>
<h1>Seitentitel</h1>
<h2>Untertitel</h2>
</hgroup>

Der nav tag ist ein neues Element für Navigationen, die nicht nur im Header - Bereich eingesetzt werden können. Es empfiehlt sich die bewerte ul, li Strukturierung zu übernehmen und diese dann via CSS zu formatieren und/oder per Javascript dynamisch zu gestalten.

<nav>
...
</nav>

Der article tag ist neu und findet Verwendung um z.B. im Mainbereich der Seite einzelne Artikel anzuzeigen, oder sie auch via Formatierung zu gruppieren.

<article>
...
</article>

Der section tag kann Verwendung finden um einzelne Artikel unterzugruppieren/aufzuteilen.

<section>
...
</section>

Der aside tag, wie der Name schon ausdrückt sollte Verwendung finden um unabhängig zum Content seitlich Inhalt anzeigen zu lassen, z.B. Navigationen, Links usw.

<aside>
...
</aside>

Der footer tag ist neu und bildet den eigentlichen Footer im Seitenaufbau. Er kann aber auch z.B. inerhalb von Artikeln als Footer Verwendung finden, z.B. Anzeige des Datums des jeweiligen Artikels.

<footer>
...
</footer>

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Dies wären im Groben die wichtigsten Elemente zum Aufbau eines HTML5 Dokuments. Natürlich fehlem hier noch sämtliche Formatierungen/Plazierungen und sonstige HTML5- Elemente die zusätzlich möglich sind, worauf ich auf der nächsten Seite zu sprechen komme.

Ein Dokument mit Aufbau wie oben beschrieben, könnte also im Moment so aussehen

HTML5 ist eine textbasierte Auszeichnungssprache zur Strukturierung und semantischen Auszeichnung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. Sie soll die Nachfolge von HTML4 antreten.