Die HTML-Tag-Liste: Alles, was Sie über <li> wissen müssen

Der HTML-Tag <li> ist ein Element zum Erstellen von Listenelementen, die entweder in einer ungeordneten (<ul>) oder einer geordneten (<ol>) Liste enthalten sind. Mit <li> kannst du einzelne Einträge in diesen Listen definieren.

Listenelemente in `ul`

Wenn du eine ungeordnete Liste verwendest (<ul>), werden die Listenelemente als Aufzählungspunkte angezeigt. Jeder Aufzählungspunkt wird mit dem <li>-Tag definiert. Du kannst beispielsweise die folgende HTML-Struktur verwenden, um eine ungeordnete Liste von Früchten zu erstellen:

<ul>
  <li>Apfel</li>
  <li>Orange</li>
  <li>Banane</li>
</ul>

Dies erzeugt folgende Liste:

• Apfel
• Orange
• Banane

Listenelemente in `ol`

Bei Verwendung einer geordneten Liste (<ol>) werden die Listenelemente als nummerierte Einträge angezeigt. Auch hier definierst du jeden nummerierten Eintrag mit dem <li>-Tag. Hier ist ein Beispiel für eine geordnete Liste von Zahlen:

<ol>
  <li>Eins</li>
  <li>Zwei</li>
  <li>Drei</li>
</ol>

Dies erzeugt folgende Liste:

1. Eins
2. Zwei
3. Drei

Verschachtelte Listen erstellen

Du kannst <li>-Tags auch verwenden, um verschachtelte Listen zu erstellen. Dies ermöglicht es dir, Unterlisten innerhalb von Listen zu erstellen. Um eine verschachtelte Liste zu erstellen, musst du einfach ein <ul>- oder <ol>-Tag innerhalb eines <li>-Tags verschachteln.

Zusätzliche Details erhältst du bei: HTML-Dokumente: Fundamente des Webs

Hier ist ein Beispiel für eine verschachtelte Liste:

<ul>
  <li>Früchte</li>
    <ul>
      <li>Apfel</li>
      <li>Orange</li>
    </ul>
  <li>Gemüse</li>
    <ul>
      <li>Karotte</li>
      <li>Zwiebel</li>
    </ul>
</ul>

Dies erzeugt folgende verschachtelte Liste:

• Früchte
  • Apfel
  • Orange
• Gemüse
  • Karotte
  • Zwiebel

Attribute des

Jedes

h3 Typattribute

• type: Legt den Typ der Liste fest. Kann entweder "disc", "square", "circle" oder "none" sein.
• value: Definiert den Startwert für nummerierte Listen.

h3 Linkattribute

• href: Gibt die URL des Ziels eines Hyperlinks an.
• target: Legt fest, wo der Link geöffnet wird. Kann "_blank" (neues Fenster) oder "_self" (gleiches Fenster) sein.

h3 Anzeigeattribute

• class: Weist eine CSS-Klasse zu, mit der du das Aussehen des Listenelements anpassen kannst. Beispielsweise kannst du die Schriftfarbe ändern oder eine Hintergrundfarbe hinzufügen.
• id: Weist eine eindeutige ID zu, mit der du das Listenelement mithilfe von CSS oder JavaScript gezielt ansprechen kannst.
• style: Beinhaltet inline CSS-Regeln zum Stylen des Listenelements.

h3 Beachte

• Attribute müssen immer innerhalb von Anführungszeichen stehen.
• Die Validierung deines HTML-Codes ist wichtig, um sicherzustellen, dass er den Webstandards entspricht.
• Weitere Informationen zu den Attributen des
• -Tags findest du in der HTML-Referenz von MDN.

Ul und Ol: Listen in HTML

HTML bietet zwei primäre Tags zum Erstellen von Listen: <ul> ( ungeordnete Liste) und <ol> (geordnete Liste).

Ungeordnete Listen: <ul>

Ungeordnete Listen enthalten Elemente, die in keiner bestimmten Reihenfolge aufgeführt sind. Jedes Element wird durch das <li>-Tag (Listenelement) dargestellt und mit einem Aufzählungspunkt (normalerweise ein kleiner Kreis oder ein Strich) versehen.

