HTML5-Tags
Achtet auf die Namen der Tags: Diese erklären praktisch immer, für was die Tags verwendet werden sollen …
zum Strukturieren einer Seite sind folgende HTML5-Tags besonders wichtig:
HTML
<!--
Kopf-Teil einer Website oder eines Artikels;
dort befindet sich z.B. das Logo, die wichtigste Überschrift, der Slogan der Firma …
Achtung: Nicht mit <head> verwechseln!
-->
<header>
<img src="logo.svg">
<h1>Firmenname</h1>
</header>
<!--
Der Hauptteil einer Seite; nur einmal pro HTML-Dokument verwenden
-->
<main>
<section>
<article></article>
<article></article>
</section>
<section>
<article></article>
<article></article>
</section>
</main>
<!--
Dort die Haupt-Navigationselemente der Website einfügen,
typischerweise eine Navigationsleiste
-->
<nav>
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
<!--
Ein in sich geschlossener Bereich einer Seite,
vergleichbar mit den verschiedenen Ressorts in einer Zeitung (Sportteil, Wirtschaftsteil, Kulturteil …)
-->
<section>
<article></article>
<article></article>
</section>
<!--
In sich geschlossene Einheit, eben wie ein Artikel in einer Zeitung!
Enthält typischerweise Überschrift, Texte und Bilder.
-->
<article>
<h1>Überschrift</h1>
<img src="portait.jpg">
<p>Inhaltstext …</p>
</article>
<!-- Randbemerkungen, Marginalien … -->
<aside>
<h2>Randbemerkungen</h2>
<p>Text der Randbemerkungen</p>
</aside>
<!--
Fusszeile einer Seite oder eines Artikels,
enthält oft Copyright-Daten, weiterführende Links usw.
-->
<footer>
<p>© 2014, Max Mustermann</p>
</footer>
<!--
Darin soll ein Bild sowie dessen Erklärung eingefügt werden;
-->
<figure>
<img src="portait.jpg">
<figcaption>
Erklärung zum Bild
</figcaption>
</figure>CSS
alle oben aufgeführten Tags lassen sich selbstverständlich via CSS stylen …