HTML ändern · Anleitung

HTML: Aufzählung und Liste erstellen

Kurz gesagt: Eine Liste besteht aus zwei Teilen — einem Behälter und den Einträgen. <ul> für eine Aufzählung mit Punkten, <ol> für eine mit Nummern, und darin je ein <li> pro Eintrag. Wie die Punkte aussehen, legst du danach in CSS fest.

Aufzählung mit Punkten

<ul>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
  <li>Dritter Punkt</li>
</ul>

Nummerierte Liste

<ol>
  <li>Erster Schritt</li>
  <li>Zweiter Schritt</li>
</ol>

Die Nummern schreibst du nicht selbst — der Browser zählt automatisch. Fügst du später oben einen Eintrag ein, verschiebt sich alles Weitere von allein.

`ul` oder `ol`? Die Reihenfolge entscheidet

	`<ul>` — „unordered"	`<ol>` — „ordered"
Markierung	Punkte	Nummern
Nimm es, wenn	die Reihenfolge egal ist	die Reihenfolge wichtig ist
Beispiel	Leistungen, Vorteile, Zutaten	Anleitung, Rezept-Schritte, Rangliste

Die Entscheidung ist nicht nur Kosmetik: Screenreader kündigen eine <ol> als Schrittfolge an, eine <ul> als Sammlung. Und wer nur Punkte statt Nummern will, ändert das später in CSS — nicht durch die falsche Listenart.

Das Aussehen der Punkte ändern

ul { list-style-type: disc; }     /* ● Standard */
ul { list-style-type: circle; }   /* ○ */
ul { list-style-type: square; }   /* ▪ */
ul { list-style-type: none; }     /* keine Markierung */

Für nummerierte Listen gibt es andere Werte:

ol { list-style-type: decimal; }      /* 1. 2. 3. — Standard */
ol { list-style-type: lower-alpha; }  /* a. b. c. */
ol { list-style-type: upper-roman; }  /* I. II. III. */

Punkte ganz entfernen — mit einem Zusatz: list-style-type: none nimmt die Punkte weg, lässt aber die Einrückung stehen. Wer beides los will, braucht zwei weitere Zeilen:

ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

Genau das brauchst du, wenn eine Liste als Navigationsleiste oder als Kachelreihe dienen soll — technisch eine Liste, optisch keine.

Nummerierung an anderer Stelle starten

<ol start="5">
  <li>Fünfter Schritt</li>
</ol>

Nützlich, wenn eine Anleitung durch einen Zwischentext unterbrochen wird und danach weiterzählen soll.

Listen verschachteln

Hier passiert der häufigste Fehler. Die innere Liste gehört in das <li> des übergeordneten Eintrags — nicht daneben:

<ul>
  <li>Texte ändern
    <ul>
      <li>Überschriften</li>
      <li>Absätze</li>
    </ul>
  </li>
  <li>Bilder austauschen</li>
</ul>

Beachte, wo </li> steht: nach der inneren Liste. Schließt du den Eintrag vorher, steht die innere Liste außerhalb — der Browser stellt sie dann falsch eingerückt dar, und Screenreader verlieren die Struktur.

Was nicht zwischen die Einträge gehört: Direkt in eine <ul> darf ausschließlich <li>. Ein <p> oder eine Überschrift zwischen zwei Einträgen ist ein Strukturfehler. Text, der zu einem Eintrag gehört, schreibst du in dessen <li>.

Abstände in Listen

ul {
  padding-left: 1.4rem;   /* Einrückung der ganzen Liste */
  margin: 1.2rem 0;       /* Abstand über und unter der Liste */
}
li {
  margin-bottom: .5rem;   /* Abstand zwischen den Einträgen */
  line-height: 1.7;       /* Zeilenabstand innerhalb eines Eintrags */
}

Der Abstand zwischen Einträgen gehört an li, nicht an ul — das ist der Grund, warum Änderungen an ul die Einträge oft nicht auseinanderrücken. Mehr zu Abständen steht auf Zeilenumbruch und Abstände.

Die vier häufigsten Fehler

Kein Behälter. Mehrere <li> ohne <ul> oder <ol> darum — die Einträge erscheinen dann ohne Einrückung und ohne Punkte.
Nummern selbst getippt. <li>1. Erster Schritt</li> in einer <ol> ergibt „1. 1. Erster Schritt", weil der Browser zusätzlich zählt.
Innere Liste falsch platziert. Siehe oben — sie gehört in das <li>.
Absätze zwischen den Einträgen. Zwischen zwei <li> darf nichts anderes stehen.

Dasselbe ohne Code: anklicken statt tippen

Wenn deine Seite steht und du nur einen Punkt ergänzen oder umformulieren willst, ist der Code-Weg umständlich. PageFix ist ein deutschsprachiger Web-Editor für KI-gebaute HTML-Seiten: Du ziehst deine HTML-Datei ins Tool und arbeitest auf der fertigen Seite.

Im Code

Liste im HTML finden, neues <li> an der richtigen Stelle einfügen, auf das schließende Tag achten, speichern, neu laden, prüfen.

Per Klick

Eintrag anklicken und überschreiben. Einträge lassen sich per Pfeil nach oben oder unten verschieben oder entfernen — ohne die Struktur der Liste anzufassen.

Einmalzahlung von 49 €, kein Abo, Updates inklusive.

Häufige Fragen

Wie erstelle ich eine Aufzählung in HTML?

Mit <ul> als Behälter und einem <li> pro Eintrag darin. Für eine nummerierte Liste nimmst du <ol> statt <ul>. Die Nummern schreibst du nicht selbst — der Browser zählt automatisch.

Was ist der Unterschied zwischen ul und ol?

<ul> erzeugt Punkte und ist richtig, wenn die Reihenfolge keine Rolle spielt — etwa bei Leistungen oder Zutaten. <ol> erzeugt Nummern und ist richtig, wenn die Reihenfolge wichtig ist, etwa bei einer Anleitung. Screenreader kündigen beide unterschiedlich an.

Wie entferne ich die Punkte einer Liste?

Mit list-style-type: none. Das nimmt die Punkte weg, lässt aber die Einrückung stehen — ergänze deshalb padding-left: 0 und margin-left: 0, wenn die Liste auch links am Rand beginnen soll.

Wie verschachtele ich zwei Listen?

Die innere Liste gehört in das <li> des übergeordneten Eintrags, und das schließende </li> steht erst nach der inneren Liste. Schließt du den Eintrag vorher, steht die innere Liste außerhalb und wird falsch dargestellt.

Wie vergrößere ich den Abstand zwischen den Einträgen?

Mit margin-bottom an li, nicht an ul. Änderungen am Behälter verschieben die ganze Liste, nicht die Einträge untereinander.

Kann eine nummerierte Liste bei einer anderen Zahl anfangen?

Ja, mit dem Attribut start am <ol>, zum Beispiel <ol start="5">. Das ist nützlich, wenn eine Anleitung durch Zwischentext unterbrochen wird und danach weiterzählen soll.

Jetzt starten

Erst ausprobieren? Öffne die Demo — der echte Editor, ohne Konto.

Zuletzt aktualisiert: 12. September 2026

← Zurück zur Startseite und PageFix ansehen