SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen

SELFHTML/Navigationshilfen HTML/XHTML Elemente zur Textstrukturierung
	Listen
	Aufzählungsliste definieren Nummerierte Liste definieren Definitionsliste definieren Verzeichnis- oder Menüliste definieren HTML-Eigenschaften für Listen Listen formatieren mit CSS Weitere Informationen

Aufzählungsliste definieren

Aufzählungslisten sind z.B. von Bedeutung, um Produkteigenschaften oder Argumente für eine These übersichtlich darzustellen. Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen (Bullet) versehen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Aufz&auml;hlungslisten definieren</title>
</head>
<body>
<h1>Liste wichtiger Reime</h1>

<ul>
  <li>Probieren geht &uuml;ber Studieren</li>
  <li>Liebe geht &uuml;ber Triebe</li>
  <li>Tante f&auml;llt &uuml;ber Kante</li>
</ul>

</body>
</html>

Erläuterung:

<ul> leitet eine Aufzählungsliste ein (ul = unordered list = unsortierte Liste). Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag. Es ist zwar nach HTML-Standard erlaubt, das abschließende </li>-Tag wegzulassen, doch davon ist abzuraten. </ul> beendet die Liste.

Wie das Bullet dargestellt wird, bestimmt dabei der Web-Browser.

Das Verschachteln von Listen ist ebenfalls möglich.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Verschachtelte Listen</title>
</head>
<body>
<h1>Dies und das im Web</h1>

<ul>
  <li>Suchmaschinen
    <ul>
      <li>Google</li>
      <li>AltaVista</li>
      <li>Fireball</li>
    </ul>
  </li>
  <li>Verzeichnisse
    <ul>
      <li>Yahoo</li>
      <li>Web.de</li>
      <li>Dino-Online</li>
    </ul>
  </li>
  <li>Was anderes</li>
  <li>Noch was anderes</li>
</ul>

</body>
</html>

Erläuterung:

Zwischen <li> und </li> darf eine komplette weitere Liste stehen. Auch andere Listentypen sind dabei erlaubt.

Nummerierte Liste definieren

Nummerierte Listen sind z.B. von Bedeutung, um nacheinander auszuführende Aktionen oder Rangfolgen übersichtlich darzustellen. Bei einer nummerierten Liste werden alle Listeneinträge automatisch durchnummeriert.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nummerierte Liste definieren</title>
</head>
<body>
<h1>Todo-Liste</h1>

<ol>
  <li>bei Anette vorbeischauen</li>
  <li>bei Bianca vorbeischauen</li>
  <li>bei Christine vorbeischauen</li>
  <!-- usw. -->
</ol>

</body>
</html>

Erläuterung:

<ol> leitet eine nummerierte Liste ein (ol = ordered list = nummerierte Liste). Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag. Es ist zwar nach HTML-Standard erlaubt, das abschließende </li>-Tag wegzulassen, doch davon ist abzuraten. </ol> beendet die Liste.

Beachten Sie:

Verschachteln von nummerierten Listen ist ebenfalls möglich, bewirkt aber keine Gesamtnummerierung. Automatische Nummerierungshierarchien wie 1, 1.1, 1.1.1, sind mit HTML alleine nicht möglich.

Definitionsliste definieren

Definitionslisten sind für Glossare gedacht. Glossare bestehen aus einer Liste von Einträgen. Die Einträge eines Glossars bestehen aus einem zu definierenden Ausdruck (z.B. ein Fachbegriff) und der zugehörigen Definition.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Definitionslisten definieren</title>
</head>
<body>
<h1>DF&Uuml;-Abkürzungen</h1>

<dl>
  <dt>AA</dt>
  <dd>Auto Answer (Modem)</dd>
  <dt>AAE</dt>
  <dd>Allgemeine Anschalte-Erlaubnis</dd>
  <dt>AARP</dt>
  <dd>Appletalk Address Resolution Protocol</dd>
  <!-- usw. -->
</dl>

</body>
</html>

Erläuterung:

<dl> leitet eine Definitionsliste ein (dl = definition list = Definitionsliste).
<dt> leitet einen zu definierenden Ausdruck ein (dt = definition (list) term = Ausdruck in der Definitionsliste).
<dd> leitet eine Definition eines Ausdrucks ein (dd = definition (list) definition = Definition in der Definitionsliste).
</dl> beendet die Liste. Die End-Tags </dt> und </dd> dürfen zwar auch fehlen, doch davon ist abzuraten.

