Die Einführung von HTML5 erleichtert die Arbeit mit HTML-Dokumenten ungemein. Schon alleine der Head-Bereich ist jetzt so kurz und einfach, dass man ihn sich fast merken könnte… 😉 Noch eine Errungenschaft ist, dass nicht wie früher, die gesamte Seite in Div-Containern aufgeteilt wird, sondern, es gibt jetzt spezielle Tags, die darauf hindeuten, welcher Inhalt sich darin befindet.

Neue HTML5-Elemente

Die wichtigsten neuen HTML5-Elemente zum Strukturieren der Site sehen Sie in der nachfolgenden Tabelle. Es gibt noch eine Reihe weiterer HTML5-Tags wie das audio- und video-Tag, dazu aber ein anderes Mal mehr.

header / Kopfbereich

Für den Kopfbereich der Webseite (hier stehen bspw. Logo, Titelbild, evt. Navigation) oder von einzelnen Abschnitten (z. Bsp. section-Elemente).

main / Hauptbereich

Das main-Element kleidet den Hauptinhalt der Webseite aus. Dieser Tag ist nur einmal pro Seite zulässig.

nav / Navigation

Das nav-Element ist für die Hauptnavigation(en) gedacht. Hierbei kann es durchaus mehr als eine Hauptnavigation geben, allerdings sollten einfache Linklisten nicht mit dem nav-Element ausgezeichnet werden.

footer / Fußbereich

Fußbereich der Webseite (hier stehen beispielsweise Kontaktinformationen, ….) oder von einzelnen Abschnitten (bspw. von section-Elementen).

section / Abschnitt

Einzelne Bereiche können hiermit definiert werden. Jeder Bereich sollte hierbei eine eigene Überschrift haben. Das section-Element steht immer in Zusammenhang mit anderen Abschnitten und ist vergleichbar mit Kapiteln in einem Buch. Es braucht auch nur dann verwendet werden, wenn eine Gliederung der Seite in mehrere Abschnitte notwendig bzw. sinnvoll ist.

article / Artikel

Der Hauptinhalt einer Seite, sollte in einem article-Element stehen. Im Vergleich zu dem section-Element oben, steht das article-Element für sich alleine und ist ein in sich abgeschlossener Inhalt. Anwendbar beispielsweise bei Blog- oder Zeitungsartikeln sowei Kommentare und Shop-Artikel.

aside / Neben-Element

Das aside-Element ist ein Nebenelement und vergleichbar mit Randbemerkungen. Diese Randbemerkungen müssen auch fehlen dürfen, ohne dass es dem eigentlichen Inhalt der Seite schadet. Anwendbar beispielsweise in der Sidebar und für Werbeanzeigen.

address / Kontaktinformationen

Das address-Element dient – wie der Name schon vermuten lässt – dazu, Kontaktinformationen preiszugeben.

Kopf-Bereich der HTML-Datei

früher

So oder so ähnlich sah bisher der Doctype einer HTML-Datei aus.

heute

Dieser neue Doctype ist abwärtskompatibel und funktioniert in allen Browsern. Das Gute an diesem Doctype ist außerdem, dass er unabhängig von der HTML-Version ist und sich auch in Zukunft nicht mehr ändern wird.

früher

heute

früher

heute

früher

heute

Der komplette Kopf-Bereich einer HTML-Datei kann also so kurz sein:

heute

Mithilfe dieser Wesite lässt sich ganz einfach ein HTML-Grundgerüst nach aktuellem Standard erstellen.