i

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:
Aufbau einer HTML Datei vor HTML 5[1]
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:
Aufbau einer HTML Datei mit HTML 5[2]
Neben den im Beispiel verwendeten Tags gibt es noch: <main> und <section>

Aufgabe 1

  1. Die semantischen HTML Tags wurden nicht nur zur Verbesserung der Übersichtlichkeit eingeführt. Recherchiere weitere Nutzungsmöglichkeiten.
  2. 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

Suche

v
1.1.2.9.1
dev.inf-schule.de/information/informationsdarstellunginternet/html-css/exkurs-css-grid/html5
dev.inf-schule.de/1.1.2.9.1
dev.inf-schule.de/@/page/BkAzjdP9IvHCr5Xj

Rückmeldung geben