HTML-Listen erstellen: Eine Schritt-für-Schritt-Anleitung

Von Janam Apr 24, 2024

Min Lesedauer

HTML-Listen: Typen und Verwendung

Listen sind wesentliche Elemente in HTML, um Inhalte übersichtlich zu strukturieren und zu organisieren. Sie ermöglichen dir, Elemente in einer sequenziellen oder ungeordneten Reihenfolge darzustellen.

Arten von HTML-Listen

HTML bietet zwei Arten von Listen:

ungeordnete Listen (unordered lists):
Diese Listen verwenden das <ul>-Element und bestehen aus Items, denen Aufzählungszeichen vorangestellt sind (z. B. Kreise, Quadrate oder Striche). Sie sind ideal für Aufzählungen oder Sammlungen von verwandten Elementen.

geordnete Listen (ordered lists):
Diese Listen verwenden das <ol>-Element und nummerieren ihre Items sequenziell. Sie eignen sich für chronologische Abfolgen, Schritte oder Ranglisten.

Verwendung von HTML-Listen

Listen werden in vielen Szenarien verwendet, darunter:

Aufzählen mehrerer Punkte oder Funktionen
Darstellen von hierarchischen Strukturen
Erstellen von Navigationsmenüs
Implementieren von Navigationsmenüs

Schritt-für-Schritt-Anleitung zum Erstellen von ungeordneten Listen (

)

Ungeordnete Listen, auch als Bulleted Lists bezeichnet, sind eine großartige Möglichkeit, eine Liste von Elementen ohne eine bestimmte Reihenfolge darzustellen. Sie sind besonders nützlich für:

Aufzählungen von Features oder Vorteilen
Auflistungen von Schritten in einer Anleitung
Zusammenfassungen von Schlüsselpunkten

So erstellst du eine ungeordnete Liste

Um eine ungeordnete Liste zu erstellen, beginne mit dem Öffnungstag <ul>. Schließe jedes Listenelement mit <li> ein, und beende die Liste mit dem Schließtag </ul>.

<ul>
  <li>Listenelement 1</li>
  <li>Listenelement 2</li>
  <li>Listenelement 3</li>
</ul>

Beispiel:

<ul>
  <li>Feature 1</li>
  <li>Feature 2</li>
  <li>Feature 3</li>
</ul>

Anpassung von Listenelementen

Du kannst das Aussehen deiner Listenelemente anpassen, indem du CSS-Stile verwendest. Beispielsweise kannst du die Schriftart, Farbe oder Aufzählungspunkte ändern.

ul {
  list-style-type: circle;
  font-family: Arial, sans-serif;
}

Beispiel:

<ul>
  <li>Listenelement 1</li>
  <li>Listenelement 2</li>
  <li>Listenelement 3</li>
</ul>

<style>
  ul {
    list-style-type: square;
    color: red;
  }
</style>

Erstellen von geordneten Listen (

)

