Startseite
Listen in HTML  

Feedback     Interesse an einer CD ?    


Aufzählungen

Ein häufig benutztes Element zum optischen Auszeichnen oder Hervorheben von Textabsätzen ist die Aufzählung. Durch die Aufteilung der Einträge in getrennte Absätze können Sie einen Text zusätzlich unterteilen und strukturieren. Umfasst ein Absatz mehrere Zeilen, werden die Folgezeilen eingezogen dargestellt, d.h., der linke Einzug bis zum Beginn des Listentexts ist für alle Zeilen gleich.

<ul>
<li>
Text</li>
</ul>

Der Tag <ul> (unordered list = ungeordnete Liste) leitet eine Aufzählung ein, die bis zum abschließenden Tag </ul> fortgeführt wird.

Der Tag <li> (list item = Listenelement) gibt jeweils einen Listenpunkt an.

Beispiel:
<h4>Eine einfache Aufzählung</h4>
<ul>
<li>Der erste Eintrag ist etwas länger und deshalb wird die Zeile automatisch umgebrochen.</li>
<li>Zweiter Eintrag</li>
<li>Letzter Eintrag</li>
</ul>

Eine einfache Aufzählung

  • Der erste Eintrag ist etwas länger und deshalb wird die Zeile automatisch umgebrochen.
  • Zweiter Eintrag
  • Letzter Eintrag

Festlegung des Aufzählungszeichens

Die Tags <ul> und <li> besitzen zusätzliche Attribute, über die Sie festlegen können, welches Symbol bei einer nicht nummerierten Aufzählung dargestellt werden soll.

<ul type="Art">
<li type="Art">
</li>
</ul>

Geben Sie den Typ des Aufzählungssymbols im Tag <ul> an, werden alle Listeneinträge automatisch mit dem jeweiligen Zeichen dargestellt.

Bei der Angabe des Zeichens innerhalb eines <li>-Tags wirkt sich dieses nur auf dieses eine Element aus.

  • disc = gefüllter Kreis (standardmäßig voreingestellt)
  • square = gefülltes Quadrat
  • circle = ungefüllter Kreis

Beispiel:
<ul type="square">
   <li>Dies ist ein quadratisches Zeichen</li>
   <li type="disc">Dies ist ein gefüllter Kreis</li>
   <li type="circle">Dies ist ein ungefüllter Kreis</li>
</ul>
  • Dies ist ein quadratisches Zeichen
  • Dies ist ein gefüllter Kreis
  • Dies ist ein ungefüllter Kreis


Nummerierte Aufzählungen

Neben Aufzählungen lassen sich auch Nummerierungen zum Hevorheben von Textabsätzen verwenden. Die Nummerierung erfolgt dabei automatisch mit dem verwendeten Typ. Eine solche Nummerierung wird in HTML als sortierte Liste (ordered List) bezeichnet und mit dem Tag <ol> eingeleitet. Der Browser nummeriert dabei jeden der angegebenen Listeneinträge in aufsteigender Reihenfolge.

<ol>
<li>
Text</li>
</ol>

Der Tag <ol> (ordered list = geordnete Liste) leitet eine nummerierte Liste ein, die bis zum abschließenden Tag </ol> fortgeführt wird.

Die Tags <li> und </li> (list item = Listenelement) schließen jeweils einen Listenpunkt ab.

Wenn Sie einen Listeneintrag innerhalb des Tags <ul> definieren, ohne den Tag <li> anzugeben, wird dieser ohne Aufzählungszeichen und etwas eingezogen dargestellt.

Beispiel:
Einzug ohne Nummerierung
<ul>
xxxxxxxxxxxxxxxxxxxx<br>
yyyyyyyyyyyyyyyyyyyy
</ul>
Einzug ohne Nummerierung
    xxxxxxxxxxxxxxxxxxxx
    yyyyyyyyyyyyyyyyyyyy

