Überschriften, Texte und Bilder innerhalb von Listen

HTML5 und Semantik

HTML5 brachte zahlreiche Verbesserungen unter anderem für die Gliederung von Inhalten einer Website mit.
Eine solche Verbesserung ist die Möglichkeit, innerhalb von Aufzählungen, von Listenpunkten (ul-, ol- sowie li-Elementen) Überschriften (h-Elemente) und Texte (p-Elemente) einzufügen – sowie ohne Probleme auch Bilder, Fotos (img-Elemente).

Zwei (semantisch) wichtige Neuerungen grundsätzlicher Art waren die Einführungen des main-Elements – dem eigentlichen Inhaltsbereich einer Webseite – und des nav-Elements, das die Navigation, das Menü einer Website einfasst und in der Regel als geordnete oder ungeordnete Liste (ul-Element) mit entsprechender Auflistung der einzelnen Menüpunkte (li-Elemente) geschrieben wird; innerhalb eines li-Elements stehen dann die Links (a-Elemente) zu den einzelnen Seiten der Website.

Diese Gliederung ist sehr hilfreich insbesondere für Menschen, die sich Webseiten vorlesen lassen müssen oder via Tastatur surfen wollen, surfen müssen: Das nav-Element kann sofort angesprungen werden, einzelne Listenpunkte rasch abgearbeitet werden. Ebenso wie der Inhaltsbereich über das main-Element sofort angesprungen werden kann.

HTML5 erlaubt es nun endlich, auch innerhalb solchen Listen semantisch hilfreiche Überschriften und Textpassagen aber auch Bilder zu integrieren:

<nav> <ul> <!-- Kommentar: mit h-Element: --> <li><h2>Meine Startseite</h2> <a href="website-info.html" title="Sprung zur Seite.">Design ist fein</a> </li> <!-- Kommentar: mit h- und img-Element: --> <li><h2>Mein ganzer Inhalt</h2> <em>Ein</em> Bild: <img src="website-bilder3/briefkasten.jpg" width="64" height="64" alt="Symbol für Kontakt"> </li> <!-- Kommentar: mit h- und p-Element: --> <li><h2>Mein Impressum</h2> <p>Meine Adresse, Rechtliches, alles, was keiner liest: <a href="index.html" title="Sprung zur Seite.">Impressum</a></p> </li> </ul> </nav>

Schaut dann so aus:

Im November 2025 habe ich mich endlich aufgerafft, mein Hauptmenü auf einigen Dutzend Seiten diesbezüglich anzupassen.