Semantische Bereiche einer Webseite - header, footer, section
Veröffentlichungsdatum: 11. Juni 2019
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE
Semantische Bereiche einer Webseite dienen der genaueren Definition von Inhalten.
Für Seitenbesucher spielt der generierte HTML Quelltext grundsätzlich keine Rolle. Um für eine Sprachausgabe, Screen Reader, Suchmaschinen, etc. die Inhalte leichter "verständlich" zu machen, sollten Sie semantische Elemente in HTML 5 zur Auszeichnung verwenden.
Das BASE (Mobile First) Projekt nutzt bereits im Standard die header und footer Tags zur Kennzeichnung von Kopfbereich und Fußbereich der Webseite.
Hinsichtlich der Inhaltsbereiche können Sie über CSS-Only definieren, daß der Elemente-Name eines Inhaltsbereiches anstatt div als section ausgegeben wird.
Beispiel: Auszug aus der elementSection.scss zur Angabe des Elemente-Names
-w-option-elementName:'div'; /* Elementname von Inhaltsbereichen */ <!-- 'section' für die Ausgabe von section-Tags (<section ...) -->
Weitergehende Anpassung an die Semantik der Webseite können Sie individuell für das Projekt festlegen.