Beachten Sie:

Das Verschachteln von Definitionslisten ist ebenfalls möglich. Dadurch können Sie baumartige Strukturen im Text abbilden. Netscape verwendet beispielsweise beim Aufbau seiner Lesezeichendatei verschachtelte Definitionslisten, um die baumartig strukturierbaren Lesezeichen zu verwalten. "Innere" Listen müssen dabei innerhalb des dd-Elements notiert werden.

Die Abfolge von dt- und dd-Elementen innerhalb einer dl-Liste ist nicht streng geregelt. Es dürfen auch mehrere dt- oder dd-Elemente hintereinander folgen.

Verzeichnis- oder Menüliste definieren

Verzeichnis- und Menülisten werden in der Praxis kaum verwendet und sind auch mittlerweile als deprecated gekennzeichnet, sollen also künftig aus dem HTML-Standard entfallen. Sie werden von den heutigen Browsern entweder nicht mehr oder nicht anders dargestellt als gewöhnliche Aufzählungslisten.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Verzeichnis- oder Men&uuml;liste definieren</title>
</head>
<body>
<h1>Verzeichnisse und Men&uuml;s</h1>

<dir>
  <li>/usr/home/</li>
  <li>/usr/home/web/</li>
  <li>/usr/home/web/data/</li>
</dir>

<menu>
  <li>Datei</li>
  <li>Bearbeiten</li>
  <li>Ansicht</li>
</menu>

</body>
</html>

Erläuterung:

Eine Verzeichnisliste leiten Sie mit <dir> ein und beenden sie durch </dir> (dir = directory = Verzeichnis). <menu> leitet eine Menüliste ein, </menu> beendet die Menüliste. Mit <li> beginnt in beiden Listentypen ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). Das End-Tag </li> am Ende eines Listeneintrags ist nicht zwingend erforderlich, aber zu empfehlen.

Beachten Sie:

Verzeichnis- und Menülisten dürfen - im Gegensatz zu Aufzählungslisten - keine absatzerzeugenden Elemente zwischen <li> und </li> enthalten. Sie sind nur für zeilenartige Listen gedacht.

HTML-Eigenschaften für Listen

Es gibt eine Reihe von Attributen, die das Erscheinungsbild von Listen beeinflussen. So lassen sich beispielsweise nummerierte Listen auch alphabetisch und römisch nummerieren, und für Aufzählungslisten lässt sich der Typ des Bullet-Zeichens festlegen. Doch all diese HTML-Attribute sind mittlerweile als deprecated gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Stattdessen sollten Sie Listen mit CSS formatieren.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eigenschaften von Listen</title>
</head>
<body>
<h1>Listen mit HTML-Attributen</h1>

<h2>Aufzählungsliste</h2>

<ul type="square">
  <li>Probieren geht über Studieren</li>
  <li>Liebe geht über Triebe</li>
  <li>Tante fällt über Kante</li>
</ul>

<h2>Nummerierte Liste, römisch</h2>

<ol type="I">
  <li value="10">bei Anette vorbeischauen (Wert 10)</li>
  <li>bei Bianca vorbeischauen</li>
  <li>bei Christine vorbeischauen</li>
</ol>

<h2>Nummerierte Liste mit Startwert 7</h2>

<ol start="7">
  <li>bei Anette vorbeischauen</li>
  <li>bei Bianca vorbeischauen</li>
  <li>bei Christine vorbeischauen</li>
</ol>

<h2>Definitionsliste</h2>

<dl compact>
  <dt>AA</dt>
  <dd>Auto Answer (Modem)</dd>
  <dt>AAE</dt>
  <dd>Allgemeine Anschalte-Erlaubnis</dd>
  <dt>AARP</dt>
  <dd>Appletalk Address Resolution Protocol</dd>
</dl>

</body>
</html>

Erläuterung:

Für Aufzählungslisten können Sie den Bullet-Typ bestimmen:
Mit <ul type="circle"> bestimmen Sie ein rundes Bullet (circle = Kreis).
Mit <ul type="square"> bestimmen Sie ein eckiges Bullet (square = Rechteck).
Mit <ul type="disc"> bestimmen Sie ein Dateisymbol als Bullet (disc = Datenträger wie Disketten oder Festplatten).

