Listen und Glossare in HTML
HTML für Einsteiger - Kapitel 6
von Thomas Salvador.
In HTML werden einige Listentypen zur Strukturierung angeboten, die wichtigsten sind
- die numerierte Liste,
- die unnumerierte Liste und
- die beschreibende Liste oder Glossar.
die sich freilich auch kombinieren (verschachteln) lassen.
Darüber hinaus werden von einigen Browser zusätzliche Attribute ausgewertet.
Listen sind grundsätzlich eigene Absätze, so daß sie zur Klasse der blockorientierten Gestaltungselemente gehören.
Numerierte Liste
Bei der numerierten Liste wird jedem Listeneintrag aufsteigend und fortlaufend eine Nummer vorangestellt. Die gesamte Liste wird durch den ol-Tag (ordered list) gekapselt, jeder Listeneintrag durch den li-Tag (list item).
Syntax und Beispiel:
<ol> <li> Eintrag </li> <li> Eintrag </li> <li> Eintrag </li> </ol>
liefert
|
Für jedes Element kann ein beliebiger HTML-Block, insbesondere also wiederum Listen, eingesetzt werden.
Erweiterung:
Manche Browser werten das Attribut type aus:
<ol type="a">- Alphabetische Numerierung kleingeschrieben: a., b., c., d., ...
<ol type="A">- Alphabetische Numerierung großgeschrieben: A., B., C., D., ...
<ol type="i">- Römische Numerierung kleingeschrieben: i., ii., iii., iv., ...
<ol type="I">- Römische Numerierung großgeschrieben: I., II., III., IV., ...
Beispiel: (Source wie oben, zusätzlich das jeweilige type-Attribut)
| type="a" | type="A" |
|---|---|
|
|
| type="i" | type="I" |
|
|
Mit dem Attribut start kann die Numerierung bei einer
bestimmten Zahl begonnen werden, z.B. ab 3 mit <ol start=3>.
Mit dem Attribut value kann die Numerierung innerhalb einer Liste
beeinflußt werden. Dabei wirkt <li value="42"> so, daß
die Numerierung beginnend bei diesem Element mit 42 fortgesetzt wird.
Beispiel:
<ol start="3"> <li> Eintrag </li> <li> Eintrag </li> <li value="42"> Eintrag </li> <li> Eintrag </li> </ol>
liefert
|
Schließlich kann man mit dem Flag compact vorschlagen, daß eine kompaktere Darstellung verwendet werden soll.
Unnumerierte Liste
Bei der unnumerierten Liste wird jedem Listeneintrag ein Aufzählungssymbol vorangestellt. Die gesamte Liste wird durch den ul-Tag (unordered list) gekapselt, jeder Listeneintrag durch den li-Tag (list item).
Syntax und Beispiel:
<ul> <li> erster Eintrag </li> <li> zweiter Eintrag </li> <li> letzter Eintrag </li> </ul>
liefert
|
Für jedes Element kann ein beliebiger HTML-Block, insbesondere also wiederum Listen, eingesetzt werden.
Erweiterung:
Manche Browser werten das Attribut type aus:
<ul type="circle">- Aufzählungszeichen ist ein kleiner Kreis. Oft Default für die zweite Ebene.
<ul type="square">- Aufzählungszeichen ist ein kleines Quadrat. Oft Default für die dritte Ebene.
<ul type="disc">- Aufzählungszeichen ist ein kleiner ausgefüllter Kreis (Bullet). Meist Default für die erste Ebene.
Beispiel: (Source wie oben, zusätzlich das jeweilige type-Attribut)
| type="circle" | type="square" | type="disc" |
|---|---|---|
|
|
|
Schließlich kann man mit dem Attribut compact vorschlagen, daß eine kompaktere Darstellung verwendet werden soll.
Glossar
Ein Glossar (oder allgemeiner eine deskriptive Liste) wird durch den dl-Tag (definition list) gekapselt. Jeder Eintrag besteht aus zwei Teilen, einem durch den dt-Tag gekapselten Titel des Eintrag (definition term) und dem durch den dd-Tag gekapselten Eintrag (definition) selbst. D.h. es kann ein (beliebiges) HTML-Element als (Aufzählungs-)Symbol verwendet, auch wenn dies i.a. Text sein wird. Insbesondere kann der Text stilistisch aufbereitet werden (s. Beispiel bei Kombination).
Syntax und Beispiel:
<dl> <dt>Titel-1</dt> <dd>Definition-1</dd> <dt>HTML</dt> <dd>HyperText Markup Language.</dd> <dt>WWW</dt> <dd>World Wide Web.</dd> </dl>
liefert
|
Kombination
Wie bereits erwähnt können die Listen beliebig geschachtelt werden. Dabei sollte allerdings die Verschachtelungstiefe nicht allzu hoch sein.
Beispiel:
<dl> <dt><b>binaural</b></dt> <dd>auch: biaural <ul> <li>Trennung: bin-aural</li> <li>Bedeutung: <ol> <li>beide Ohren betreffend</li> <li>zweikanalig </ol> </li> <li>Gegensatz: monaural</li> <li>vgl: stereophon, quadrophonisch</li> </ul> </dd> <dt><i>WWW</i></dt> <dd>World Wide Web.</dd> </dl>
liefert
|
Verwandte Artikel und Seiten
- oben genannte Teile und
- sonstige HTML-Artikel
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.
Copyright © 1999-2010 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei 1 und 1.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.
Hat Ihnen diese Seite gefallen oder geholfen? Geben Sie mir einen Kaffee aus (Kaffeekasse)! Danke.
Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/32.html .