Was ist das HTML
Das HTML <li>
-Tag (Listenelement) ist ein Inline-Element, das zur Erstellung von Listenelementen in HTML-Dokumenten verwendet wird. Es ist Teil der HTML-Spezifikation und wird in Kombination mit anderen listenbezogenen Tags wie <ul>
(ungeordnete Liste) und <ol>
(geordnete Liste) verwendet.
Zweck und Verwendung von Listenelementen
Listenelemente werden verwendet, um Inhalte in einer logisch organisierten Weise zu gruppieren und anzuzeigen. Du kannst sie verwenden, um:
- Aufzählungen erstellen, wie z. B. Einkaufslisten oder Aufgabenlisten.
- Definitionen und Begriffe auflisten, wie z. B. in Glossaren.
- Hierarchische Strukturen erstellen, wie z. B. Inhaltsverzeichnisse oder Menüelemente.
- Navigationsmenüs mit mehreren Unterebenen erstellen.
Zweck und Verwendung von Listenelementen
Listenelemente mit dem HTML-Tag <li>
dienen in erster Linie dazu, strukturierte Listen zu erstellen. Diese Listen können verschiedene Zwecke erfüllen, von der Auflistung von Aufgaben über die Darstellung von Menüoptionen bis hin zur Bereitstellung von Produktinformationen.
Durch die Verwendung von <li>
kannst du:
- Klarheit und Lesbarkeit: Listen können komplexe Informationen in leicht verständliche Abschnitte unterteilen.
- Organisation: Listen helfen dir, Elemente in einer logischen Reihenfolge anzuordnen, was die Navigation und das Scannen erleichtert.
- Visuelle Trennung: Listen fügen Abstand zwischen Elementen hinzu, was ein visuell ansprechenderes Erlebnis bietet.
- Zugänglichkeit: Listen können von Screenreadern und anderen assistiven Technologien erkannt werden, was die Barrierefreiheit deiner Webseite verbessert.
Arten von Listen mit <li>
Es gibt zwei Haupttypen von Listen, die mit <li>
erstellt werden können:
Geordnete Listen
Geordnete Listen werden mit dem Tag <ol>
erstellt und nummerieren die Listenelemente sequenziell. Sie eignen sich hervorragend für die Darstellung von Schritten, Anweisungen oder Ranglisten.
Ungeordnete Listen
Ungeordnete Listen werden mit dem Tag <ul>
erstellt und verwenden Aufzählungspunkte (z. B. Aufzählungszeichen oder Kreise) für die Listenelemente. Sie werden häufig zum Auflisten von Vorteilen, Merkmalen oder verwandten Elementen verwendet.
Beispiele für die Verwendung von <li>
Beispiel 1: Auflistung von Zielen:
<ul>
<li>Ziel A erreichen</li>
<li>Ziel B erreichen</li>
<li>Ziel C erreichen</li>
</ul>
Beispiel 2: Darstellung von Menüoptionen:
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
Beispiel 3: Bereitstellung von Produktinformationen:
<ul>
<li><strong>Produktname:</strong> XYZ</li>
<li><strong>Preis:</strong> $19,99</li>
<li><strong>Funktionen:</strong>
<ul>
<li>Funktion 1</li>
<li>Funktion 2</li>
<li>Funktion 3</li>
</ul>
</li>
</ul>
Durch die Verwendung des <li>
-Tags kannst du personalisierte und ansprechende Listen erstellen, die die Nutzererfahrung und die Zugänglichkeit deiner Webseite verbessern.
So erstellst du geordnete und ungeordnete Listen mit <li>
Listen sind ein wesentlicher Bestandteil vieler Websites und Dokumente. Sie ermöglichen es dir, Informationen klar und übersichtlich zu organisieren. Mit dem <li>
-Tag kannst du sowohl geordnete als auch ungeordnete Listen erstellen.
Geordnete Listen
Geordnete Listen werden verwendet, um eine Reihenfolge oder Hierarchie anzuzeigen. Um eine geordnete Liste zu erstellen, verwendest du das <ol>
-Tag (für "ordered list"). Jedes Listenelement wird mit dem <li>
-Tag definiert.
<ol>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ol>
Dies erzeugt eine Liste mit nummerierten Elementen, die in der angegebenen Reihenfolge angezeigt werden.
Ungeordnete Listen
Ungeordnete Listen werden verwendet, um eine Sammlung von Elementen ohne bestimmte Reihenfolge anzuzeigen. Um eine ungeordnete Liste zu erstellen, verwendest du das <ul>
-Tag (für "unordered list"). Jedes Listenelement wird wieder mit dem <li>
-Tag definiert.
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ul>
Dies erzeugt eine Liste mit Aufzählungszeichen (normalerweise kleine Kreise oder Quadrate) für jedes Element.
Tipps zur Wahl des richtigen Listentyps
Wähle den Listentyp basierend auf dem Zweck deiner Liste. Verwende geordnete Listen, wenn die Reihenfolge der Elemente wichtig ist, z. B. für eine Schritt-für-Schritt-Anleitung. Verwende ungeordnete Listen, wenn die Reihenfolge keine Rolle spielt, z. B. für eine Liste von Merkmalen oder Interessen.
Nesting und Hierarchie von Listenelementen
Mithilfe der Verschachtelung kannst du Listen mit mehreren Ebenen erstellen und so Hierarchien und Unterpunkte darstellen. Dies ist besonders nützlich, wenn du komplexe oder verschachtelte Informationen organisieren möchtest.
Verschachtelte Listen
Um eine verschachtelte Liste zu erstellen, füge einfach ein weiteres
<ul>
<li>Hauptpunkt</li>
<li>
Unterpunkt 1
<ul>
<li>Unterpunkt 1.1</li>
<li>Unterpunkt 1.2</li>
</ul>
</li>
<li>Hauptpunkt 2</li>
</ul>
Hierarchische Listen
Durch Verschachtelung kannst du Listen mit beliebig vielen Ebenen erstellen, um komplexe Hierarchien zu bilden. Dies kann beispielsweise zur Darstellung einer Produktkategorie und ihrer Unterkategorien verwendet werden.
<ul>
<li>Kategorie 1</li>
<li>
Kategorie 2
<ul>
<li>Unterkategorie 2.1</li>
<li>Unterkategorie 2.2</li>
</ul>
</li>
<li>
Kategorie 3
<ul>
<li>Unterkategorie 3.1</li>
<li>
Unterkategorie 3.2
<ul>
<li>Unterunterkategorie 3.2.1</li>
<li>Unterunterkategorie 3.2.2</li>
</ul>
</li>
</ul>
</li>
</ul>
Tipps zur Verschachtelung
- Verwende Verschachtelung nur, wenn es notwendig ist, um die Struktur deiner Inhalte zu verdeutlichen.
- Übertreibe es nicht mit der Verschachtelung, da dies die Lesbarkeit beeinträchtigen kann.
- Indentiere verschachtelte Listen mit Leerzeichen oder Tabulatoren, um die Hierarchie visuell darzustellen.
- Verwende das
type
-Attribut, um die Verschachtelungsebenen zu unterscheiden (z. B.type="A"
für die Hauptliste,type="B"
für Unterlisten und so weiter). - Erwäge die Verwendung des
display
-Attributs, um verschachtelte Listen auf bestimmte Weise anzuzeigen (z. B.display: compact
für eine kompakte Anzeige oderdisplay: block
für eine Blockanzeige).
Attribute des
Neben den grundlegenden Eigenschaften bietet das <li>
-Tag zusätzliche Attribute, mit denen du deine Listenelemente weiter anpassen kannst.
value-Attribut
Das value-Attribut weist einem Listenelement einen numerischen Wert zu. Dieser Wert wird verwendet, wenn die Liste nummeriert ist. Wenn du beispielsweise eine geordnete Liste erstellen möchtest, in der das erste Element den Wert 5 hat, würdest du Folgendes verwenden:
<ol>
<li value="5">Erstes Element</li>
<li>Zweites Element</li>
</ol>
type-Attribut
Das type-Attribut ermöglicht es dir, die Art der Markierung für ein Listenelement anzugeben. Dies ist besonders nützlich, wenn du eine geordnete Liste mit benutzerdefinierten Aufzählungszeichen erstellen möchtest. Mögliche Werte für type sind:
- disc: Standardpunkt (●)
- circle: Kreis (○)
- square: Quadrat (■)
- a: Kleinbuchstabe a)
- A: Großbuchstabe A)
- i: Kleinbuchstabe i)
- I: Großbuchstabe I)
- none: Keine Aufzählung
Beispielsweise kannst du eine geordnete Liste mit römischen Ziffern erstellen, indem du Folgendes verwendest:
<ol type="i">
<li>Erstes Element</li>
<li>Zweites Element</li>
</ol>
Weitere Attribute
Zusätzlich zu value und type bietet das <li>
-Tag weitere Attribute, die dir Flexibilität bei der Anpassung deiner Listen bieten:
- class: Mit diesem Attribut kannst du eine CSS-Klasse für das Listenelement zuweisen.
- dir: Gibt die Textrichtung für das Listenelement an (ltr für links-nach-rechts oder rtl für rechts-nach-links).
- id: Weist dem Listenelement eine eindeutige ID zu.
- lang: Gibt die Sprache des Inhalts im Listenelement an.
- style: Ermöglicht die Anwendung von Inline-CSS-Stilen direkt auf das Listenelement.
- tabindex: Definiert die Tabbing-Reihenfolge für das Listenelement.
Tipps für die Verwendung von
Barrierefreiheit
- Verwende beschreibenden Text: Sorge dafür, dass der Text jedes Listenelements aussagekräftig und informativ ist, um Benutzern mit Sehbehinderungen den Inhalt zu vermitteln.
- Vermeide Abkürzungen und Akronyme: Erkläre unbekannte Begriffe oder erkläre Abkürzungen, um die Verständlichkeit für alle zu verbessern.
- Verwende unterschiedliche Listenebenen: Unterteile lange Listen in kleinere Unterlisten, um die Navigation und das Verständnis zu erleichtern.
- Kontrastiere Farben: Stelle sicher, dass der Text in der Liste einen ausreichenden Kontrast zum Hintergrund hat, um die Lesbarkeit zu verbessern.
-
Benutze ARIA-Attribute: Verwende ARIA-Attribute wie
aria-label
undaria-labelledby
, um zusätzlichen Kontext für Bildschirmlesegeräte bereitzustellen.
SEO
- Optimierter Ankertext: Verwende beschreibenden Ankertext in den Listenelementen für Links, um Suchmaschinen beim Indexieren und Bewerten deines Inhalts zu unterstützen.
- Erstelle semantische Listen: Verwende Listenelemente, um verwandte oder sequentielle Informationen zu gruppieren, um die Relevanz und die Organisation deiner Seite zu verbessern.
- Vermeide doppelten Inhalt: Stelle sicher, dass der Inhalt in den Listenelementen nicht an anderer Stelle auf der Seite wiederholt wird, um doppelten Inhalt zu vermeiden.
- Verwende eindeutige Überschriften: Erstelle eindeutige Überschriften für deine Listen, die den Inhalt der Listenelemente genau beschreiben.
- Optimierte Bildbeschreibungen: Wenn Listenelemente Bilder enthalten, verwende beschreibende Alt-Texte, um sowohl die Barrierefreiheit als auch die SEO zu verbessern.
Probleme und Lösungen im Zusammenhang mit dem
Auch wenn das
Fehlende Elemente
Wenn du eine Liste mit
<ul>
(ungeordnete Liste) oder <ol>
(geordnete Liste). Diese Elemente unterstützen implizite Listenelemente, sodass du Elemente hinzufügen kannst, ohne sie explizit zu definieren.
Barrierefreiheitsprobleme
Listenelemente können für Benutzer mit Behinderungen eine Herausforderung darstellen. Sie sind möglicherweise nicht mit Bildschirmlesegeräten kompatibel oder können von Benutzern mit eingeschränkter Feinmotorik nur schwer ausgewählt werden. Um die Barrierefreiheit zu verbessern, solltest du jedem
value
zuweisen. Dies hilft Bildschirmlesegeräten, die Liste korrekt vorzulesen.
SEO-Probleme
Listenelemente können auch SEO-Probleme verursachen, insbesondere wenn sie übermäßig verschachtelt oder mit irrelevanten Inhalten gefüllt sind. Vermeide es, Listen zu erstellen, die nur aus einem Element bestehen, und versuche, die Verschachtelung auf ein oder zwei Ebenen zu beschränken. Verwende aussagekräftige Textinhalte und vermeide es, Listenelemente mit Schlüsselwörtern zu füllen, da dies als Keyword-Stuffing angesehen werden kann.
Inkonsistente Darstellung
Listenelemente können je nach Browser und verwendetem CSS unterschiedlich dargestellt werden. Um eine konsistente Darstellung zu gewährleisten, solltest du CSS-Regeln verwenden, um Stile für Listenelemente festzulegen. Du kannst beispielsweise die Schriftart, Schriftgröße, Farbe und den Abstand von Listenelementen steuern.
Vergleich mit alternativen Listenelementen wie
und
Während das <li>
-Tag speziell für Listenelemente gedacht ist, gibt es alternative Möglichkeiten, Listen in HTML zu erstellen, etwa mit den Tags <dt>
(Begriffsdefinition) und <dd>
(Begriffsdefinition).
Unterschiede in Zweck und Verwendung
-
<li>
: Wird für Listenelemente in geordneten und ungeordneten Listen verwendet. -
<dt>
und<dd>
: Werden für Begriffslisten (auch bekannt als Definitionenlisten) verwendet, bei denen jeder Begriff (<dt>
) mit einer zugehörigen Definition (<dd>
) verknüpft ist.
Unterschiede in der Darstellung
-
<li>
-Elemente werden typischerweise als Aufzählungspunkte oder Nummern dargestellt. -
<dt>
-Elemente werden in der Regel fett dargestellt, während<dd>
-Elemente eingerückt werden.
Anwendungsfälle
- Verwende
<li>
für Listen mit numerischen oder Aufzählungspunkten, die nicht mit Begriffen verknüpft sind. - Verwende
<dt>
und<dd>
für Begriffslisten, in denen du Begriffe definieren oder zusätzliche Informationen liefern möchtest.
Barrierefreiheit
- Beide
<li>
und<dt>/<dd>
-Paare unterstützen ARIA-Rollen, um die Barrierefreiheit für Screenreader zu verbessern. - Stelle sicher, dass du semantisch korrekte Tags verwendest, um eine angemessene Interpretation durch Hilfstechnologien zu gewährleisten.
Tipps für die Verwendung
- Vermeide die Verwendung von
<li>
in unstrukturierten Listen, die eher wie Absätze aussehen. - Verwende
<dt>
und<dd>
nur für echte Begriffslisten. - Nest
<li>
-Elemente nicht zu tief, da dies die Lesbarkeit beeinträchtigen kann.