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>
- Listelement 1
- Listelement 2
- Listelement 3
- 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>
- Listelement 1
- Listelement 2
- Verschachteltes Element 1
- Verschachteltes Element 2
- Verschachteltes Element 3
- Listelement 3
- Weiteres Element
- Noch tiefer verschachtelt
- Weiteres Element
- 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