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
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
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
- -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
- 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.
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
- ist ein Element eines Listenelements,
- erstellt eine nummerierte Liste und
-
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>
-TagZusä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).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
odernone
.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.
- -Tag
- 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
-
- ) für den jeweiligen Zweck.
- ist ein Element eines Listenelements,
- -Tag innerhalb eines bestehenden