Ü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 (li-Elementen von ul-, ol-Listen) Ü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 (ol-Element) 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"> <ul> <li>Ein zweiter Inhalt</li> <li>Und ein dritter Inhalt</li> </ul></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>

Eingefügte Überschriften, Textabsätze, Bilder stehen innerhalb eines li-Elements.

Schaut dann so aus:

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

Listenpunkte entfernen

Die Listenpunkte der li-Elemente, die die Überschriften einfassen, können entfernt werden: list-style-type: none;

Beispielsweise über das erste ul-Element, gegebenenfalls zusammen mit einer class, zum Beispiel .meine-class ul {list-style-type: none;}

Die folgenden Listenpunkte behalten mit der Angabe list-style-type: revert; die Listenpunkte.

Ein Beispiel ist mein Hauptmenü, wo Überschriften ohne Listenpunkte erscheinen aber semantisch gliedern, die darunter folgenden Listen indessen zeigen Listenpunkte. Dies macht so Sinn.

Ein weiteres kleineres Beispiel im Versuch, die Bedeutung für die Semantik besser zu verstehen; h-Elemente und p-Elemente in Listen:

Die Sprachen des Netzes

Solche Entwicklungen – technisch formuliert: h-Elemente und p-Elemente semantisch in Listen der Hypertext Markup Languag (Html) einfügen zu können – gehören zur geistigen Entwicklung des Netzes.
Die Sprache im Netz bestimmt den Wert des Netzes. Und die Sprache ist niemandes Eigentum.

Die Pflege und Förderung der Sprache ist Aufgabe eines jeden Nutzers des Netzes. Jede geistige Entwicklung findet im Umgang mit der Sprache statt. Und hier ist jeder ein Teil des Ganzen …

Die Entwicklungen und Tendenzen im Netz waren und sind leider auch andere – beispielsweise – aber wesentlich – im Umgang mit Sprache und Schrift im Netz. Eine Skizze dieser Entwicklungen finden Sie unter Nutzer und Macher des World Wide Web.