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

Was ist das HTML `<li>`-Tag?

Das <li>-Tag in HTML steht für "Listenelement" und wird verwendet, um Elemente innerhalb einer Liste zu erstellen. Listen sind strukturelle Elemente, mit denen du Inhalte in einer organisierten und lesbaren Weise präsentierst.

Verwendung des `<li>`-Tags

Das <li>-Tag wird verwendet, um einzelne Elemente einer ungeordneten Liste (<ul>), einer geordneten Liste (<ol>) oder einer Definitionsliste (<dl>) zu definieren.

Funktionen des `<li>`-Tags

Das <li>-Tag bietet mehrere Funktionen:

Strukturierung von Inhalten: Es hilft dir dabei, Inhalte logisch zu organisieren und zu strukturieren.
Verbesserte Lesbarkeit: Listen erleichtern das Lesen und Verstehen von Informationen.
Suche und Zugänglichkeit: Listen verbessern die Auffindbarkeit und Zugänglichkeit von Inhalten für Suchmaschinen und Nutzer mit Bildschirmlesegeräten.

Verwendung des

-Tags

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:

Eins
Zwei
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.

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

-Tags

Jedes

-Tag kann mit verschiedenen Attributen versehen werden, die sein Verhalten und Aussehen steuern.

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

-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.

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
  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.
  
  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 (
- ,

vorheriger Artikel

nächster Artikel