Einsatz
HTML5-Elemente wollen alle artgerecht eingesetzt werden. Grundsätzliches:
1. <MAIN>
Hier befinden sich die Haupt-Inhalts-Blöcke. Das <main>-Element ist meist Kind des <body>-Elements. Es lässt sich auch genausogut in containern wie <article> und <aside> verwenden.
2. <ARTICLE>
Wird für unabhängige, selbsttragende Inhalte verwendet. Ein Artikel sollte alleine für sich selbst veröffentlicht werden können. Anstatt nun alle <divs> auszutauschen, sollte man sich lieber fragen: "Könnte man dies unabhängig vom Rest der Webseite lesen?" Wenn es einen <header> hat, soll es besser ein <article> werden.
3. <SECTION>
Wird zur Gruppierung für verwandte Inhalts-Blöcke verwendet. Die semantische Schwester des <div>-Elements. Anstatt nun alle <divs> auszutauschen, lieber fragen: "Sind die Blöcke verwandt?" Wenn es keinen <header> hat, soll es besser eine <section> werden.
4. <ASIDE>
Wird für lose verwandte Inhalts-Blöcke verwendet. Nur weil Inhalte an unterschiedlichen Stellen auftreten, rechtfertigt noch nicht dessen Einsatz. Frage: "Kann der Inhalt im <aside>-Element weggelassen werden, ohne die Aussage des Hauptinhalts zu mindern?" Blockzitate sind ein schönes Beispiel.
5. <HEADER>
<header>-Elemente bilden nicht nur die Einleitungs-Elemente der Seite, sondern auch die der <article>-Elemente. Es wäre schön, wenn jedes <section>-Element eines hätte. Also sind mehrere <header>-Elemente pro Seite völlig in Ordnung.
6. <NAV>
Vorgesehen für Haupt-Navigations-Elemente, nicht für eine lose Kohorte Links. Seitenweite Navigation gehört in ein <nav>-Element.
7. <FOOTER>
Hört sich zwar an wie eine Positionsbeschreibung, ist aber keine. <footer>-Elemente enthalten Informationen über ihr enthaltendes Element: Wer hat es geschrieben, copyright, weiterführende Links usf. <footer> kommen nicht nur als Kinder des <body>-Elements, sondern auch des <section>-Elements vor.
HTML5-Skelett
Beispielhaft sei hier ein html5-Skelett aufgezeichnet. Die einfachen alten Tags dienen jeweils als einzelne Beispiele, dass man sie an dieser Stelle einsetzen könnte.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Template für ein besseres html5</title>
</head>
<body>
<nav><ul><li></li></ul></nav>
<header><h1></h1></header>
<main>
<header><h1></h1></header>
<article>
<header>
<h1></h1>
</header>
<p></p>
</article>
<article>
<header>
<h1></h1>
</header>
<p></p>
</article>
</main>
<aside>
<section><p></p></section>
<section><p></p></section>
<section><p></p></section>
</aside>
<footer></footer>
</body>
</html>