Ausführbare HTML-Docs: HTML Listen

Q: Wie mache ich Aufzählungspunkte in HTML?

Mit einer ungeordneten Liste: mit einem pro Punkt, zum Beispiel Milk Eggs . Der Browser zeichnet vor jeden Eintrag einen Punkt und rückt die Liste ein.

Q: Wie entferne ich die Aufzählungspunkte einer Liste in HTML?

Setz im CSS list-style: none an das . Setz außerdem padding-inline-start: 0 (oder padding: 0), um die Einrückung zu entfernen, die der Browser für die Punkte hinzufügt.

Q: Wie lasse ich eine nummerierte Liste bei einer anderen Zahl beginnen?

Mit dem Attribut start: nummeriert den ersten Eintrag mit 5. reversed zählt stattdessen rückwärts, und value an einem legt die Nummer dieses Eintrags und der folgenden fest.

Q: Wie mache ich eine verschachtelte Liste in HTML?

Setz das innere oder in ein der äußeren Liste, nach dem Text dieses Eintrags. Eine Liste direkt in einem anderen , zwischen -Elementen, ist ungültig.

HTML-Listen: ul, ol und li

HTML hat zwei Hauptarten von Listen. <ul> (unordered list) zeigt Aufzählungspunkte, <ol> (ordered list) zeigt Nummern. Jeder Eintrag ist ein <li> (list item).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

Nimm <ol>, wenn die Reihenfolge etwas bedeutet (Schritte, Ranglisten, ein Inhaltsverzeichnis), und <ul>, wenn nicht. Screenreader sagen beide als Liste mit Anzahl an, etwa „Liste, 3 Einträge“. Deshalb ist eine echte Liste besser als Zeilen, die mit einem getippten „•“ oder „1.“ beginnen.

Eine Liste darf direkt nur <li>-Elemente enthalten. Alles andere, auch Überschriften, Absätze und andere Listen, kommt in ein <li>.

Stile für Aufzählungspunkte

list-style-type am <ul> ändert den Aufzählungspunkt. Das Pseudo-Element ::marker stylt den Punkt oder die Nummer selbst, getrennt vom Text:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

Ein String als Wert nimmt diesen Text als Aufzählungszeichen. "\2713 " ist ein Häkchen, gefolgt von einem Leerzeichen: Das erste Leerzeichen beendet nur das Escape \2713. ::marker akzeptiert nur wenige Eigenschaften, vor allem color, font-size und andere Schrifteigenschaften. Das reicht für den häufigen Wunsch nach farbigen Punkten, ohne zusätzliches Markup.

Nummerierte Listen: Zahlen, Buchstaben und römische Zahlen

<ol> hat Attribute für seine Nummerierung:

Attribut	Beispiel	Ergebnis
`type`	`type="a"`	a, b, c (`A`, `i`, `I` und `1` gehen auch)
`start`	`start="5"`	Beginnt bei 5 zu zählen
`reversed`	`reversed`	Zählt rückwärts
`value` (an `<li>`)	`<li value="10">`	Dieser Eintrag ist 10, die folgenden zählen von dort weiter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

type ist in HTML in Ordnung, weil die Buchstaben Bedeutung tragen können („wähle Option B“). Für rein optische Änderungen macht CSS list-style-type: upper-alpha oder lower-roman dasselbe.

Verschachtelte Listen

Eine Unterliste kommt in das <li>, zu dem sie gehört, nach dem Text dieses Eintrags. Browser ändern den Aufzählungspunkt auf jeder Ebene: gefüllter Kreis, dann leerer Kreis, dann Quadrat.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

Achte darauf, wo </li> steht: Der Eintrag „Frontend“ wird erst nach seiner Unterliste geschlossen. Schließt du ihn vor dem <ul>, steht die Unterliste direkt im äußeren <ul>, und das ist ungültig, auch wenn es fast gleich aussieht.

Nummerierte Listen werden genauso verschachtelt, und die Nummerierung beginnt in jeder Unterliste wieder bei 1. Für Nummern wie 1.1 und 1.2 brauchst du CSS-Counter.

