Florence Maurice

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

Geschrieben am: 5.5.2023

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.