Listen

In HTML gibt es drei verschiedene Listentypen. <ol> ist eine geordnete Liste, <ul> ist eine ungeordnete Liste und <dl> ist eine beschreibende Liste.

  • Das Element <ol> bezeichnet eine nummerierte Liste, englisch ordered list.

  • Das Element <ul> beschreibt eine Aufzählungsliste. ul steht dabei für unordered list, ungeordnete, unsortierte Liste.

  • Das Element <dl> beschreibt eine Beschreibungsliste.

ul- und ol-Listen enthalten Listenelemente, die durch das Element <li> dargestellt werden. Nur die Listenelemente sind auf der Website sichtbar. ol und ul geben den Typ der Liste an.

Die dl-Liste besteht aus den Elementen <dt> und <dd>. dt ist der Title der Liste und dd der Inhalt. Es können mehrere dt in einer dl-Listen enthalten sein.

Nummerierte-Liste

Eine ol-Liste ist eine Aufzählungsliste mit Zahlen als Nummerierungszeichen.

1<ol>
2  <li>Listelement 1</li>
3  <li>Listelement 2</li>
4  <li>Listelement 3</li>
5  <li>Listelement 4</li>
6</ol>

Bemerkung

Listen sind ein gutes Beispiel für korrekte Einrückung von Elementen.

See the Pen ol-Liste by Html Website (@html_website) on CodePen.

Aufzählungsliste

Eine ul-Liste ist eine Aufzählungsliste mit Punkten als Listenzeichen.

1<ul>
2  <li>Listelement 1</li>
3  <li>Listelement 2</li>
4  <li>Listelement 3</li>
5  <li>Listelement 4</li>
6</ul>

See the Pen ul-Liste by Html Website (@html_website) on CodePen.

Verschachtelte Listen

Listen können andere Listen beinhalten. Diese Listen bezeichnet man als verschachtelte Listen. Es ist egal, ob sie ul-Listen in ol-Listen verschachteln oder ul- in ul-Listen.

Bemerkung

Die zusätzliche Liste befindet sich immer innerhalt eines li-Elementes.

 1<ol>
 2  <li>Listelement 1</li>
 3  <li>Listelement 2 <!-- verschachtelte Liste befindet sich in dem li -->
 4    <ol>
 5      <li>Listenelement</li>
 6      <li>Listenelement</li>
 7      <li>Listenelement</li>
 8    </ol>
 9  </li>
10  <li>Listelement 3
11    <ul>
12      <li>Noch ein Listelement
13        <ul>
14          <li>nochmal verschachtelt</li>
15        </ul>
16    </ul>
17  </li>
18  <li>Listelement 4</li>
19</ol>

See the Pen verschachtelte Liste by Html Website (@html_website) on CodePen.

Beschreibungsliste

Eine dl-Liste ist eine Beschreibungsliste. Zu jedem Oberbegriff (dt) gibt es Erklärungen (dd).

 1<dl>
 2  <dt>Avengers</dt>
 3  <dd>Iron Man</dd>
 4  <dd>Captain America</dd>
 5  <dd>Thor</dd>
 6  <dd>Hulk</dd>
 7  <dd>Black Widow</dd>
 8
 9  <dt>Justice League</dt>
10  <dd>Superman</dd>
11  <dd>Batman</dd>
12  <dd>Wonder Woman</dd>
13  <dd>Aquaman</dd>
14  <dd>The Flash</dd>
15</dl>

See the Pen Beschreibungsliste by Html Website (@html_website) on CodePen.