Über das Attribut type wird die Art der Nummerierung festgelegt.
Durch die Angabe des value-Attributs können Sie den Index der Nummerierung manuell setzen.
Es werden dann die folgenden Listeneinträge fortlaufend mit dem neuen Index nummeriert.

Beispiel:
<ol type="1">
   <li>Netzstecker ziehen</li>
   <li>Gerät öffnen</li>
   <li>hineinsehen</li>
   <li>nichts verstehen</li>
   <li>Gerät schließen</li>
   <li value="10">Fachmann rufen</li>
   <li>abwarten</li>
</ol>

Wie repariere ich einen Videorecorder?

  1. Netzstecker ziehen
  2. Gerät öffnen
  3. hineinsehen
  4. nichts verstehen
  5. Gerät schließen
  6. Fachmann rufen
  7. abwarten

Startwert festlegen

Die Nummerierung einer Liste beginnt standardmäßig mit dem Wert 1. Mithilfe des Attributs start können Sie jedoch festlegen, dass die Nummerierung mit einem anderen Wert beginnen soll. Alternativ können Sie auch direkt im ersten Listeneintrag über das Attribut value den Startwert festlegen.

<ol start="Wert"> Das Attribut start erlaubt Ihnen den Startwert beim Beginn der Nummerierung festzulegen. Dabei werden nur positive Werte korrekt interpretiert, z.B.
    <ol start="3">
    <ol start="271">

Beispiel:
<ol start="10">
   <li>Erster Eintrag</li>
   <li>Zweiter Eintrag</li>
   <li>Dritter Eintrag</li>
</ol>

Startwert bei Aufzählungen

  1. Erster Eintrag
  2. Zweiter Eintrag
  3. Dritter Eintrag

Art der Nummerierung

Die Art der Nummerierung muss nicht in der arabischen Zahlenform erfolgen, sondern Sie können auch römische Zahlen oder die Buchstaben des Alphabets verwenden.

<ol type="Art"> Mit dem Attribut type können Sie die Art der Nummerierung festlegen.
In HTML sind folgende Werte erlaubt:
1 = arabische Zahlen
I, i = römische Zahlen, Groß - und Kleinschreibung
A, a = alphabetisch, Groß - und Kleinschreibung
Aus <ol type="1"> wird 1, 2, 3, 4, 5
Aus <ol type="A"> wird A, B, C, D, E
Aus <ol type="a"> wird a, b, c, d, e
Aus <ol type="I"> wird I, II, III, IV, V
Aus <ol type="i"> wird i, ii, iii, iv, v

Sie können die beiden möglichen Attribute start und type auch miteinander kombinieren. Dabei wird der Startwert automatisch in das entsprechende Nummerierungszeichen umgewandelt.

Beispiel:
<h4>Verschachtelte Nummerierungen</h4>
<ol type="1">
   <b>normal</b>, also arabisch
   <li>Dresden</li>
   <li>Leipzig</li>
</ol>
<ol type="A">
   <b>Großbuchstaben</b>
   <li>Dresden</li>
   <li>Leipzig</li>
</ol>
<ol type="A" start="5">
   <b>Kleinbuchstaben</b>, beginnend mit e
   <li>Dresden</li>
   <li>Leipzig</li>
</ol>
<ol type="I" start="10">
   <b>Römisch</b>, beginnend mit X
   <li>Dresden</li>
   <li>Leipzig</li>
</ol>
<ol type="i">
   <b>Römisch klein</b>
   <li>Dresden</li>
   <li>Leipzig</li>
</ol>

Verschachtelte Nummerierungen

    normal, also arabisch
  1. Dresden
  2. Leipzig
    Großbuchstaben
  1. Dresden
  2. Leipzig
    Kleinbuchstaben, beginnend mit e
  1. Dresden
  2. Leipzig
    Römisch, beginnend mit X
  1. Dresden
  2. Leipzig
    Römisch klein
  1. Dresden
  2. Leipzig

Verschachtelte Aufzählungen

