Listen erstellen in HTML

Auf Webseiten werden Texte häufig aufgelistet, so dass die einzelnen Punkte in übersichtlicher Form dargestellt werden. Texte können dabei mit Listenpunkten und evtl. weiteren Unterpunkten gegliedert, wobei das nur die optische Gliederung betrifft. Die strukturelle Gliederung einer Webseite erfolgt nämlich mit Überschriften.

Es gibt verschiedene Befehle, mit denen man in HTML Listen erstellen und (mittels CSS) formatieren kann. Unterschieden wird dabei zwischen sortierten und unsortierten Listen.

Unsortierte Liste

Bei einer unsortierten Liste ist nicht gemeint, dass die Listenpunkte durcheinander sind. Damit wird lediglich zum Ausdruck gebracht, dass die Listenpunkte nicht durchnummeriert sind und in Form von Kreisen, Punkten oder sonstigen Aufzählungszeichen dargestellt werden, z.B. in der folgenden Form.

Listeneintrag 1
Listeneintrag 2
Listeneintrag 3

HTML-Code für unsortierte Liste

Um eine unsortierte Liste zu erstellen, sind zwei Befehle (Tags) wichtig. Das sind UL und LI. Mit dem UL-Tag, der von "Unordered List" abgeleitet wurde, wird die Liste gestartet. Für die einzelnen Listenpunkte verwendet man den LI-Tag, wobei jeder Listenpunkt einen Start- und End-Tag besitzt. Alle Listenpunkte werden vom UL-Tag umschlossen, so dass sie zwischen dem Start- und End-Tag von UL geschrieben werden. Der Quellcode für eine unsortierte Liste sieht folgendermaßen aus:

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

Unsortierte Liste mit Unterpunkten

Eine Liste besteht häufig nicht nur aus Hauptlistenpunkten, sondern enthalten auch Unterpunkte. Beispiel:

Listeneintrag 1
- Listeneintrag 1, Unterpunkt 1
Listeneintrag 2
Listeneintrag 3

HTML-Code für unsortierte Liste mit Unterpunkten

Um eine unsortierte Liste mit Unterpunkten zu erstellen, muss man die Befehle ineinander verschachteln. Hierbei wird zuerst die Liste geöffnet, die Hauptlistenpunkte erstellt und innerhalb des Hauptlistenpunktes eine komplette Liste für den Unterpunkt erstellt.

<ul>  
  <li>Listeneintrag 1
    <ul>
      <li>Listeneintrag 1, Unterpunkt 1</li>
    </ul>
  </li>
  <li>Listeneintrag 2</li>
  <li>Listeneintrag 3</li>
</ul>

Sortierte Liste

Bei einer sortierten Liste werden die Listenpunkte nicht symbolisch dargestellt, sondern durchnummeriert. Dabei hat man bei der Nummerierung gewisse Freiheiten. Es sind z.B. Auflistungen mit arabischen, römischen oder alphanumerischen Aufzählungszeichen möglich. Ein Beispiel:

Listeneintrag 1
Listeneintrag 2
Listeneintrag 3

HTML-Code für sortierte Liste

Beim HTML-Code gibt es zwischen sortierten und unsortierten Listen nur einen Unterschied. Statt dem UL-Tag verwendet man den OL-Tag, der von "Ordered List" abgeleitet wurde. Die Listeneinträge werden genauso wie bei der unsortierten Liste mit dem LI-Tag erzeugt und die Syntax des Codes ist wie bei der unsortierten Liste. Der HTML-Code für sortierte Listen sieht folgendermaßen aus.

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

Sortierte Liste mit Unterpunkten

Auch bei der sortierten Liste sind Unterpunkte möglich. Beispiel:

Listeneintrag 1
1. Listeneintrag 1, Unterpunkt 1
Listeneintrag 2
Listeneintrag 3

HTML-Code für sortierte Liste mit Unterpunkten

Beim HTML-Code verfährt man wie bei der unsortierten Liste. Lediglich die UL-Tags werden gegen OL-Tags ausgetauscht.

<ol>
  <li>Listeneintrag 1
    <ol>
      <li>Listeineintrag 1, Unterpunkt 1</li>
    </ol>
  </li>
  <li>Listeneintrag 2</li>
  <li>Listeneintrag 3</li>
</ol>