Diesen Artikel teilen
Infos zum Artikel
Artikel-Thema: Ungeordnete Liste mit HTML und dem ul-Tag
Beschreibung: Mit dem 🌍 ul-Tag gelingen in HTML ungeordnete ✅ Aufzählungslisten von Fakten, die die Besucher der Webseite schnell erfassen können.
Die ungeordnete Liste ist eine Aufzählungsliste, mit der in einer HTML-Seite Fakten in Listenform präsentiert werden können. Das können die Zutaten für ein Kochrezept ebenso sein wie die technischen Voraussetzungen für die Hardware, wenn man sich ein neues Computerspiel kaufen möchte.
Ungeordnet ist die Liste deshalb, weil sie zum Unterschied der geordneten Liste, die es auch gibt und die nummeriert ist, keine Nummerierung gibt. Was man vorne stehen haben möchte, entscheidet man beim Schreiben der Informationen und jeder Punkt hat das gleiche Aussehen.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
Im ersten Beispiel wird eine sogenannte ungeordnete Liste erzeugt, daher auch der ul-Befehl (steht für unordered list - ungeordnete Liste). Ihm folgen die li-Tags, die für jeweils einen Unterpunkt stehen. Diese Unterpunkte könnte man noch weiter unterteilen, sodass die Liste mehrere Ebenen erhält.
Die Liste könnte mit CSS besser formatiert werden, beispielsweise die Abstände nach oben, zum linken Rand oder zwischen den einzelnen Aufzählungspunkten lässt sich anpassen.
Zusätzlich ist es möglich, die Liste zu verschachteln. Im zweiten Beispiel sieht man eine solche Liste (ungeordnet ist etwas unglücklich, denn sie ist sehr strukturiert), bei der der erste Unterpunkt nicht abgeschlossen (/li) wurde, sondern eine zweite Liste integriert wurde. Das Ergebnis sieht so aus:
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
Im Gegensatz zur nummerierten Liste, die mit dem ol-Tag herstellbar ist, hat man keine Probleme mit der Nummerierung. Achten sollte man trotzdem darauf, es mit der Verschachtelung nicht zu übertreiben, weil die Übersicht sowohl im Skript als auch bei der Ansicht auf der Webseite schnell verloren gehen kann. Hilfreich ist dabei aber das automatisch veränderte Symbol für die untere Ebene, wobei man hier wieder mit CSS Formatierungsänderungen vornehmen könnte.
Die große Herausforderung besteht darin, dass man darauf achtet, die Liste auch entsprechend richtig aufzubauen. Jeder Eintrag beginnt mit dem li-Tag und wird mit /li geschlossen. Fehlt ein /li, dann verschiebt sich die ganze Liste, wobei das Probleme viele Redakteure gar nicht kennen.
Sie geben nämlich in einem HTML-Editor die Liste ein und zwar den Text wie in Word & Co. und die Tags übernimmt der Editor automatisch, sodass das Problem gar nicht bewusst wird.
Die Aufzählungslisten sind neben den Tabellen eine weitere Möglichkeit, um Informationen gefällig aufzubereiten. Mit wenigen Worten kann man Fakten aneinanderreihen, wobei es die ungeordnete Liste mit dem gleichen Listensymbol gibt und die geordnete Liste mit einer Nummerierung. Stets dabei ist der li-Tag, mit dem jeder Eintrag definiert wird.
Themenseiten
Artikel-Thema: Ungeordnete Liste mit HTML und dem ul-Tag
Beschreibung: Mit dem 🌍 ul-Tag gelingen in HTML ungeordnete ✅ Aufzählungslisten von Fakten, die die Besucher der Webseite schnell erfassen können.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel