Semantische Elemente mit HTML 5
Semantische Elemente bei HTML 5
Vor HTML 5 hat man bestimmte Bereiche einer Webseite bzw. des Quellcodes mit<div id="..."> abgegrenzt und konnte über die id per CSS auf das Element zugreifen.
Eine grobe Struktur hätte dabei zum Beispiel wie folgt ausgesehen:
Mit HTML 5 wurden sogenannte semantische HTML Tags eingeführt, deren Namen auf den Inhalt schließen lässt. Somit sind für diese Standardelemente keine <div id="..."> Konstruktionen nötig.
Die Struktur von oben würde man daher jetzt wie folgt vorfinden:
Neben den im Beispiel verwendeten Tags gibt es noch: <main> und <section>
Aufgabe 1
- Die semantischen HTML Tags wurden nicht nur zur Verbesserung der Übersichtlichkeit eingeführt. Recherchiere weitere Nutzungsmöglichkeiten.
-
Erstelle in einem Editor deiner Wahl ein neues HTML 5 Dokument und ergänze die oben abgebildeten Tags. Achtung: Natürlich müssen die Tags auch geschlossen werden
<header></header>.
Quellen
- [1]: Aufbau einer HTML Datei vor HTML 5 - Urheber: KJ - Lizenz: inf-schule.de
- [2]: Aufbau einer HTML Datei mit HTML 5 - Urheber: KJ - Lizenz: inf-schule.de