Listen und Glossare in HTML

springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]

• 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, wobei verschiedene Zählsysteme genutzt werden können. 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.

Mit Attributen können Sie die Liste beeinflussen:

• type legt den Nummerierungstyp fest,
• start bestimmt den Startwert der Nummerierung, und
• value legt den Wert eines Eintrages fest.

type

Mit dem Attribut type legen Sie den Nummerierungstyp fest:

<ol type="1"> (Voreinstellung)

Nummerierung mit Dezimalzahlen: 1., 2., 3., 4., ...

<ol type="1">
  <li> Eintrag </li>
  <li> Eintrag </li>
  <li> Eintrag </li>
</ol>

liefert

1. Eintrag
2. Eintrag
3. Eintrag

<ol type="a">

Alphabetische Nummerierung kleingeschrieben: a., b., c., d., ...

<ol type="a">
  <li> Eintrag </li>
  <li> Eintrag </li>
  <li> Eintrag </li>
</ol>

liefert

1. Eintrag
2. Eintrag
3. Eintrag

<ol type="A">

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

<ol type="A">
  <li> Eintrag </li>
  <li> Eintrag </li>
  <li> Eintrag </li>
</ol>

liefert

1. Eintrag
2. Eintrag
3. Eintrag

<ol type="i">

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

<ol type="i">
  <li> Eintrag </li>
  <li> Eintrag </li>
  <li> Eintrag </li>
</ol>

liefert

1. Eintrag
2. Eintrag
3. Eintrag

<ol type="I">

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

<ol type="I">
  <li> Eintrag </li>
  <li> Eintrag </li>
  <li> Eintrag </li>
</ol>

liefert

1. Eintrag
2. Eintrag
3. Eintrag

start

Mit dem Attribut start legen Sie den ersten Wert eines Eintrages fest.

<ol start="42">
  <li> Eintrag </li>
  <li> Eintrag </li>
  <li> Eintrag </li>
</ol>

liefert

Dies kann zum Beispiel nützlich sein, wenn eine längere nummerierte Liste unterbrochen und dann fortgesetzt werden soll:

<p>vorher...</p>
<ol>
  <li> Eintrag </li>
  <li> Eintrag </li>
  <li> Eintrag </li>
</ol>
<p>...Unterbrechung...</p>
<ol start="4">
  <li> Eintrag </li>
  <li> Eintrag </li>
  <li> Eintrag </li>
</ol>
<p>...nachher</p>

liefert

value

Mit dem Attribut value beeinflussen Sie die Nummerierung innerhalb einer Liste. Dabei wird die Nummerierung des Listeneintrages auf den Wert gesetzt und dann fortgesetzt.

<ol>
  <li> Eintrag </li>
  <li> Eintrag </li>
  <li value="42"> Eintrag </li>
  <li> Eintrag </li>
  <li value="22"> Eintrag </li>
  <li> Eintrag </li>
</ol>

liefert

Unnummerierte Liste

Bei der unnummerierten Liste wird jedem Listeneintrag ein Aufzählungssymbol vorangestellt, wobei mehrere Symbole genutzt werden können. 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.

Mit dem type Attribut können Sie das Symbol wählen.

type

Das Attribut type legt das Aufzählungszeichen fest. Browser nutzen für jede Ebene eine Voreinstellung:

<ul type="disc">

Ausgefüllter Kreis (Bullet). Oft Voreinstellung für die erste Ebene...

<ul type="disc">
  <li> erster Eintrag </li>
  <li> zweiter Eintrag </li>
  <li> letzter Eintrag </li>
</ul>

liefert

• erster Eintrag
• zweiter Eintrag
• letzter Eintrag

<ul type="circle">

Kreis. Oft Voreinstellung für die zweite Ebene...

<ul type="circle">
  <li> erster Eintrag </li>
  <li> zweiter Eintrag </li>
  <li> letzter Eintrag </li>
</ul>

liefert

• erster Eintrag
• zweiter Eintrag
• letzter Eintrag

<ul type="square">

Ausgefülltes Quadrat. Oft Voreinstellung für die dritte Ebene...

<ul type="square">
  <li> erster Eintrag </li>
  <li> zweiter Eintrag </li>
  <li> letzter Eintrag </li>
</ul>

liefert

• erster Eintrag
• zweiter Eintrag
• letzter Eintrag

Glossar

Ein Glossar (oder allgemeiner eine deskriptive Liste) wird durch den dl-Tag (description list) gekapselt. Jeder Eintrag besteht aus zwei Teilen,

• einem durch den dt-Tag gekapselten Titel des Eintrag (Term, definition term), und
• die durch den dd-Tag gekapselte Beschreibung (definition description) 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).

Ebenso kann die Beschreibung HTML Elemente enthalten, zum Beispiel Absätze oder Bilder enthalten.

<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.

<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</li>
        </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

Sie sehen, dass Sie zum Beispiel die Terme formatieren können. Anstelle der genutzten Aufzälung und Nummerierung könnten Sie auch weitere Absätze oder Bilder nutzen.

Mit Verweisen erstellen Sie so zum Beispiel auch schnell ein Inhaltsverzeichnis.