HTML-Listen-Generator

Von einer Liste aus Zeilen zu echtem Markup

Listen sind im Web allgegenwärtig: Navigationsmenüs, Aufzählungen von Funktionen, Schritt-für-Schritt-Anleitungen, Zutatenlisten und Inhaltsverzeichnisse. Die Tags dafür von Hand zu tippen ist mühsam und fehleranfällig, denn jedes Element benötigt sein eigenes li-Element, verschachtelt in einem einzigen ul- oder ol-Container, und es ist leicht, mitten in einer langen Liste ein schließendes Tag zu vergessen. Dieser Generator nimmt Ihnen diese Reibung ab: Sie fügen ein Element pro Zeile ein, und er erstellt für Sie die vollständige, korrekt verschachtelte Struktur.

Das gedankliche Modell lautet: eine Zeile entspricht einem Listenelement. Was auch immer Sie in eine Zeile schreiben, wird zum Text eines li, und das Tool umschließt den gesamten Satz mit dem von Ihnen gewählten Containerelement. Ordnen Sie Ihre Zeilen neu an oder bearbeiten Sie sie und generieren Sie erneut – das Markup folgt umgehend.

Geordnet oder ungeordnet: das richtige Element wählen

Die Wahl zwischen ul und ol ist nicht kosmetisch, sie ist semantisch. Eine ungeordnete Liste (ul) wird mit Aufzählungszeichen dargestellt und signalisiert, dass die Reihenfolge der Elemente keine Rolle spielt, etwa bei einer Auswahl von Produktmerkmalen. Eine geordnete Liste (ol) wird mit Nummern dargestellt und signalisiert, dass die Reihenfolge bedeutsam ist, etwa bei den Schritten eines Rezepts oder einer Rangliste. Screenreader kündigen diese unterschiedlich an, daher ist die Wahl der richtigen Variante eine Entscheidung der Barrierefreiheit und nicht bloß eine visuelle.

Ein nützlicher Test: Wenn Sie die Elemente mischen könnten, ohne die Bedeutung zu verändern, verwenden Sie eine ungeordnete Liste; wenn das Mischen den Inhalt falsch machen würde, verwenden Sie eine geordnete Liste. Greifen Sie immer dann zu ol, wenn Reihenfolge, Rangfolge oder nummerierte Verweise eine Information tragen.

Ein durchgearbeitetes Beispiel

Tippen Sie drei Zeilen, Apple, Banana und Cherry, wählen Sie Ungeordnete Liste, und das Tool erzeugt ein ul-Element mit drei li-Elementen, eines pro Frucht, sauber eingerückt und geschlossen. Wechseln Sie zu Geordnete Liste, und dieselben drei Zeilen werden zu einem ol, das der Browser als 1. Apple, 2. Banana, 3. Cherry darstellt. Kein Tag bleibt jemals offen, und die Einrückung macht die Struktur leicht lesbar und wartbar.

Nummerierte Listen, die dort beginnen, wo Sie es möchten

Geordnete Listen müssen nicht bei 1 beginnen. Das Feld Startnummer in den Erweiterten Optionen schreibt ein start-Attribut auf das ol, sodass Sie eine nummerierte Abfolge fortsetzen können, die durch anderen Inhalt unterbrochen wurde, oder dort weitermachen, wo eine vorherige Liste aufgehört hat. Setzen Sie zum Beispiel den Startwert auf 5, wird das erste Element als 5 dargestellt, das nächste als 6 und so weiter. Dies ist die saubere, standardbasierte Methode, die Nummerierung zu steuern, statt sie vorzutäuschen, indem man Zahlen in den Elementtext tippt – was zerbrechen würde, sobald die Liste jemals neu geordnet werden muss.

IDs und Klassen für die Gestaltung hinzufügen

Die Erweiterten Optionen bieten Ihnen drei Ansatzpunkte für CSS und JavaScript. Eine Listen-ID setzt eine eindeutige id auf das ul oder ol, ideal für ein einmaliges Element, das Sie präzise ansprechen oder mit einem Anker verlinken möchten. Eine Listen-Klasse weist dem Container eine class zu, sodass er gemeinsame Stile erbt, etwa ein horizontales Navigationslayout oder ein eigenes Design der Aufzählungszeichen. Eine Element-Klasse weist jedem li eine class zu, was perfekt ist, wenn jedes Element dieselbe Behandlung benötigt, etwa einheitliche Abstände oder ein Symbol.

Da die Klassen und die ID direkt in die generierten Tags einfließen, ist das Markup in dem Moment, in dem Sie es einfügen, bereit, zu einem bestehenden Stylesheet zu passen – ganz ohne nachträgliches Suchen und Ersetzen.

Warum leere Zeilen ignoriert werden

Wenn Sie versehentlich eine leere Zeile zwischen Elementen lassen oder Ihre eingefügte Quelle nachgestellte Leerzeilen enthält, überspringt der Generator sie, anstatt ein leeres li zu erzeugen. Das ist beabsichtigt: verirrte leere Listenelemente würden als leere Aufzählungszeichen oder übersprungene Nummern dargestellt und die Seite überladen. Die Regel lautet, dass nur Zeilen mit tatsächlichem, nicht aus Leerraum bestehendem Inhalt zu Listenelementen werden, sodass Sie locker formatierten Text einfügen können, ohne ihn zuvor zu bereinigen.

Warum semantische Listen für SEO und Barrierefreiheit wichtig sind

Echtes Listen-Markup anstelle von Absätzen, die durch Bindestriche oder Zeilenumbrüche getrennt sind, zu verwenden, zahlt sich über das Erscheinungsbild hinaus aus. Suchmaschinen analysieren ul- und ol-Strukturen, um gruppierte Inhalte zu verstehen, und ordentliche Listen kommen dafür infrage, in Funktionen wie Rich Results für Schritte und How-to-Inhalte zu erscheinen. Auch assistive Technologien profitieren: Ein Screenreader kündigt an, wie viele Elemente eine Liste enthält, und lässt Nutzer Element für Element navigieren, was unmöglich ist, wenn Aufzählungszeichen mit Textzeichen vorgetäuscht werden.

Kurz gesagt: Semantische Listen vermitteln Struktur an Maschinen ebenso wie an Menschen. Sich einen Moment Zeit zu nehmen, um korrektes ul- oder ol-Markup zu generieren, macht Ihre Inhalte barrierefreier, besser crawlbar und einfacher zu warten als eine von Hand formatierte Nachahmung.