EMZETT.
Login

Emzett Wiki

HTML + CSS: Listen

Properties1
tagsprogrammiersprachen, html-css

2 Min. Lesezeit

Kurz: Listen strukturieren zusammengehörige Einträge. Es gibt drei Arten.

Teil des Kurses HTML + CSS

Kapitel 6 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Listen strukturieren zusammengehörige Einträge. Es gibt drei Arten.

Ungeordnete Liste: ul

<h3>Einkaufsliste</h3>
<ul>
  <li>Brot</li>
  <li>Milch</li>
  <li>Äpfel
    <ul>
      <li>Boskoop</li>
      <li>Elstar</li>
    </ul>
  </li>
</ul>

Eine Liste enthält direkt nur <li>-Elemente. Unterlisten stehen innerhalb eines <li>.

Geordnete Liste: ol

<h3>Pfannkuchen backen</h3>
<ol>
  <li>Teig anrühren</li>
  <li>Pfanne erhitzen</li>
  <li>Teig hineingießen</li>
  <li>Wenden und servieren</li>
</ol>
 
<ol type="A" start="3" reversed>
  <li>Dritter Eintrag (Buchstabe C)</li>
  <li>Zweiter (B)</li>
  <li>Erster (A)</li>
</ol>
AttributWirkung
type="1" "a" "A" "i" "I"Zählart
start="5"beginnt bei 5
reversedzählt rückwärts
value am lisetzt die Nummer eines Eintrags

Nimm <ol>, wenn die Reihenfolge wichtig ist, sonst <ul>.

Beschreibungsliste: dl

Für Begriffe mit Erklärung (Glossar, Eigenschaften, Fragen und Antworten):

<dl>
  <dt>HTML</dt>
  <dd>Beschreibt Struktur und Inhalt einer Webseite.</dd>
  <dt>CSS</dt>
  <dd>Gestaltet das Aussehen.</dd>
  <dt>Browser</dt>
  <dd>Zeigt Webseiten an.</dd>
  <dd>Beispiele: Firefox, Chrome, Safari.</dd>
</dl>

Listen gestalten mit CSS

<style>
  .ohne { list-style: none; padding: 0; }
  .ohne li { padding: 6px 10px; border-bottom: 1px solid #ddd; }
  .stern { list-style: "★ "; }
  .zahlen { list-style-type: upper-roman; }
  .horizontal { list-style: none; display: flex; gap: 12px; padding: 0; }
  .horizontal li { background: #e0e7ff; padding: 4px 10px; border-radius: 4px; }
</style>
<ul class="ohne"><li>Ohne Punkte</li><li>Mit Linie</li></ul>
<ul class="stern"><li>Eigenes Zeichen</li><li>Noch eins</li></ul>
<ol class="zahlen"><li>Römisch</li><li>Zwei</li></ol>
<ul class="horizontal"><li>Wie</li><li>ein</li><li>Menü</li></ul>

Tipp

Menüs, Kartenreihen und Breadcrumbs sind semantisch Listen. Mit CSS sehen sie völlig anders aus, aber Screenreader zählen die Einträge vor (“Liste mit 3 Einträgen”).

Checkliste mit Kontrollkästchen

<fieldset>
  <legend>Packliste</legend>
  <label><input type="checkbox" checked> Reisepass</label><br>
  <label><input type="checkbox"> Ladekabel</label><br>
  <label><input type="checkbox"> Sonnencreme</label>
</fieldset>

Häufige Fehler

  • <li> ohne umgebendes <ul>/<ol>
  • Text direkt in <ul> statt in <li>
  • Für Abstände leere <li> oder <br> verwenden
  • Eine Liste mit <br> und Sonderzeichen “nachbauen”, statt <ul> zu verwenden

Merke

  • <ul> mit <li>: ungeordnet; <ol>: geordnet; <dl> mit <dt>/<dd>: Begriff und Erklärung
  • Unterlisten stehen innerhalb eines <li>
  • Aussehen (Punkte, horizontal) kommt aus CSS
  • Menüs sind Listen von Links

Übungsaufgabe

Erstelle ein Rezept mit einer Zutatenliste (ul), einer nummerierten Anleitung (ol) und einem kleinen Glossar (dl).

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Bilder und Grafiken

Weiter: Tabellen

Alle Kapitel: HTML + CSS im Überblick

Graphansicht

Backlinks