Listen werden häufig verwendet um eine endliche mengenmäßige Ansammlung, oder eine hierachische Struktur übersichtlich darzustellen. XHTML unterscheidet verschiedene Listenarten, welche von den Browsern unterschiedlich interpretiert und dargestellt werden. Die genaue Formatierung der Liste wird in einer Stylesheet-Datei vorgenommen. So können dann verschiedene Nummerierungsarten oder Aufzählungszeichen der Liste explizit festgelegt werden.
Mit XHTML können nummerierte Listen, mit einer vorangestellten Zahl oder Buchstaben, Aufzählungslisten meist mit einem vorausgehenden Punkt, und Definitionslisten erstellt werden:
| Bedeutung | Elemente |
|---|---|
| nummerierte Listen mit fortlaufender Nummerierung | <ol>…</ol> |
| unnummerieirte Listen mit einem vorangestellten Punkt (Aufzählungen) | <ul>…</ul> |
| Definitionslisten mit einem Ausdruck und der dazuzugehörenden Definition | <dl>…</dl> |
Die einzelnen Listeneinträge werden bei den nummerierten und unnummerierten Listenarten mit dem Tag
<li> eingeleitet und mit dem Tag </li> beendet.
Bei den Definitionslisten werden die Listeneinträge für den Ausdruck
(Tag <dt>) und der dazugehörenden Definition
(Tag <dd>) unterschieden.
<ol>…</ol>)nummerierte Listen
<ol>
<li>erster Eintrag</li>
<li>zweiter Eintrag</li>
<li>dritter Eintrag</li>
</ol>| Wert | Nummerierungsart |
|---|---|
| decimal | Zahlen |
| lower-alpha | kleine alphanumerische Zeichen |
| lower-latin | kleine lateinische Zeichen |
| lower-roman | kleine römische Zahlen |
| upper-alpha | große alphanumerische Zeichen |
| upper-latin | große lateinische Zeichen |
| upper-roman | große römische Zahlen |
Als Standardwert bei den nummerierten Listen werden Zahlen verwendet. Die Art der Nummerierung kann jedoch in der StyleSheet-Datei style.css mit dem CSS-Attribut list-style-type geändert werden. Erweitern Sie Ihre Stylesheet-Datei um die nachfolgende Zeile und setzen Sie für Wert eine individuelle Nummerierungsart ein.
ol {
list-style-type:Wert;
}Die nachfolgenden Zeilen eines Listeneintrages werden in fast allen Browsern eingerückt dargestellt. Um dies zu verhindern oder für alle Browser verbindlich zu deklarieren, kann mit dem CSS-Attribut list-style-position die Einrückung eines Listeneintrags für die nachfolgenden Zeilen gesteuert werden. Mögliche Werte sind inside oder outside (Standardeinstellung) für eingerückt oder nicht eingerückt.
ol {
list-style-position:Wert;
}<ul>…</ul>)unnummerierte Listen
<ul>
<li> erster Eintrag </li>
<li> zweiter Eintrag </li>
<li> dritter Eintrag </li>
</ul>| Wert | Nummerierungsart |
|---|---|
| circle | Punkt |
| disc | Kreis |
| none | kein Zeichen |
| square | Quadrat |
Als Standardwert bei den unnummerierten Listen wird ein Punkt verwendet. Dieses Aufzählungszeichen kann in der Stylesheet-Datei auch mit dem CSS-Attribut list-style-type verändert werden.
ul {
list-style-type:Wert;
}Bei den unnummerierten Listen kann anstatt eines vorgegebenen Aufzählungszeichens auch eine eigene Grafik verwendet werden.
ul {
list-style-image: url(Grafikname.Typ);
}Genau wie bei den nummerierten Listen kann die Einrückung der nachfolgenden Zeilen eines Listeneintrages durch das CSS-Attribut list-style-position kontrolliert werden.
<dl>…</dl>)Eine Definition ist eine genaue Beschreibung eines bestimmten zu definierenden Ausdrucks.
Bei den Definitionslisten werden die Listeneinträge für den
<dt>) und der dazugehörenden<dd>) unterschieden.Definitionslisten
<dl>
<dt>Abk.</dt>
<dd>Abkürzung</dd>
<dt>EDV</dt>
<dd>elektronische Datenverarbeitung</dd>
<dt>Xis</dt>
<dd>XHTML ist super</dd>
</dl>verschachtelte Listen
<ul>
<li>erster Eintrag</li>
<li>zweiter Eintrag</li>
<ul>
<li>Zwei A</li>
<li>Zwei B</li>
</ul>
<li>dritter Eintrag</li>
</ul>Erstellen Sie eine nummerierte-, eine unnummerierte- und eine Definitionsliste mit jeweils fünf Einträgen in der Datei webdesign-x.html, und testen Sie die Darstellung mit Ihrem Browser.
Erstellen Sie in der Datei webdesign-y.html zwei nummerierte Listen. Die zweite Liste soll innerhalb der ersten dargestellt werden. Testen Sie die Darstellung mit Ihrem Browser.