Geordnete Listen: <ol>

Geordnete Listen enthalten Elemente, die in einer sequenziellen Reihenfolge (numerisch oder alphabetisch) aufgeführt sind. Jedes Element wird durch das <li>-Tag dargestellt und mit einer Zahl oder einem Buchstaben versehen.

Verschachtelte Listen

Du kannst verschachtelte Listen erstellen, indem du <ul>- oder <ol>-Tags innerhalb anderer <ul>- oder <ol>-Tags verwendest. Dies ermöglicht es dir, komplexe Hierarchien von Listenelementen zu erstellen.

Beispiel: Verschachtelte Listen

<ul>
  <li>Element 1</li>
  <li>Element 2
    <ul>
      <li>Unterpunkt 2.1</li>
      <li>Unterpunkt 2.2</li>
    </ul>
  </li>
  <li>Element 3</li>
</ul>

<!-- Erzeugt eine Liste mit drei Elementen, wobei das zweite Element eine verschachtelte Liste mit zwei Unterpunkten enthält. -->

Tipps für die Verwendung von <ul> und <ol>

• Verwende<ul> für ungeordnete Listen und<ol> für geordnete Listen.
• Beginne jedes Listenelement mit einem <li>-Tag.
• Verschachtele Listen, um Hierarchien zu erstellen.
• Verwende CSS, um das Erscheinungsbild deiner Listen anzupassen (z. B. Aufzählungspunktstil, Schriftart).

Häufige Fehler bei der Verwendung von <ul> und <ol>

• Verwendung von <ul> für geordnete Listen.
• Vergessen, <li>-Tags für jedes Listenelement zu verwenden.
• Unsachgemäße Verschachtelung von Listen.
• Inkonsistente Verwendung von Aufzählungspunktstilen.

Alternativen zu <ul> und <ol>

• Bootstrap-Listenkomponenten: Bietet stilisierte Listen mit zusätzlichen Funktionen.
• React-Virtualized-Windowed-Lists: Ermöglicht die Erstellung großer Listen mit optimierter Leistung.

Verschachtelte Listen

Manchmal benötigst du mehrere Ebenen von Listenelementen, um komplexe Informationen zu strukturieren. Mit HTML kannst du verschachtelte Listen erstellen, um hierarchische Daten darzustellen.

Erstellen verschachtelter Listen

Um eine verschachtelte Liste zu erstellen, fügst du einfach einen

- oder

-Tag innerhalb eines bestehenden
• -Elements ein. So kannst du beispielsweise eine verschachtelte Liste mit Aufgaben und Unteraufgaben erstellen:

  <ul>
    <li>Aufgabe 1
      <ul>
        <li>Unteraufgabe 1</li>
        <li>Unteraufgabe 2</li>
      </ul>
    </li>
    <li>Aufgabe 2</li>
  </ul>
  

  Ebenen der Verschachtelung

  Du kannst beliebig viele Ebenen von Listen verschachteln. Allerdings ist es ratsam, die Verschachtelungstiefe auf ein Minimum zu beschränken, um die Lesbarkeit zu gewährleisten.

  Weitere Informationen findest du unter: HTML-Code-Tag: Das grundlegende Element der Webentwicklung

  Tipps für die Verwendung verschachtelter Listen

  • Verwende die Verschachtelung nur, wenn sie zur Strukturierung komplexer Informationen erforderlich ist.
  • Kennzeichne die Ebenen deutlich, indem du unterschiedliche Aufzählungszeichen oder Nummerierungen verwendest.
  • Überprüfe die Verschachtelungstiefe, um die Lesbarkeit zu verbessern.
  • Nutze semantische HTML-Elemente wie
    und
    , um die Struktur und Bedeutung deiner Listen zu verdeutlichen.

  Beispiele für die Verwendung von

• Wenn du eine Liste mit Aufzählungspunkten in deinem HTML-Code erstellen möchtest, verwendest du das

