0Pricing
HTML Academy · Lektion

Ungeordnete Listen: ul und li

Erstellen Sie Aufzählungslisten mit den Elementen ul und li.

Ungeordnete Listen: ul und li ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist eine ungeordnete Liste?

Eine ungeordnete Liste zeigt Elemente mit Aufzählungspunkten an – die Reihenfolge spielt keine Rolle:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Das ul-Element

Das <ul>-Element (ungeordnete Liste) umschließt die Liste. Nur <li>-Elemente sollten direkte Kindelemente sein:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->

Aufzählungspunkte mit CSS gestalten

Steuern Sie Listenmarkierungen mit CSS:

ul {
  list-style-type: disc;       /* default: filled circle */
  /* circle, square, none */
}

/* Custom bullet with ::before */
ul li::before {
  content: '→ ';
  color: blue;
}

/* Remove all list styling: */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

Navigation als ul

Navigationsmenüs sind semantisch eine Liste von Links:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

li kann beliebige Inhalte enthalten

Listenelemente können beliebige Flow-Inhalte enthalten:

<ul>
  <li>
    <strong>HTML</strong>
    <p>The structure of the web.</p>
  </li>
  <li>
    <strong>CSS</strong>
    <p>The presentation layer.</p>
  </li>
</ul>

Inline-Listen

Zeigen Sie Listenelemente mit CSS horizontal an:

<ul class="inline-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

<!-- CSS: -->
<!--
.inline-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
-->

Semantische Verwendung von ul

Häufige semantische Verwendungen für ungeordnete Listen:

  • Navigationsmenüs
  • Feature-Listen
  • Tag-Clouds
  • Verwandte Links
  • Zutatenlisten in Rezepten

ul oder p für mehrere Elemente

Wenn Sie mehrere zusammengehörige Elemente haben, ist eine Liste semantisch besser geeignet als mehrere einzelne Absätze:

<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>

<!-- Good: -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Listenmarkierungen mit list-style-image

Verwenden Sie ein eigenes Bild als Aufzählungspunkt:

ul {
  list-style-image: url('/icons/check.svg');
}

/* More reliable: use background-image on li::before */
ul li {
  list-style: none;
  padding-left: 1.5rem;
  background: url('/icons/check.svg') no-repeat left center;
  background-size: 1rem;
}

Kurzschreibweise list-style

Die Kurzschreibweise list-style legt Typ, Position und Bild fest:

ul {
  list-style: square inside;    /* type + position */
  list-style: none;             /* remove bullets */
}

/* list-style-position: inside vs outside */
ul {
  list-style-position: inside;  /* bullet inside padding box */
  /* outside = default, bullet outside text block */
}

Barrierefreiheit

Hinweise zur Barrierefreiheit bei Listen:

  • Screenreader geben den Listentyp und die Anzahl der Elemente bekannt
  • Die Verwendung von list-style: none kann dazu führen, dass einige Screenreader die Liste nicht als solche ankündigen – fügen Sie role="list" hinzu, um die Semantik zu erhalten
<ul style="list-style: none" role="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Schnelltest

Welches Element ist das einzige zulässige direkte Kindelement von ul?

Zusammenfassung: Ungeordnete Listen

Die wichtigsten Punkte zu ungeordneten Listen:

  • <ul> umschließt eine Liste, bei der die Reihenfolge keine Rolle spielt
  • <li> ist das einzige zulässige direkte Kindelement
  • Standard-Aufzählungspunkt: disc; ändern Sie ihn mit list-style-type
  • Navigationsmenüs sind semantisch <ul>-Listen mit Links
  • Fügen Sie role="list" hinzu, wenn Sie die Aufzählungspunkte mit CSS entfernen

Häufig gestellte Fragen

Ist die Lektion „Ungeordnete Listen: ul und li“ kostenlos?

Ja — der vollständige Text von „Ungeordnete Listen: ul und li“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Ungeordnete Listen: ul und li“?

Erstellen Sie Aufzählungslisten mit den Elementen ul und li. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Ungeordnete Listen: ul und li“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Ungeordnete Listen: ul und li
  2. Geordnete Listen: ol, start, reversed und type
  3. Definitionslisten: dl, dt und dd
  4. Verschachtelte Listen und Listenformatierung
← Zurück zu HTML Academy