homepage-buttons.de
Homepagevorlagen, Buttons und mehr
 
 
 

Startseite > HTML-Kurs > verschachtelte Listen

4. HTML-Kurs - Mit Listen arbeiten (4)

4.4 verschachtelte Listen

Bereits mit den Grundfunktionen kann man brauchbare Listen erstellen, aber unter Umständen benötigen Sie für Ihre besondere Anwendung eine komplexere Dateistruktur mit Unterpunkten. Auch das ist mit den auf den vorhergehenden Seiten vorgestellten Tags möglich. Sie benötigen dazu keine weiteren Befehle, sondern verschachteln diese einfach.

Beispiel:

<html>
<head>
<title>verschachtelte Listen</title>
</head>

<body>

<ul>
  <li>Erster Listeneintrag</li>
  <li>Zweiter Listeneintrag</li>
    <ol>
      <li>Unterpunkt 1 des zweiten Listenpunktes</li>
      <li>Unterpunkt 2 des zweiten Listenpunktes</li>
      <li>Unterpunkt 3 des zweiten Listenpunktes</li>
    </ol>
  <li>Dritter Listeneintrag</li>
  <li>Vierter Listeneintrag</li>
</ul>

</body>
</html>

Und in der Ausgabe sieht es wie in dieser Datei aus: klick!

Im obigen Beispiel wurde die Liste mit dem Aufzählungstag ul gestartet, darunter gab es einen Listenpunkt, darunter einen zweiten, dem nun wieder Unterpunkte folgten, die mit ol als nummerierte Liste folgten. Dies ist auch umgekehrt möglich, wie im nachfolgenden Beispiel gezeigt wird:

<html>
<head>
<title>verschachtelte Listen</title>
</head>

<body>

<ol>
  <li>Erster Listeneintrag</li>
  <li>Zweiter Listeneintrag</li>
    <ul>
      <li>Unterpunkt 1 des zweiten Listenpunktes</li>
      <li>Unterpunkt 2 des zweiten Listenpunktes</li>
      <li>Unterpunkt 3 des zweiten Listenpunktes</li>
    </ul>
  <li>Dritter Listeneintrag</li>
  <li>Vierter Listeneintrag</li>
</ol>

</body>
</html>

Und in der Ausgabe sieht es wie in dieser Datei aus: klick!

Selbstverständlich können Sie auch mehrere ul-Tags und ol-Tags miteinander verschachteln.

Achtung: es muss immer darauf geachtet werden, dass die Tags ul und ol in umgekehrter Reihenfolge wieder geschlossen werden, was aber ja auch eine Grundfunktion von HTML ist!