Geordnete Listen (

Schritt 1: Den `<ol>`-Container definieren

Um eine geordnete Liste zu erstellen, beginnst du mit dem <ol>-Tag. Dies definiert den Container für die Listenelemente.

<ol>

Schritt 2: Listenelemente hinzufügen

Innerhalb des <ol>-Containers fügst du die einzelnen Listenelemente mit dem <li>-Tag hinzu. Jedes Listenelement kann Text, Bilder, Links oder andere Inhalte enthalten.

<ol>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ol>

Schritt 3: Nummerierung anpassen (optional)

Standardmäßig nummeriert HTML geordnete Listen beginnend mit 1. Du kannst jedoch die Nummerierung anpassen, indem du das start-Attribut verwendest.

<ol start="5">
  <li>Element 5</li>
  <li>Element 6</li>
  <li>Element 7</li>
</ol>

Schritt 4: Nummerierungstyp ändern

Du kannst den Nummerierungstyp für geordnete Listen ändern, indem du das type-Attribut verwendest. Es stehen folgende Optionen zur Verfügung:

1: Arabische Ziffern (Standard)
a: Kleinbuchstaben
A: Großbuchstaben
i: Kleinbuchstaben in römischen Ziffern
I: Großbuchstaben in römischen Ziffern

<ol type="a">
  <li>Element A</li>
  <li>Element B</li>
  <li>Element C</li>
</ol>

Vorteile der Verwendung von geordneten Listen

Organisierte Darstellung: Geordnete Listen helfen dir, Inhalte in einer logischen Reihenfolge zu präsentieren.
Verbesserte Lesbarkeit: Durch die Nummerierung können Leser schnell den Fortschritt in der Liste erkennen.
SEO-Vorteile: Geordnete Listen können Suchmaschinen helfen, die Struktur deiner Inhalte zu verstehen und diese in Suchergebnissen zu ranken.

Nesting von Listen

Listen können ineinander verschachtelt werden, um hierarchische Strukturen darzustellen. Dies ist nützlich, um Unterpunkte oder Unterkategorien unter Hauptpunkte zu organisieren.

So verschachtelst du Listen:

Erstelle zunächst eine übergeordnete Liste (
- Füge weitere untergeordnete Listen nach Bedarf hinzu.
- Schließe die übergeordnete Liste mit
oder

Beispiel für verschachtelte Listen:

<ul>
  <li>Obst</li>
    <ul>
      <li>Apfel</li>
      <li>Banane</li>
    </ul>
  <li>Gemüse</li>
    <ul>
      <li>Karotte</li>
      <li>Brokkoli</li>
    </ul>
</ul>

Tipps zum Verschachteln von Listen:

Verwende verschachtelte Listen sparsam, um Verwirrung zu vermeiden.
Verwende klare und prägnante Beschriftungen für Unterpunkte, um die Hierarchie hervorzuheben.
Prüfe die Verschachtelungstiefe, um sicherzustellen, dass die Struktur noch übersichtlich bleibt.
Vermeide das Verschachteln von Listen mehr als zwei Ebenen tief.
Verwende CSS, um das Design und die Abstände von verschachtelten Listen anzupassen.
Denke daran, dass verschachtelte Listen von screenreadern gut zugänglich sein müssen.

Formatieren von Listenelementen

Nachdem du deine Liste erstellt hast, kannst du die einzelnen Listenelemente formatieren, um ihnen ein ansprechenderes Aussehen zu verleihen. Hier sind einige Möglichkeiten:

Textformatierung

Fett: Um Text fett zu formatieren, verwende das **-Tag innerhalb eines Listenelements: <li>**Text**</li>.
Kursiv: Für kursiv gedruckten Text verwendest du das *-Tag: <li>*Text*</li>.
Durchgestrichen: Streiche Text durch, indem du das ~~-Tag verwendest: <li>~~Text~~</li>.
Unterstrichen: Füge dem Text eine Unterstreichung hinzu, indem du das u-Tag verwendest: <li><u>Text</u></li>.
Farbig: Wechsle die Textfarbe mit dem style-Attribut und der CSS-Eigenschaft color: <li style="color: red;">Text</li>.

Absatzformatierung

Einzüge: Verwende das style-Attribut mit der CSS-Eigenschaft text-indent, um Listenelemente einzurücken: <li style="text-indent: 2em;">Text</li>.
Ausrichtung: Du kannst die Ausrichtung des Textes mit der CSS-Eigenschaft text-align anpassen: <li style="text-align: center;">Text</li>.

Zusätzliche Optionen

Bilder einfügen: Du kannst über das img-Tag Bilder in Listenelemente einfügen: <li><img src="bild.jpg" alt="Bildbeschreibung"></li>.
Links erstellen: Erstelle klickbare Links mit dem a-Tag: <li><a href="https://www.beispiel.de">Linktext</a></li>.
Tabellen einfügen: Füge Tabellen in Listenelemente ein, indem du das table-Tag verwendest: <li><table>...</table></li>.
Listen verschachteln: Du kannst Listen innerhalb anderer Listen verschachteln. Weitere Informationen dazu findest du im Abschnitt "Verschachteln von Listen" weiter unten in diesem Artikel.

Zusätzliche Attribute für Listen

Neben den grundlegenden Tags für ungeordnete (

type-Attribut für geordnete Listen (

)

Mit dem type-Attribut kannst du den Nummerierungsstil für geordnete Listen festlegen. Folgende Werte sind verfügbar:

1: Arabische Ziffern (Standard)
a: Kleinbuchstaben
A: Großbuchstaben
i: Kleinbuchstaben (römisch)
I: Großbuchstaben (römisch)

start-Attribut für geordnete Listen (

)

Das start-Attribut ermöglicht es dir, die Nummerierung einer geordneten Liste an einer beliebigen Zahl zu beginnen. Dies kann hilfreich sein, wenn du eine Liste fortsetzen möchtest, die bereits in einem anderen Dokument begonnen wurde.

compact-Attribut für ungeordnete Listen (

)

Das compact-Attribut kann verwendet werden, um den Zeilenabstand zwischen Listenelementen zu reduzieren und eine kompaktere Liste zu erstellen.

reversed-Attribut für geordnete Listen (

)

Das reversed-Attribut kehrt die Reihenfolge der Nummerierung in einer geordneten Liste um, sodass die Elemente vom letzten zum ersten nummeriert werden.

global-Attribut für ungeordnete Listen (

)

Das global-Attribut weist den Browser an, alle ungeordneten Listen auf einer Seite mit demselben Aufzählungsstil zu rendern, unabhängig von der Verschachtelung.

%% Weitere Attribute

Neben den oben aufgeführten Attributen gibt es eine Reihe weiterer Attribute, die für Listen verwendet werden können, darunter:

class: Wird verwendet, um eine CSS-Klasse auf die Liste anzuwenden
id: Wird verwendet, um eine eindeutige ID für die Liste festzulegen
style: Wird verwendet, um Inline-Stile auf die Liste anzuwenden

Best Practices für die Verwendung von Listen

Es gibt einige Best Practices, die du beim Verwenden von Listen beachten solltest, um deren Effektivität zu maximieren und die Benutzerfreundlichkeit zu verbessern.

Verwende Listen für ihren vorgesehenen Zweck

Listen sollten verwendet werden, um eine Reihe verwandter Elemente zu strukturieren oder zu gruppieren. Vermeide es, Listen für andere Zwecke zu verwenden, z. B. um Text auszurichten oder zu formatieren.

Halte Listen überschaubar

Eine einzelne Liste sollte nicht zu lang werden. Wenn du eine große Anzahl von Elementen hast, ziehe in Betracht, sie in mehrere kleinere Listen aufzuteilen.

Verwende eindeutige Listenelemente

Die einzelnen Elemente einer Liste sollten klar und eindeutig formuliert sein. Vermeide es, vage oder redundante Elemente zu verwenden.

Konsistent sein

Wenn du mehrere Listen auf einer Seite verwendest, verwende das gleiche Stilformat für alle. Dies trägt zur visuellen Einheitlichkeit und Benutzerfreundlichkeit bei.

Verwenden Sie Semantik für Listenelemente

Neben der Verwendung von

(Listenelement),
(Definitionsliste) und
(Begriff) verwenden. Dies verbessert die Barrierefreiheit und die Struktur deiner Seite.

Barrierefreiheit berücksichtigen

Stelle sicher, dass deine Listen für Benutzer mit eingeschränkten Möglichkeiten zugänglich sind. Dazu gehört die Verwendung von Alternativtext für Bilder und die Bereitstellung von Tastaturnavigation.

Testen und Optimieren

Teste deine Listen in verschiedenen Browsern und auf verschiedenen Geräten, um sicherzustellen, dass sie wie erwartet angezeigt werden. Nutze Web-Tools wie HTML-Validatoren, um die Richtigkeit deines Codes zu überprüfen.

Fehlerbehebung bei Listenproblemen

Bist du auf Probleme bei der Verwendung von HTML-Listen gestoßen? Hier findest du einige Tipps zur Fehlerbehebung:

Falsche Verschachtelung
- Überprüfe, ob deine Listenelemente korrekt verschachtelt sind. Jedes untergeordnete Listenelement muss innerhalb eines übergeordneten
- -Elements enthalten sein.
Fehlende Schließ-Tags
- Stelle sicher, dass alle deine Listen mit
oder

geschlossen werden. Fehlende Schließ-Tags können deinen HTML-Code ungültig machen.

Ungültige Listentypen

Verwende nur die gültigen Listentypen
Fehlende Listentypen
- Wenn du eine geordnete Liste erstellen möchtest, vergiss nicht, den Typ des Listentyps mit type="1", "A", "a" oder "I" anzugeben.
Falsche Attributwerte
- Überprüfe, ob die von dir verwendeten Attributwerte gültig sind. Beispielsweise akzeptiert das start-Attribut nur positive Ganzzahlen.
Anzeigeprobleme
- Wenn deine Liste nicht wie erwartet angezeigt wird, überprüfe deine CSS-Regeln. Möglicherweise musst du Stile für die Listenelemente oder die Listen selbst definieren.
Kompatibilitätsprobleme
- Teste deine Listen in verschiedenen Browsern und Geräten, um Kompatibilitätsprobleme zu erkennen. Ältere Browser unterstützen möglicherweise nicht alle HTML5-Listeneigenschaften.
Unterstützung für zusätzliche Browser
- Erwäge die Verwendung von Polyfills oder JavaScript-Bibliotheken wie list.js, um zusätzliche Browserunterstützung für Funktionen wie Drag & Drop oder Sortieren bereitzustellen.
Weitere Ressourcen
- HTML-Listenreferenz: https://developer.mozilla.org/de/docs/Web/HTML/Element/ul
- HTML5-Listen: https://www.w3schools.com/html/html5_lists.asp
- Fehlersuche bei HTML-Listen: https://css-tricks.com/debugging-html-lists/
Ähnliche Beiträge:
1. Umfassender Leitfaden zum HTML-Listen-Tag
2. HTML

vorheriger Artikel

nächster Artikel

Jan

Antwort hinterlassen
Antworten abbrechen

Neue Artikel

Allgemein