Website Inhalte mit HTML5 richtig strukturieren

  • Website Inhalte mit HTML5 richtig strukturieren © w3.org

Um den Inhalten einer Website die richtige Gewichtung zu verleihen, nutzt Google Algorithmen. Diese legen fest, was als Hauptinhalt gewertet wird und welche Informationen eher unwichtig sind. Dabei unterstützt man Google schon lange durch Überschriften (h1 – h6), welche es leichter machen die Inhalte einzuordnen. Deshalb ist es so wichtig, dass jede Seite ein h1-Element beinhaltet. Das bedeutet auch, je mehr Struktur im Quelltext herrscht, desto besser und genauer kann Google die Inhalte zuordnen. Außerdem ist bei Screenreadern eine im Quelltext gut strukturierte Seite besonders wichtig. Diese geben die Inhalte via nicht-visueller Ausgabe an Blinde und Sehbehinderte weiter. Dank HTML5 gibt es semantische Strukturelemente, welche den Quelltext für Suchmaschinen, Screenreader und Entwickler klarer unterteilen.

Das Layout sollte also semantisch korrekt strukturiert sein. Dies gestaltet sich nun einfacher und übersichtlicher. Die Grundstruktur könnte wie folgt aussehen:

Die Grundstruktur einer HTML5 Seite

“section” teilt hierbei den Inhalt in die thematisch verschiedenen Inhalte. Das kommt uns bei einer OnePage sehr zugute, um beispielsweise Leistungen, Über uns und Kontakt zu trennen. Um zusammengehörende Inhalte zu gruppieren, verwendet man weiterhin das div-Element.

“aside” kennzeichnet einen Bereich, der zusätzliche Informationen zum Hauptinhalt enthält. Dies könnte wie in dem Beispiel eine Sidebar sein.

Um die Bereiche noch genauer zu definieren, kann man ihnen eine bestimmte Rolle zuteilen. Dies funktioniert via ARIA Landmark Roles und sieht folgendermaßen aus:

<header role=“banner“>, <nav role=“navigation“>, <main role=“main“> …

role=“banner“ kennzeichnet den Bereich, in dem sich Site-Informationen, wie Seitentitel, Seiten-Untertitel und Logo befinden.
role=“navigation“ zeigt an, wo sich die Hauptnavigation befindet und
role=“main“ kennzeichnet den Hauptinhalt der Seite.

Dies hilft besonders Screenreadern dabei, die richtigen Bereiche zu finden.

Die Überschriften einer Website sollten so wie bei einem guten Buch aufgebaut sein, also beginnend mit der Hauptüberschrift h1, die es genau einmal auf jeder Seite geben sollte. Darauf folgt üblicherweise eine kurze Einleitung (Teaser Text), damit man schnell erfährt, worum es auf der Website geht.

Weiter geht es mit den Unterpunkten der Hauptüberschrift. Hier werden in die einzelnen Abschnitte mit h2 Überschriften unterteilt. Die weiteren Unterpunkte der jeweiligen h2 werden dann zu Überschriften in h3 und so weiter.

Die richtige Struktur fuer Ueberschriften

Überschriften sollten die Inhalte also sinnvoll, wie Kapitel, einteilen.

Zu den Texten der einzelnen Abschnitte, sollten Bilder und Videos, die thematisch zu den Inhalten passen, den Text unterstützen.

Die Dateinamen können, bzw. sollten, sofern es auf das Bild oder Video passt, gewünschte Keywords beinhalten. Besteht der Dateiname aus mehreren Wörtern, sollten diese durch einen Bindestrich getrennt werden. Bei Bildern sollte immer der Title-Tag mit dem Titel des Bildes ausgestattet werden und der Alt-Tag eine kurze Beschreibung des Bildes beinhalten.

Generell gilt, je mehr Informationen man über die eingebundenen Inhalte zur Verfügung stellt, desto besser. Diese sollten allerdings Relevanz haben und zu den Überschriften und Texten innerhalb einer section passen.

Hier ein zusammenfassendes Beispiel:

Copy to Clipboard
Von |2018-11-20T16:51:11+00:0019. November 2018|

Hinterlassen Sie einen Kommentar