• -Tag. Es fungiert als Listenelement und enthält den Text für jeden Aufzählungspunkt. Hier sind einige Beispiele, wie du
• verwenden kannst:

  Einfache Aufzählungsliste

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

  Aufzählungsliste mit Verschachtelung

  <ul>
    <li>Element 1
      <ul>
        <li>Element 1.1</li>
        <li>Element 1.2</li>
      </ul>
    </li>
    <li>Element 2
      <ul>
        <li>Element 2.1</li>
        <li>Element 2.2</li>
      </ul>
    </li>
  </ul>
  

  Aufzählungsliste mit Bildern

  <ul>
    <li><img src="bild.jpg" alt="Bild 1"></li>
    <li><img src="bild2.jpg" alt="Bild 2"></li>
    <li><img src="bild3.jpg" alt="Bild 3"></li>
  </ul>
  

  Aufzählungsliste mit Links

  <ul>
    <li><a href="link1.html">Link 1</a></li>
    <li><a href="link2.html">Link 2</a></li>
    <li><a href="link3.html">Link 3</a></li>
  </ul>
  

  Tipps und Best Practices für die Verwendung von

• Um die Effektivität deiner Listen zu maximieren, beachte die folgenden Tipps und Best Practices:

  Verwende klar formulierte Listenelemente

  Stelle sicher, dass deine Listenelemente prägnant und leicht verständlich sind. Vermeide lange oder komplexe Formulierungen, die schwer zu erfassen sind.

  Konsistenz beibehalten

  Verwende innerhalb einer Liste einen einheitlichen Stil für deine Listenelemente. Dies sorgt für ein visuell ansprechendes und organisiertes Aussehen.

  CSS-Styling verwenden

  Zögere nicht, CSS-Styling zu verwenden, um das Aussehen deiner Listen zu verbessern. Du kannst Farbe, Schriftart und andere Stilelemente anpassen, um sie an das Design deiner Website anzupassen.

  Barrierefreiheit berücksichtigen

  Stelle sicher, dass deine Listen für alle Benutzer zugänglich sind, einschließlich derer mit Sehbehinderungen. Verwende ARIA-Attribute, um Bildschirmlesern Kontext und Bedeutung zu vermitteln.

  Lange Listen vermeiden

  Wenn deine Liste sehr lang ist, erwäge, sie in kleinere Unterlisten aufzuteilen. Dies macht es für die Benutzer einfacher, die Informationen zu überblicken und zu verarbeiten.

  Mehr dazu erfährst du in: HTML in Text konvertieren: Einfach gemacht

  Verschachtelung strategisch verwenden

  Verschachtelte Listen können die Organisation komplexer Inhalte erleichtern. Verwende sie jedoch mit Vorsicht, da zu viele Verschachtelungen die Lesbarkeit beeinträchtigen können.

  Listenelement-Typen wählen

  Verwende das richtige Listenelement-Tag (

• ,
  oder
  ) für den jeweiligen Zweck.
  • ist ein Element eines Listenelements,
    erstellt eine nummerierte Liste und
    erstellt eine ungeordnete Liste.

    Tipps zur Fehlerbehebung

    Wenn du Probleme mit deinen Listen hast, prüfe die Syntax deiner HTML-Tags sorgfältig auf Fehler. Stelle außerdem sicher, dass du die Elemente in der richtigen Reihenfolge verwendest, beginnend mit dem übergeordneten Element.

    Häufige Fehler bei der Verwendung von

    • Bei der Verwendung des

    • -Tags sind dir vielleicht einige häufige Fehler unterlaufen. Hier sind ein paar davon mit Hinweisen, wie du sie vermeiden kannst:

      Vergessen, die ungeordnete oder geordnete Liste zu schließen

      Wenn du eine Liste erstellst, vergiss nicht, sie mit dem entsprechenden Schließ-Tag zu beenden. Andernfalls wird der Browser die Liste möglicherweise nicht korrekt darstellen.

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

      Unsinnige Verschachtelung

      Verschachtelte Listen können hilfreich sein, aber achte darauf, dass sie nicht zu tief verschachtelt sind. Dies kann zu einer unübersichtlichen und schwer lesbaren Struktur führen.

      Verwendung von

    • außerhalb einer Liste

      Das

    • -Tag sollte nur innerhalb einer ungeordneten oder geordneten Liste verwendet werden. Wenn du es außerhalb einer Liste verwendest, wird es möglicherweise nicht wie erwartet dargestellt.

      Verwenden von

    • als Blockelement

      Das

    • -Tag ist ein Inline-Element, d. h. es beginnt nicht in einer neuen Zeile. Wenn du möchtest, dass ein Listenelement in einer neuen Zeile beginnt, musst du es in einen Blockcontainer wie z. B. einen
      - oder

      -Tag einfügen.

      Inkonsistente Verwendung von Aufzählungen und Nummern

      Wenn du sowohl ungeordnete als auch geordnete Listen in einem Dokument verwendest, achte darauf, sie konsequent zu verwenden. Das Mischen von Aufzählungen und Nummern kann verwirrend für den Leser sein.

      Alternativen zum <li>-Tag

      Zusätzlich zum <li>-Tag kannst du auch andere Elemente verwenden, um Listen in HTML zu erstellen:

      <dl> (Definitionslisten)

      Mit <dl> kannst du Definitionslisten erstellen. Dabei wird jeder Begriff in einem <dt>-Tag (Definitionsterm) definiert und jeder entsprechende Definition in einem <dd>-Tag (Definitionsdefinition).

      Für zusätzliche Informationen konsultiere: HTML <dd>: Definitionen und ihre Verwendung

      Beispiel:

      <dl>
        <dt>HTML</dt>
        <dd>Eine Auszeichnungssprache zum Erstellen von Webseiten.</dd>
      
        <dt>CSS</dt>
        <dd>Eine Sprache zum Stylen von Webseiten.</dd>
      </dl>
      

      <menu>

      Das <menu>-Element wird verwendet, um Menüs zu erstellen. Es enthält eine Liste von <li>-Elementen, die Menüpunkte darstellen.

      Beispiel:

      <menu>
        <li><a href="#">Home</a></li>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
      

      Verwendung von CSS

      Du kannst auch CSS verwenden, um Listen zu erstellen. Mit der Eigenschaft list-style-type kannst du den Aufzählungsstil definieren, z. B. disc, square oder none.

      Beispiel:

      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
      </ul>
      
      <style>
      ul {
        list-style-type: square;
      }
      

      Die Wahl der Alternative hängt von deinen spezifischen Anforderungen ab. Wenn du eine einfache Aufzählungsliste benötigst, ist <li> die beste Wahl. Wenn du eine Definitionsliste oder ein Menü benötigst, solltest du <dl> bzw. <menu> verwenden. Wenn du die vollständige Kontrolle über das Erscheinungsbild der Liste wünschst, kannst du CSS verwenden.

      Empfohlene Ressourcen für weitere Informationen zum

    • -Tag

      Online-Ressourcen

      • HTML-Referenz von W3Schools: https://www.w3schools.com/tags/tag_li.asp
      • Bulma-Dokumentation: https://bulma.io/documentation/components/list/
      • Bootstrap-Dokumentation: https://getbootstrap.com/docs/5.2/content/typography/#list-styles

      Bücher und Tutorials

      • HTML for Web Designers von Patrick J. Lynch
      • HTML5-Handbuch von Christian Heilmann
      • Tutorial zur Erstellung verschachtelter Listen mit dem HTML
      • -Tag:
      https://www.tutorialrepublic.com/html-tutorial/html-nested-list.php

      Community-Foren und Stack Overflow

      • Google Groups für HTML-Entwickler: https://groups.google.com/g/google-web-toolkit-contributors
      • HTML-Tag auf Stack Overflow: https://stackoverflow.com/questions/tagged/html-li

      Nützliche Tools

      • HTML-Listengenerator: https://www.freeformatter.com/html-lists/
      • Browser Developer Tools: Inspectiere das HTML-Markup deiner Webseite live und erhalte weitere Informationen über das
      • -Tag.

      Zusätzliche Tipps

      • Abonniere Newsletter oder Blogs, die sich mit Webentwicklung befassen, um über die neuesten Trends und Best Practices in Bezug auf das
      • -Tag informiert zu bleiben.
      • EXPERIMENTIERE mit verschiedenen CSS-Styles, um deine Listen optisch ansprechend zu gestalten.
      • Verwende semantische HTML-Elemente, um die Bedeutung deiner Listen zu verdeutlichen, z. B.
        für ungeordnete Listen und
        für geordnete Listen.