Aufbau einer HTML-LS Site mit „Section“ und anderen Elementen

Folgende Seite wollen wir mit HTML-LS nachbauen.
Kundenvorlage als Bild

Nehmen wir folgenden Quellcode schon mal in der Html-Datei auf. Die Formatierung setzen wir im Zentraldokument um.

Das Zentraldokument ist der Head-Bereich der Html-Datei

HTML-LS führte eine Reihe neuer semantischer Elemente ein, die den Code nicht nur strukturierter und lesbarer machen, sondern auch die Barrierefreiheit und Suchmaschinenoptimierung verbessern. Hier sind einige der wichtigsten semantischen HTML-LS-Elemente:

  • header: Definiert den Kopfbereich einer Seite oder eines Abschnitts. Enthält typischerweise Überschriften, Navigationslinks, und andere einleitende Inhalte.
  • nav: Kennzeichnet einen Navigationsbereich, der Links zu anderen Teilen der Website oder zu anderen Seiten enthält.
  • main: Bezeichnet den Hauptinhalt der Seite. Es sollte nur einmal pro Seite verwendet werden und den zentralen Inhalt umfassen, der sich direkt auf das Thema der Seite bezieht.
  • article: Definiert einen eigenständigen Artikel, der unabhängig vom restlichen Inhalt der Seite stehen könnte. Es kann z.B. ein Blog-Post, ein Nachrichtenartikel oder ein Forenbeitrag sein.
  • aside: Definiert Inhalte, die indirekt mit dem Hauptinhalt verbunden sind, wie z.B. Seitenleisten, Zitate oder verwandte Links.
  • footer: Bezeichnet den Fußbereich einer Seite oder eines Abschnitts. Typischerweise enthält er Informationen wie Copyright-Hinweise, Links zu rechtlichen Informationen oder Kontaktinformationen.
  • figure und figcaption Dienen zur Markierung von Abbildungen und deren Beschreibungen.
Anmerkung des Autors:
Die HTML-Elemente wie aside, section, main, und article sind semantische Elemente, die entwickelt wurden, um Webseiten besser strukturiert und verständlicher zu machen – sowohl für Menschen als auch für Maschinen, wie Suchmaschinen oder Screenreader. Man sollte sie jedoch nicht übermäßig „bierernst“ nehmen, da sie in erster Linie Werkzeuge sind, die Flexibilität und Pragmatismus erlauben. Man kann sie entspannt nutzen, auch außerhalb der Barrierefreiheit:
Sie sind Hilfsmittel, keine starren Regeln!