📖Strukturelemente & semantische Tags

Mehrere Tags können zu zusammengehörigen Blöcken zusammengefasst werden. Dazu gibt es sog. Strukturelemente. Es gibt dafür

• das generische Strukturelement <div>, welches nichts über den Inhalt aussagt, und

• die semantischen Strukturelemente <header>, <footer>, <nav>, <main>, <section>, <article> etc., welche für bestimmte Inhalte vorgesehen sind.

Strukturelement <div>

Das Strukturelement <div> (Document Division Element) ist ein generischer Container für Inhalte, der keine eigene Bedeutung hat, ausser dass er Elemente zusammenfasst, z.B. um sie im Layout zu positionieren oder zu stylen (mit Hilfe von CSS).

Beispiel: Wir möchten folgende Absätze mit einer Hintergrundfarbe hinterlegen, ohne einen weissen Absand dazwischen zu haben.

<p>Ich bin ein erster Absatz.</p>
<p>Ich bin ein zweiter Absatz.</p>

p {
    background-color: indianred;
}

Dies entspricht jedoch nicht unserem gewünschten Ergebnis:

Absätze mit Hintergrund

Lösung: Wenn umklammern die beiden Absätze mit einem <div>-Strukturelement und stylen das <div>-Element:

<div class="red">
    <p>Ich bin ein erster Absatz.</p>
    <p>Ich bin ein zweiter Absatz.</p>
</div>

.red {
    background-color: indianred;
}

Div mit Hintergrund

Aufgabe: Teste dieses <div>-Element mit Codepen.io

Semantische Strukturelemente

Semtantische Elemente sind gleichbedeutend wie <div>-Strukturelemente, definieren aber klar die Bedeutung des Inhalts, welches sie umfassen.

Semantische Elemente haben folgende Vorteile:

• Bessere Lesbarkeit des HTML- und CSS-Codes

• Suchmaschinen können die Struktur der Webseite besser verstehen (SEO)

• Bessere Barrierefreiheit für Menschen unabhängig von Einschränkungen

Darum gilt: Generische <div>-Elemente sollten nur genutzt werden, wenn kein semantisches Element geeignet ist.

Folgende Elemente werden häufig genutzt:

Semantisches Element	Beschreibung	Möglicher Inhalt
<header>	Das Element beinhaltet Kopfelemente der Website oder einer Sektion.	Navigation, Logo, Suchfeld
<nav>	Das Element beinhaltet eine Navigation.	Navigation
<main>	Das Element beinhaltet den Hauptinhalt der Website.	Hauptinhalt
<section>	Das Element unterteilt ein Dokument in mehrere allgemeine Sektionen.	Produkte, News
<article>	Eine Sektion kann mehrere Artikel umfassen.	Ein Produkt, ein News-Beitrag
<aside>	Das Element beinhaltet Informationen, welche mit dem Hauptinhalt der Website in Verbindung stehen.	Sidebar
<footer>	Das Element beinhaltet Fusselemente der Website oder einer Sektion.	Copyright, nützliche Links

Weitere Informationen auf https://www.w3schools.com/html/html5_semantic_elements.asp