Strict verstehen, Teil 4: Einsatz von Listen
Über die Feiertage ein leicht verdauliches Thema: Listen, Elemente zu denen noch nie ein Mensch zuvor .., *hust* naja. Sehen wir uns das mal an (lest bitte das letzte Beispiel, um die Frage beantworten zu können^^).
Einsatz von Listen
Die ungeordnete Liste
Ungeordnete Listen können für viele Zwecke eingesetzt werden, z.B. als Einträge in einem Navigationsbereich oder als Stichpunktartige Zusammenfassung.
HTML-Code:
<ul>
<li>Stichpunkt Eins</li>
<li>Menüpunkt Zwei</li>
</ul>
Die geordnete Liste
Geordnete Listen können z.B. verwendet werden um bestimmte Abläufe stichpunktartig zusammenzufassen.
HTML-Code:
<ol>
<li>Lesen</li>
<li>Denken</li>
<li>Antwort schreiben</li>
</ol>
Das value-Attribut
In der HTML 4 bzw. XHTML 1 Variante Transitional ist es möglich dem <li> Element das value-Attribut zu geben, dessen Wert eine Zahl ist. Dieses bewirkt, dass der Listenpunkt als vorangestellten Wert ein Äquivalent (denn per Stilangabe wäre z.B. auch römische oder japanische Numerierung möglich) zur angegebenen Zahl darstellt und die folgenden Listenpunkte sich daran orientieren.
Das value-Attribut für Listenelemente ist eine Ausnahme, die es erlaubt, Transitional statt Strict als Doctype zu verwenden (was nicht sehr häufig vorkommen sollte). In XHTML 2 wird es wieder standardmäßig enthalten sein.
HTML-Code:
<!-- Der HTML-Transitional-Doctype benötigt den System-Identifier um standardkonforme Verarbeitung zu veranlassen. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Verschachteln von geordneten und ungeordneten Listen
Um Listen zu verschachteln werden die <ul> oder <ol> Elemente innerhalb eines <li> Elements eingefügt.
HTML-Code:
<ul>
<li>Es folgt eine verschachtelte Liste:
<ol>
<li>Lesen</li>
<li>Denken</li>
<li>Antwort schreiben</li>
</ol>
</li>
</ul>
Hinweis: Verschachtelte geordnete Listen erzeugen keine spezialisierte Kennzeichnung wie 1.4.3, das ist die Aufgabe von Stilangaben. Opera und Safari/Konqueror beherrschen diese Angaben bereits. Geckobrowser sehr wahrscheinlich ab Gecko 1.9 (geplant für das erste Halbjahr 2007, technisch ist es bereits möglich, nur die Anzeige klappt noch nicht). Der Internet Explorer, .., wird es auch irgendwann schaffen :)
Definitionslisten
Eine Sonderform der Listenelemente, welche für viele Zwecke genutzt werden kann.
Definitionsliten werden vom <dl> Element eingeleitet, danach können beliebig viele <dt> (Definitionsbegriffe) und <dd> (Definitionsbeschreibungen) folgen.
Beispiele:
HTML-Code:
<!-- Beispiel: Begriffserklärung -->
<dl>
<dt>Alpha</dt>
<dt>Beta</dt>
<dd>griechische Buchstaben</dd>
<dd>Bezeichnungen für sich in der Entwicklung befindende Software</dd>
</dl>
<!-- Beispiel: Lebenslauf -->
<dl>
<dt>Name</dt>
<dd>Mitaki</dd>
<dt>Registriert seit</dt>
<dd>14. November 2003</dd>
<dt>Aufgabe</dt>
<dd>Webstandardtante</dd>
</dl>
<!-- Beispiel: Dialoge -->
<dl>
<dt>NPC</dt>
<dd>Schaut euch meine Seite an.</dd>
<dt>Mitaki</dt>
<dd>Tabellendesign ;_;</dd>
<dt>NPC</dt>
<dd>Nerv nich :p</dd>
</dl>
<!-- Beispiel, denn das W3C ist nicht sooo streng:
Einfache Navigation, für komplexeres eignen sich ungeordnete Listen eher
(Aber: Ab XHTML 2 Navigationlisten verwenden) -->
<dl>
<dt>Hauptkategorie A</dt>
<dd>Sektion 1</dd>
<dd>Sektion 2</dd>
<dd>Sektion 3</dd>
<dt>Hauptkategorie B</dt>
<dd>Sektion 1</dd>
<dd>Sektion 2</dd>
</dl>
Verschachteln von geordneten, ungeordneten und Definitionslisten
Eine Definitionsliste innerhalb von geordneten oder ungeordneten Listen beginnt mit einem <dl> Elements innerhalb eines <li> Elements.
Geordnete oder ungeordnete Listen innerhalb von Definitionslisten beginnen mit einem <ul> oder <ol> Element innerhalb eines <dd> Elements.
Beispiel des W3C:
HTML-Code:
<dl>
<dt>Zutaten</dt>
<dd>
<ul>
<li>100g Mehl</li>
<li>10g Zucker</li>
<li>1 Tasse Wasser</li>
<li>2 Eier</li>
<li>Salz, Pfeffer</li>
</ul>
</dd>
<dt>Zubereitung</dt>
<dd>
<ol>
<li>Trockene Zutaten gut durchmischen</li>
<li>Flüssige Zutaten dazugeben</li>
<li>10 Minuten rühren</li>
<li>Für eine Stunde bei 300 Grad backen (Ich glaube hier sind Fahrenheit gemeint, Celsius geht meiner nur bis 250 x.x).</li>
</ol>
</dd>
<dt>Hinweis</dt>
<dd>Kann mit Rosinen verfeinert werden</dd>
</dl>
Preisfrage: Was hat das W3C da in seiner HTML 4 Spezifikation zubereitet?
