HTML Listen

Ungeordnete, geordnete, verschachtelte und beschreibende Listen. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• ul, ol und li fachlich korrekt einsetzen
• verschachtelte Listen lesbar strukturieren
• Definitionslisten für Begriff-Erklärung-Paare verwenden

Erklärung

Listen strukturieren zusammengehörige Einträge. Eine ungeordnete Liste (ul) eignet sich für Punkte ohne feste Reihenfolge. Eine geordnete Liste (ol) eignet sich für Schritte, Rangfolgen oder Abläufe. Definitionslisten (dl) verbinden Begriffe mit Beschreibungen.

Beispiele

<ul>
  <li>HTML-Datei anlegen</li>
  <li>Grundstruktur schreiben</li>
  <li>Im Browser testen</li>
</ul>

Die Reihenfolge ist hier nicht zwingend, deshalb passt ul.

<ol>
  <li>Repository klonen</li>
  <li>Abhängigkeiten installieren</li>
  <li>Entwicklungsserver starten</li>
</ol>

Bei Arbeitsabläufen ist ol sinnvoll, weil die Reihenfolge Bedeutung hat.

<dl>
  <dt>HTML</dt>
  <dd>Beschreibt Struktur und Bedeutung.</dd>
  <dt>CSS</dt>
  <dd>Gestaltet die HTML-Struktur.</dd>
</dl>

Typische Fehler

• li direkt ohne ul oder ol verwenden.
• Listen nur für Einrückung missbrauchen.
• Verschachtelte Listen schlecht einrücken und dadurch unlesbar machen.

Best Practices

• Wähle die Listenart nach Bedeutung, nicht nach Optik.
• Halte Listeneinträge sprachlich parallel.
• Nutze CSS, wenn eine Liste anders aussehen soll.

Kleine Übung

Erstelle eine Checkliste für eine HTML-Abgabe und eine geordnete Liste für den Ablauf einer Code-Review.

Zusammenfassung

HTML ist dann gut, wenn die Bedeutung der Inhalte klar erkennbar ist. Saubere Struktur, passende Elemente und barrierearme Grundregeln machen Seiten robuster, verständlicher und leichter prüfbar.

Weiterführende Seiten

• Vorherige Seite: HTML Links und Navigation
• Nächste Seite: HTML Bilder und Medien
• Zur Übersicht
• HTML Links und Navigation
• HTML Tabellen