HTML bietet Ihnen die Möglichkeit, mehrere Aufzählungen und Nummerierungen ineinander zu verschachteln. Statt eines Listeneintrags über den Tag <li> fügen Sie über die Tags <ol> und <ul> eine weitere Liste ein. Diese wird automatisch etwas mehr eingerückt. In der Regel verwenden die Browser unterschiedliche Aufzählungszeichen für die Verschachtelungsebenen.

Beispiel:
<ul>
   <li><b>Dresden</b></li>
   <li><b>Leipzig</b></li>
        <ul>
          <li>Hauptbahnhof</li>
          <li>Völkerschlachtdenkmal: einige Daten</li>
          <ol type="a">
            <li><i>über 500 Stufen bis zur Plattform</i></li>
            <li><i>91m hoch</i></li>
            <li><i>im Jahre 1913 eingeweiht</i></li>
          </ol>
          <li>Zoologischer Garten</li>
        </ul>
   <li><b>Chemnitz</b></li>
</ul>

Freistaat Sachsen

  • Dresden
  • Leipzig
    • Hauptbahnhof
    • Völkerschlachtdenkmal: einige Daten
      1. über 500 Stufen bis zur Plattform
      2. 91m hoch
      3. im Jahre 1913 eingeweiht
    • Zoologischer Garten
  • Chemnitz


Definitionslisten

Diese Art von Listen sind für Definitionen von Begriffen geeignet.

<dl>
   <dt>Ausdruck</dt>
   <dd>Erläuterung</dd>
</dl>
Der Tag <dl> (definition list = Definitionsliste) leitet die Definitionsliste ein, die bis zum abschließenden Tag </dl> fortgeführt wird. In der Liste werden Paare der beiden folgenden Terme eingefügt.
    <dt> (definition term = Definitionsausdruck) gibt den zu definierenden Ausdruck an.
    <dt> (definition description = Definitionsbeschreibung) formatiert den erläuternden Text.

Beispiel:

<dl>
   <dt><b>Auto</b></dt>
   <dd>Ein komfortables Fortbewegungsmittel
      <ul>
         Audi<br>
         Volkswagen<br>
         Ford
      </ul>
   </dd>
   <dt>Fahrrad</dt>
   <dd>Ein Fortbewegungsmittel für sportliche Menschen</dd>
   <dt>Eisenbahn</dt>
   <dd>Für den Rest der Bevölkerung</dd>
</dl>

Auto
Ein komfortables Fortbewegungsmittel
    Audi
    Volkswagen
    Ford
Fahrrad
Ein Fortbewegungsmittel für sportliche Menschen
Eisenbahn
Für den Rest der Bevölkerung


Kompakte Aufzählungen

Alle drei vorgestellten Aufzählungstypen können das zusätzliche Attribut compact enthalten. Damit wird eine Liste in einer kompakten Form dargestellt.

<dl compact> Mithilfe des Attributs compact verändern Sie die Darstellungsform der Listen.

Beispiel:

<dl compact>
   <dt><b>Auto</b></dt>
   <dd>Ein komfortables Fortbewegungsmittel
      <ul>
         Audi<br>
         Volkswagen<br>
         Ford
      </ul>
   </dd>
   <dt>Fahrrad</dt>
   <dd>Ein Fortbewegungsmittel für sportliche Menschen</dd>
   <dt>Eisenbahn</dt>
   <dd>Für den Rest der Bevölkerung</dd>
</dl>

Auto
Ein komfortables Fortbewegungsmittel
    Audi
    Volkswagen
    Ford
Fahrrad
Ein Fortbewegungsmittel für sportliche Menschen
Eisenbahn
Für den Rest der Bevölkerung

Browser interpretieren das Attribut compact nur in Verbindung mit dem Tag <dl>. Die kompakte Form ist dabei abhängig von der Länge des zu definierenden Ausdrucks und der eingestellten Schriftgröße. Nur der Internet-Explorer unterstützt dieses Attribut noch.