Listen

HTML-Listen werden verwendet, um Inhalte übersichtlich und strukturiert darzustellen. Sie eignen sich besonders für Aufzählungen, Schritt-für-Schritt-Anleitungen, Navigationen oder Begriffslisten. Durch Listen lassen sich zusammengehörige Informationen klar gliedern, leichter erfassen und sowohl für Nutzer als auch für Suchmaschinen besser verständlich darstellen.

Geordnete Listen

  • Eine geordnete Liste ist nummeriert und wird im Englischen als ordered list bezeichnet.

  • Listenelemente werden durch <li> dargestellt.

<ol>
  <li>Listelement 1</li>
  <li>Listelement 2</li>
  <li>Listelement 3</li>
  <li>Listelement 4</li>
</ol>
  1. Listelement 1
  2. Listelement 2
  3. Listelement 3
  4. Listelement 4

Ungeordnete Listen

  • Eine ungeordnete Liste ist eine einfache Aufzählung mit Punkten als Listenzeichen (unordered list).

  • Listenelemente werden ebenfalls mit <li> dargestellt.

<ul>
  <li>Listelement 1</li>
  <li>Listelement 2</li>
  <li>Listelement 3</li>
  <li>Listelement 4</li>
</ul>
  • Listelement 1
  • Listelement 2
  • Listelement 3
  • Listelement 4

Verschachtelte Listen

  • Listen können andere Listen enthalten, unabhängig davon, ob es sich um <ul> oder <ol> handelt.

  • Die verschachtelte Liste befindet sich immer innerhalb eines <li>-Elements.

Beispiel:

<ol>
  <li>Listelement 1</li>
  <li>
    Listelement 2
    <ol>
      <li>Verschachteltes Element 1</li>
      <li>Verschachteltes Element 2</li>
      <li>Verschachteltes Element 3</li>
    </ol>
  </li>
  <li>
    Listelement 3
    <ul>
      <li>
        Weiteres Element
        <ul>
          <li>Noch tiefer verschachtelt</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Listelement 4</li>
</ol>
  1. Listelement 1
  2. Listelement 2
    1. Verschachteltes Element 1
    2. Verschachteltes Element 2
    3. Verschachteltes Element 3
  3. Listelement 3
    • Weiteres Element
      • Noch tiefer verschachtelt
  4. Listelement 4

Beschreibungsliste

  • Eine Beschreibungsliste besteht aus Begriffen (<dt>) und den zugehörigen Definitionen oder Erklärungen (<dd>).

  • Es können mehrere <dd> pro <dt> verwendet werden.

<dl>
  <dt>Avengers</dt>
  <dd>Iron Man</dd>
  <dd>Captain America</dd>
  <dd>Thor</dd>
  <dd>Hulk</dd>
  <dd>Black Widow</dd>

  <dt>Justice League</dt>
  <dd>Superman</dd>
  <dd>Batman</dd>
  <dd>Wonder Woman</dd>
  <dd>Aquaman</dd>
  <dd>The Flash</dd>
</dl>
Avengers
Iron Man
Captain America
Thor
Hulk
Black Widow
Justice League
Superman
Batman
Wonder Woman
Aquaman
The Flash