Häufige Fehler bei HTML-Listen vermeiden - Tipps für Einsteiger
Geschrieben am:

Ich unterrichte immer wieder HTML & CSS für Einsteiger:innen. Und manche Fehler begegnen mir besonders häufig. Beispielsweise folgende Fehler bei Listen in HTML.
Listen haben in HTML eine sehr strenge Struktur. Als Kindelement von ul
sind nur li
-Elemente möglich.
Listen müssen immer so aussehen:
<ul><!-- KEINE anderen Elemente möglich -->
<li><!-- HIER kann man andere Elemente ergänzen --></li>
<!-- KEINE anderen Elemente möglich -->
<li><!-- HIER kann man andere Elemente ergänzen --></li>
<li><!-- HIER kann man andere Elemente ergänzen --></li>
</ul>
Das Folgende ist nicht korrekt wegen des <br>
nach den Listenpunkten:
<!-- Nicht korrekt -->
<ul>
<li>Listenpunkt</li><br>
<li>Listenpunkt</li><br>
<li>Listenpunkt</li><br>
</ul>
Wenn mehr Abstand zwischen den einzelnen Punkten sein soll, so lässt sich das gut per CSS bewerkstelligen.
Und auch das Folgende ist nicht korrekt wegen der Position der Überschrift:
<!-- Nicht korrekt -->
<ul>
<h1>Überschrift</h1>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ul>
Die Überschrift darf aber natürlich vor der Liste stehen:
<!-- Korrekt -->
<h1>Überschrift</h1>
<ul>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ul>
Und eine Überschrift darf auch innerhalb eines Listenpunkts vorkommen:
<!-- Korrekt -->
<ul>
<li><h2>Überschrift</h2>
<p>Lorem ...</p>
</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ul>
Um zu überprüfen, ob die Liste korrekt ist, empfiehlt sich der W3C-Validator.
Falls die Liste nicht korrekt ist, erscheint eine Fehlermeldung wie: "Element h1 not allowed as child of element ul in this context." Das heißt: das angegebene Element ist nicht erlaubt als Kindelement von ul
.
- Solche und mehr Tipps gibt’s auch in meinem HTML & CSS-Buch