1.8 Listen
HTML unterstützt nummerierte Listen (ordered list), bei denen die Reihenfolge der Listeneinträge eine Rolle spielt und Aufzählungslisten (unordered list), bei denen die Reihenfolge der Listeneinträge nicht von Bedeutung ist.
1.8.1 Nummerierte Listen: ol-Element
Das ol-Element dient der Kennzeichnung von nummerierten Listen. Die verschiedenen Listeneinträge (list item) werden jeweils durch ein li-Element gekennzeichnet. Bei der Darlstellung im Browser werden den Listeneinträgen jeweils eine fortlaufende Dezimalzahl gefolgt von einem Punkt vorangestellt. Andere Nummerierungen, zum Beispiel mit Buchstaben oder römischen Ziffern, sind möglich.
1. Startseite
2. Bildungswege
3. Termine
4. Formulare
<li>
<a href="index.html">Startseite</a>
</li>
<li>
<a href="bildungswege.html">Bildungswege</a>
</li>
<li>
<a href="termine.html">Termine</a>
</li>
<li>
<a href="formulare.html">Formulare</a>
</li>
</ol>
1.8.2 Aufzählungsliste: ul-Element
Aufzählungslisten werden mit Hilfe des ul-Elements erstellt. Die verschiedenen Listeneinträge werden jeweils durch ein li-Element gekennzeichnet. Bei der Darlstellung im Browser wird jedem Listeneintrag ein schwarzer Kreis vorangestellt. Andere Aufzählungszeichen sind möglich.
• Startseite
• Bildungswege
• Termine
• Formulare
<li>
<a href="index.html">Startseite</a>
</li>
<li>
<a href="bildungswege.html">Bildungswege</a>
</li>
<li>
<a href="termine.html">Termine</a>
</li>
<li>
<a href="formulare.html">Formulare</a>
</li>
</ul>
Die Navigationsleiste wird üblicherweise in Form einer Aufzählungsliste realisiert. Da ein li-Element auch eine weitere Liste enthalten kann, können auf diese Weise auch Dropdown-Menüs erstellt werden.
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Startseite der Kaufmännischen Schule Tauberbischofsheim</title>
</head>
<body>
<img src="img/logo.png">
<h1>Kaufmännische Schule Tauberbischofsheim</h1>
<li>
<a href="index.html">Startseite</a>
</li>
<li>
<a href="bildungswege.html">Bildungswege</a>
</li>
<li>
<a href="termine.html">Termine</a>
</li>
<li>
<a href="formulare.html">Formulare</a>
</li>
</ul>
<img src="img/eingang.jpg">
<p>
Wir freuen uns über Ihr Interesse und<br>hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können.
</p>
<a href="impressum.html">Impressum<a>
</body>
</html>