---

---

---

---

---

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 nummerierte Liste,
• die unnummerierte 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 dass sie zur Klasse der blockorientierten Gestaltungselemente gehören.

Nummerierte Liste

Bei der nummerierten 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 Nummerierung kleingeschrieben: a., b., c., d., ...

<ol type="A">

Alphabetische Nummerierung großgeschrieben: A., B., C., D., ...

<ol type="i">

Römische Nummerierung kleingeschrieben: i., ii., iii., iv., ...

<ol type="I">

Römische Nummerierung großgeschrieben: I., II., III., IV., ...

Beispiel: (Source wie oben, zusätzlich das jeweilige type-Attribut)

Mit dem Attribut start kann die Nummerierung bei einer bestimmten Zahl begonnen werden, z.B. ab 3 mit <ol start=3>. Mit dem Attribut value kann die Nummerierung innerhalb einer Liste beeinflusst werden. Dabei wirkt <li value="42"> so, dass die Nummerierung 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, dass eine kompaktere Darstellung verwendet werden soll.

Unnummerierte Liste

Bei der unnummerierten 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)

Schließlich kann man mit dem Attribut compact vorschlagen, dass 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-2012 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.

---

---

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/32.html .