Was ist das <ul>-Element und wozu wird es verwendet?

Das <ul>-Element steht für " ungeordnete Liste" und wird verwendet, um ungeordnete Listen von Items anzuzeigen, die nicht in einer bestimmten Reihenfolge dargestellt werden sollen. Beispielsweise kannst du eine ungeordnete Liste verwenden, um:

Zweck

• Eine Liste mit Einkaufsartikeln
• Kontaktinformationen auflisten
• Eine Liste mit Hobbys
• Navigationselemente auf einer Website anzeigen
• Eine Sammlung von Links zu anderen Dokumenten oder Websites bereitstellen

Im Gegensatz zu geordneten Listen (

) haben ungeordnete Listen keine nummerierten oder alphabetischen Einträge. Stattdessen werden sie mit Punkten oder anderen Aufzählungszeichen dargestellt.

Wie erstelle ich eine ungeordnete Liste mit <ul>?

Um eine ungeordnete Liste in HTML zu erstellen, verwende das <ul>-Element (unordered list). Es ist ein Container-Element, das einzelne Listenelemente enthalten kann.

Grundlegende Syntax

Die grundlegende Syntax zum Erstellen einer ungeordneten Liste lautet:

<ul>
  <li>Erstes Element</li>
  <li>Zweites Element</li>
  <li>Drittes Element</li>
</ul>

Listenelemente hinzufügen

Jedes Listenelement wird durch das <li>-Element (list item) dargestellt. Du kannst beliebig viele <li>-Elemente innerhalb eines <ul>-Containers verschachteln.

Automatische Aufzählung

Standardmäßig werden Listenelemente in ungeordneten Listen mit kleinen schwarzen Kreisen (●) aufgezählt. Diese Aufzählung wird automatisch vom Browser generiert und kann nicht angepasst werden.

Ausnahmen von der Aufzählung

In einigen Fällen kannst du die Aufzählung für bestimmte Listenelemente unterdrücken. Dies ist nützlich, wenn du ein Element in der Liste hervorheben möchtest:

<ul>
  <li>Erstes Element</li>
  <li>Zweites Element <span style="list-style-type: none;">ohne Aufzählung</span></li>
  <li>Drittes Element</li>
</ul>

Im obigen Beispiel wird das zweite Listenelement nicht aufgezählt, da es in ein <span>-Element mit dem Stil list-style-type: none; eingeschlossen ist.

Wie füge ich Elemente zu einer ungeordneten Liste hinzu?

Um Elemente zu einer ungeordneten Liste hinzuzufügen, verwendest du das <li>-Element. <li> steht für "list item" (Listenelement) und jedes Element innerhalb einer ungeordneten Liste muss in ein <li>-Element eingeschlossen sein.

So fügst du ein einzelnes Element hinzu

Um ein einzelnes Element zu einer ungeordneten Liste hinzuzufügen, folge diesen Schritten:

1. Öffne das <ul>-Element, in das du das Element hinzufügen möchtest.
2. Füge ein <li>-Element hinzu.
3. Gib den Text oder HTML-Code für das Element in das <li>-Element ein.
4. Schließe das <li>-Element.
5. Schließe das <ul>-Element.

Beispiel:

<ul>
  <li>Element 1</li>
</ul>

So fügst du mehrere Elemente hinzu

Um mehrere Elemente zu einer ungeordneten Liste hinzuzufügen, folge diesen Schritten:

1. Öffne das <ul>-Element, in das du die Elemente hinzufügen möchtest.
2. Füge für jedes Element ein <li>-Element hinzu.
3. Gib den Text oder HTML-Code für jedes Element in das entsprechende <li>-Element ein.
4. Schließe jedes <li>-Element.
5. Schließe das <ul>-Element.

Beispiel:

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Verschachteln von ungeordneten Listen

Du kannst auch ungeordnete Listen verschachteln, indem du <ul>-Elemente innerhalb anderer <ul>-Elemente verwendest.

Beispiel:

<ul>
  <li>Hauptliste</li>
  <ul>
    <li>Unterliste 1</li>
    <li>Unterliste 2</li>
  </ul>
</ul>

Unterschiede zwischen geordneten und ungeordneten Listen (ol und ul)

Was ist der Unterschied zwischen geordneten und ungeordneten Listen?

Geordnete und ungeordnete Listen sind zwei verschiedene Möglichkeiten, um Listenelemente in HTML darzustellen. Der Hauptunterschied zwischen ihnen besteht darin, wie die Elemente aufgelistet werden.