Für nummerierte Listen können Sie die Art der Nummerierung bestimmen:
Mit <ol type="I"> werden die Listeneinträge mit I., II., III., IV. usw. nummeriert.
Mit <ol type="i"> werden die Listeneinträge mit i., ii., iii., iv. usw. nummeriert.
Mit <ol type="A"> werden die Listeneinträge mit A., B., C. usw. nummeriert.
Mit <ol type="a"> werden die Listeneinträge mit a., b., c. usw. nummeriert.

Mit start innerhalb des einleitenden Tags von <ol> können Sie einen beliebigen Startwert setzen, z.B. <ol start="7">. Die Nummerierung beginnt dann bei 7.

Mit value innerhalb des Tags von <li> in einer nummerierten Liste können Sie den Startwert beliebig neu setzen, z.B. auf <li value="15">. Die Nummerierung fährt dann bei 15 fort.

Mit dem Attribut compact innerhalb des einleitenden Tags einer beliebigen Liste können Sie die kompaktere Darstellung bestimmen. Dies wurde allerdings von den Browsern noch nie oder nur vorübergehend mal interpretiert.

Listen formatieren mit CSS

Wie eine Liste genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen, um Listen darzustellen. Mit Stylesheets können Sie ganze Listen und ihre Listenpunkte jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Listenformatierung
Schriftformatierung
Ausrichtung und Absatzkontrolle
Außenrand und Abstand

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Listen formatieren mit CSS</title>
</head>
<body>
<h1>Listen mit CSS</h1>

<h2>Aufz&auml;hlungsliste</h2>

<ul style="list-style-type:disc; color:red; font-weight:bold;">
  <li>Probieren geht &uuml;ber Studieren</li>
  <li>Liebe geht &uuml;ber Triebe</li>
  <li>Tante f&auml;llt &uuml;ber Kante</li>
</ul>

<h2>Nummerierte Liste</h2>

<ol style="list-style-type:upper-roman; font-weight:bold;">
  <li style="color:blue">bei Anette vorbeischauen</li>
  <li style="color:maroon">bei Bianca vorbeischauen</li>
  <li style="color:olive">bei Christine vorbeischauen</li>
</ol>

<h2>Definitionsliste</h2>

<dl style="font-size:0.7em; font-family:Verdana,Arial,sans-serif">
  <dt>AA</dt>
  <dd>Auto Answer (Modem)</dd>
  <dt>AAE</dt>
  <dd>Allgemeine Anschalte-Erlaubnis</dd>
  <dt>AARP</dt>
  <dd>Appletalk Address Resolution Protocol</dd>
</dl>

</body>
</html>

Erläuterung:

Im Beispiel wird für eine Aufzählungsliste (<ul>...</ul>) bestimmt, dass sie ein Disk-Symbol als Bullet-Zeichen erhält, fett und in roter Farbe erscheint. Für eine nummerierte Liste (<ol>...</ol>) wird bestimmt, dass sie in römischen großen Ziffern zählt, und dass ihre Einträge fett dargestellt werden. Ihre einzelnen Listenpunkte werden zudem in unterschiedlichen Farben dargestellt. Für eine Definitionsliste (<dl>...</dl>) wird eine kleinere Schriftgröße als normal und eine bestimmte Schriftart bestimmt.

Beachten Sie:

Netscape 4.x hat noch einige Probleme mit CSS und zeigt das obige Beispiel nicht ganz so an wie gewünscht.

Weitere Informationen

In der HTML-Referenz finden Sie Angaben darüber, wo die verschiedenen Listentypen vorkommen dürfen, welche anderen Elemente sie enthalten dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz für Aufzählungslisten (<ul>...</ul>)
Attribut-Referenz für Aufzählungslisten (<ul>...</ul>)
Element-Referenz für nummerierte Listen (<ol>...</ol>)
Attribut-Referenz für nummerierte Listen (<ol>...</ol>)
Element-Referenz für Definitionslisten (<dl>...</dl>)
Attribut-Referenz für Definitionslisten (<dl>...</dl>)
Element-Referenz für Verzeichnislisten (<dir>...</dir>)
Attribut-Referenz für Verzeichnislisten (<dir>...</dir>)
Element-Referenz für Menülisten (<menu>...</menu>)
Attribut-Referenz für Menülisten (<menu>...</menu>)


	Zitate und Adressen
	Zeilenumbruch

SELFHTML/Navigationshilfen HTML/XHTML Elemente zur Textstrukturierung