Beschreibungslisten: dl, dt und dd

Eine Beschreibungsliste ordnet Begriffen ihre Beschreibungen zu: ein Glossar, die Details einer Bestellung, Paare im FAQ-Stil. <dt> ist der Begriff und <dd> die Beschreibung:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

Ein Begriff kann mehrere <dd> haben, und mehrere <dt> können sich ein <dd> teilen. Browser rücken <dd> standardmäßig ein; die margin-Regel oben entfernt das. Für Daten mit mehreren Spalten passt eine Tabelle besser.

Listen ohne Punkte: Menüs und horizontale Listen

Navigationsmenüs sind Listen von Links. Entferne die Punkte mit list-style: none und die Einrückung mit padding: 0 und ordne die Einträge dann mit Flexbox in einer Reihe an:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

Für Screenreader ist die Liste immer noch eine Liste („Navigation, Liste, 3 Einträge“). Eine Ausnahme: Safari mit VoiceOver kann die Listenbedeutung verwerfen, wenn die Punkte entfernt werden. Wenn die Anzahl für deine Nutzer wichtig ist, füg dem <ul> role="list" hinzu.

Standardabstände

Browser geben Listen oben und unten einen Außenabstand von 1em und rücken sie mit padding-inline-start: 40px ein; dort sitzen die Aufzählungspunkte. Der Innenabstand liegt auf der Anfangsseite, bei Sprachen, die von rechts nach links laufen, wandern Punkte und Einrückung also automatisch auf die andere Seite. Entfernst du den Innenabstand, rutschen die Punkte aus dem Listenkasten heraus und können abgeschnitten werden; behalte also etwas Innenabstand oder nimm list-style-position: inside.

Häufige Fehler

<li> ohne Elternliste. Es muss in <ul>, <ol> oder <menu> stehen.
Eine verschachtelte Liste außerhalb ihres <li>. Setz die Unterliste in den Eintrag, zu dem sie gehört.
Text oder andere Tags direkt in <ul>, etwa <ul><p>Note</p><li>...</li></ul>. Verschieb sie in ein <li> oder aus der Liste heraus.
Punkte oder Nummern von Hand tippen mit • und <br>. Screenreader hören einen Absatz, keine Liste.
list-style: none ohne padding: 0, sodass eine rätselhafte Einrückung von 40 Pixeln bleibt.
<ol> wegen des Aussehens verwenden. Wenn die Reihenfolge egal ist, nimm <ul> und style es.

Häufig gestellte Fragen

Wie mache ich Aufzählungspunkte in HTML?

Mit einer ungeordneten Liste: <ul> mit einem <li> pro Punkt, zum Beispiel <ul><li>Milk</li><li>Eggs</li></ul>. Der Browser zeichnet vor jeden Eintrag einen Punkt und rückt die Liste ein.

Was ist der Unterschied zwischen ul und ol?

<ul> ist eine ungeordnete Liste mit Aufzählungspunkten, für Einträge, deren Reihenfolge egal ist. <ol> ist eine geordnete Liste mit Nummern, für Schritte und Ranglisten, bei denen die Reihenfolge zählt. Beide enthalten <li>-Einträge.

Wie entferne ich die Aufzählungspunkte einer Liste in HTML?

Setz im CSS list-style: none an das <ul>. Setz außerdem padding-inline-start: 0 (oder padding: 0), um die Einrückung zu entfernen, die der Browser für die Punkte hinzufügt.

Wie lasse ich eine nummerierte Liste bei einer anderen Zahl beginnen?

Mit dem Attribut start: <ol start="5"> nummeriert den ersten Eintrag mit 5. reversed zählt stattdessen rückwärts, und value an einem <li> legt die Nummer dieses Eintrags und der folgenden fest.

Wie mache ich eine verschachtelte Liste in HTML?

Setz das innere <ul> oder <ol> in ein <li> der äußeren Liste, nach dem Text dieses Eintrags. Eine Liste direkt in einem anderen <ul>, zwischen <li>-Elementen, ist ungültig.

Verwandte Konzepte