• Geordnete Listen (ol) nummerieren ihre Elemente aufsteigend.
• Ungeordnete Listen (ul) fügen ihren Elementen Aufzählungspunkte (normalerweise Punkte, Quadrate oder Kreise) hinzu.

Wann solltest du eine geordnete Liste verwenden?

Verwende eine geordnete Liste, wenn du die Elemente in einer bestimmten Reihenfolge darstellen möchtest, z. B.:

• Schritte in einem Prozess
• Rangfolge von Elementen
• Chronologische Auflistung

Wann solltest du eine ungeordnete Liste verwenden?

Verwende eine ungeordnete Liste, wenn du eine Auflistung von Elementen ohne bestimmte Reihenfolge darstellen möchtest, z. B.:

• Eigenschaften eines Produkts
• Vorteile einer Dienstleistung
• Zutaten in einem Rezept

Zusätzliche Unterschiede

Zusätzlich zu den oben genannten Unterschieden gibt es noch weitere Punkte zu beachten:

• Standard-Aufzählungspunkt: Der Standard-Aufzählungspunkt für eine ungeordnete Liste ist ein Punkt. Du kannst jedoch mit CSS andere Aufzählungspunkte wie Quadrate oder Kreise verwenden.
• Listenelemente: Die Listenelemente einer geordneten Liste werden mit dem <li>-Tag erstellt, während die einer ungeordneten Liste mit dem <li>-Tag erstellt werden.
• Semantik: Geordnete Listen sind semantisch sinnvoller für Listen mit einer Reihenfolge, während ungeordnete Listen besser für Listen ohne Reihenfolge geeignet sind.
• Barrierefreiheit: Geordnete Listen sind leichter zugänglich als ungeordnete Listen, da Screenreader die Reihenfolge der Elemente ansagen können.

Indem du die Unterschiede zwischen geordneten und ungeordneten Listen verstehst, kannst du sicherstellen, dass du die richtige Art von Liste für deine Inhalte auswählst und eine klare und zugängliche Darstellung auf allen Geräten bietest.

Anpassen des Aussehens einer ungeordneten Liste

Du kannst das Aussehen deiner ungeordneten Liste anpassen, indem du CSS-Stile verwendest.

Schriftarten und Farben

Du kannst die Schriftart, Größe und Farbe des Listentextes anpassen. Beispielsweise:

ul {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #333;
}

Aufzählungspunkte

Du kannst auch die Art der Aufzählungspunkte anpassen. Zu den verfügbaren Optionen gehören:

• disc (Standard)
• circle
• square
• none (entfernt die Aufzählungspunkte)

Beispielsweise:

ul {
  list-style-type: circle;
}

Listenabstände

Du kannst den Abstand zwischen den Listenelementen anpassen. Verwende dazu die padding– und margin-Eigenschaften:

ul {
  padding: 10px;
  margin: 20px;
}

Hintergründe

Du kannst auch einen Hintergrund hinter die Liste hinzufügen. Beispielsweise:

ul {
  background-color: #f5f5f5;
}

Tipp

Verwende die CSS-Eigenschaft text-align (Textausrichtung) zum Ausrichten des Listentextes.

Best Practices

• Verwende eine begrenzte Anzahl von Schriftarten und Farben.
• Stelle sicher, dass die Schriftart lesbar ist.
• Verwende genügend Abstand zwischen den Listenelementen, um die Lesbarkeit zu verbessern.
• Vermeide es, zu viele visuelle Effekte zu verwenden, da dies ablenken kann.

Hinzufügen von Attributen zum

-Element

Neben den HTML-Standardattributen wie id, class und style kannst du dem <ul>-Element weitere Attribute hinzufügen, um dessen Verhalten anzupassen. Hier sind einige der gängigsten Attribute:

Typattribut (type)

Mit dem type-Attribut kannst du den Aufzählungspunkt-Stil deiner ungeordneten Liste festlegen. Die folgenden Werte stehen zur Verfügung:

• disc: Fügt einen gefüllten Kreis als Aufzählungspunkt hinzu (Standard).
• circle: Fügt einen leeren Kreis als Aufzählungspunkt hinzu.
• square: Fügt ein leeres Quadrat als Aufzählungspunkt hinzu.
• none: Entfernt den Aufzählungspunkt vollständig.

Beispiel:

<ul type="square">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Startattribut (start)

Mit dem start-Attribut kannst du die Nummerierung des ersten Elements in deiner ungeordneten Liste festlegen. Dies ist nützlich, wenn du eine Liste mit Elementen fortsetzen möchtest, die in einer anderen Liste nummeriert sind.

Beispiel:

<ul start="5">
  <li>Element 5</li>
  <li>Element 6</li>
  <li>Element 7</li>
</ul>

Kompaktattribut (compact)

Das compact-Attribut weist den Browser an, die Liste in einer kompakteren Form darzustellen, wodurch der Abstand zwischen den Elementen verringert wird.

Beispiel:

<ul compact>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Verwendung von <li> innerhalb von <ul>

Jedes Element innerhalb einer ungeordneten Liste wird als Listenelement (engl. List Item) bezeichnet und mit dem <li>-Tag definiert. Dies sind die Bausteine der Liste und enthalten den eigentlichen Text oder Inhalt, den du auflisten möchtest.

Hinzufügen von Listenelementen

Um ein Listenelement hinzuzufügen, musst du es innerhalb der öffnenden und schließenden <ul>-Tags verschachteln:

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Nesting von Listenelementen

Du kannst Listenelemente auch innerhalb anderer Listenelemente verschachteln, um Unterlisten zu erstellen. Dies ist nützlich, wenn du eine hierarchische Struktur erstellen möchtest:

<ul>
  <li>Element 1
    <ul>
      <li>Unterpunkt 1</li>
      <li>Unterpunkt 2</li>
    </ul>
  </li>
  <li>Element 2</li>
</ul>

Attribute für <li>

Dem <li>-Tag können verschiedene Attribute zugewiesen werden, um das Erscheinungsbild und das Verhalten des Listenelements zu ändern, darunter:

• value: Legt einen numerischen Wert für das Listenelement fest (wird nicht gerendert)
• type: Legt den Aufzählungsstil für das Listenelement fest (z. B. "disc", "square", "circle")
• id: Legt eine eindeutige ID für das Listenelement fest

Best Practices

• Verwende Listenelemente nur für verwandten Inhalt.
• Vermeide zu viele Verschachtelungen von Listen, da dies die Lesbarkeit beeinträchtigen kann.
• Achte darauf, dass der Inhalt der Listenelemente klar und prägnant ist.
• Überlege dir, Aufzählungstypen zu verwenden, die zum Inhalt passen (z. B. Zahlen für einen sequenziellen Ablauf).

Cross-Browser-Kompatibilität und Barrierefreiheit

Das

-Element wird von allen gängigen Webbrowsern unterstützt, einschließlich Chrome, Edge, Firefox, Opera und Safari. Die Darstellung von ungeordneten Listen kann jedoch je nach Browser leicht variieren. Beispielsweise können die Standard-Aufzählungszeichen in einigen Browsern als Kreise oder Quadrate dargestellt werden.

Um sicherzustellen, dass deine ungeordneten Listen in allen Browsern konsistent dargestellt werden, solltest du CSS verwenden, um das Aussehen anzupassen. Weitere Informationen zur Anpassung des Aussehens von ungeordneten Listen findest du im Abschnitt "Anpassen des Aussehens einer ungeordneten Liste".

Barrierefreiheit

Ungeordnete Listen sollten barrierefrei sein, damit sie von allen Benutzern, einschließlich Benutzern mit Behinderungen, leicht zugänglich sind. Hier sind einige Tipps, um die Barrierefreiheit deiner ungeordneten Listen zu gewährleisten:

• Verwende ARIA-Rollen: Verwende die ARIA-Rolle "list" für das
  -Element und die ARIA-Rolle "listitem" für jedes
  • -Element. Dadurch können Hilfstechnologien die Liste als strukturiertes Element erkennen und ankündigen.
  • Stelle Alt-Text bereit: Wenn du Bilder in deine Aufzählungspunkte einfügst, stelle alternativen Text bereit, um Benutzern mitzuteilen, was das Bild darstellt.
  • Verwende semantische Überschriften: Wenn du Überschriften innerhalb deiner ungeordneten Liste verwendest, verwende semantische HTML-Elemente wie

    oder

    , um ihre Bedeutung anzugeben.

  • Verwende genügend Kontrast: Stelle sicher, dass der Kontrast zwischen der Textfarbe und der Hintergrundfarbe deiner ungeordneten Liste groß genug ist, damit sie für Personen mit Sehbehinderungen leicht lesbar ist.

  Durch die Befolgung dieser Tipps kannst du sicherstellen, dass deine ungeordneten Listen sowohl für normale Benutzer als auch für Benutzer mit Behinderungen zugänglich sind.

  Tipps zur Verwendung des

  -Elements in HTML

  Bei der Arbeit mit dem <ul>-Element gibt es eine Reihe von Tipps, die dir helfen können, eine effektive und ansprechende Liste zu erstellen:

  Semantik beachten

  Verwende <ul> ausschließlich für ungeordnete Listen. Verwende <ol> für Listen, in denen die Reihenfolge von Bedeutung ist.

  Abstand einhalten

  Um deine Liste übersichtlicher zu gestalten, füge ausreichend Abstand zwischen den Elementen ein. Dies kann durch die CSS-Eigenschaft margin erreicht werden.

  Lesbarkeit verbessern

  Verwende Kurzformate für Elemente, wenn dies angebracht ist. Beispielsweise kannst du "z. B." anstelle von "zum Beispiel" verwenden.

  Barrierefreiheit berücksichtigen

  Stelle sicher, dass deine Liste für Benutzer zugänglich ist, die Bildschirmlesegeräte verwenden. Füge die Eigenschaft aria-label zum <ul>-Element hinzu, um eine aussagekräftige Beschreibung der Liste bereitzustellen.

  Stilkonsistenz beibehalten

  Verwende CSS, um ein einheitliches Erscheinungsbild für alle ungeordneten Listen auf deiner Website zu gewährleisten. Beachte die folgenden Eigenschaften:

  • list-style-type: Legt den Aufzählungspunkttyp fest.
  • list-style-position: Legt die Position des Aufzählungspunkts fest.
  • list-style-image: Legt ein benutzerdefiniertes Bild für Aufzählungspunkte fest.

  Listen verschachteln

  Du kannst ungeordnete Listen verschachteln, um Unterlisten zu erstellen. Achte jedoch darauf, dass du die Verschachtelungsebenen nicht übertreibst.

  Listen mit Bildern aufwerten

  Verwende die CSS-Eigenschaft list-style-image, um Aufzählungspunkte mit Bildern zu ersetzen. Dies kann eine ansprechende und visuelle Möglichkeit sein, Informationen zu präsentieren.

  Best Practices für die Verwendung von ungeordneten Listen

  Korrekte Verschachtelung

  Verwende

  nur für ungeordnete Listen. Vermeide es,
  innerhalb von
  oder
  1. zu verschachteln. Dies kann zu Darstellungsproblemen in verschiedenen Browsern führen.

     Entsprechende Aufzählungspunkte

     Wähle Aufzählungspunkte, die zum Inhalt passen. Für Aufgabenlisten eignen sich beispielsweise Kontrollkästchen oder Kreise. Für wichtige Punkte können Punkte oder Pfeile verwendet werden.

     Klartext-Links

     Verwende Klartext-Links anstelle von anklickbaren Aufzählungspunkten. Dies verbessert die Barrierefreiheit für Nutzer mit Screenreadern.

     Kurz und prägnant

     Beschränke die Anzahl der Elemente in einer ungeordneten Liste. Lange Listen können unübersichtlich werden und die Lesbarkeit beeinträchtigen.

     Konsistenz

     Verwende innerhalb einer Website konsistente Aufzählungspunkte und Stile für ungeordnete Listen. Dies schafft ein einheitliches und professionelles Erscheinungsbild.

     Semantische Verwendung

     Verwende ungeordnete Listen für ihre beabsichtigte Funktion. Verwende keine

     -Elemente zur Formatierung oder zum Layout. Dies kann zu semantischen Fehlern und Problemen mit der Barrierefreiheit führen.

     Barrierefreiheit

     Stelle sicher, dass ungeordnete Listen für Nutzer mit Behinderungen zugänglich sind. Vermeide es, Bilder oder komplexen Code für Aufzählungspunkte zu verwenden. Verwende stattdessen

     • -Elemente mit ARIA-Attributen.

       Browserkompatibilität

       Teste deine ungeordneten Listen in verschiedenen Browsern, um sicherzustellen, dass sie wie erwartet dargestellt werden. Überprüfe insbesondere die Kompatibilität mit älteren Browsern.

       Ähnliche Beiträge:

       1. HTML-Tabellen: Ein umfassender Leitfaden zur Erstellung und Verwendung
       2. HTML-Code: Grundlagen für Webentwickler
       3. Der HTML-Button: Alles, was Entwickler wissen müssen
       4. HTML-Links: Der ultimative Leitfaden zur Vernetzung Ihrer Webseiten