SELFHTML

Listen

Informationsseite

nach unten Aufzählungsliste definieren
nach unten Nummerierte Liste definieren
nach unten Definitionsliste definieren
nach unten Verzeichnis- oder Menüliste definieren
nach unten HTML-Eigenschaften für Listen
nach unten Listen formatieren mit CSS
nach unten Weitere Informationen

 nach unten 

HTML 2.0XHTML 1.0MS IE 1.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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:

Beispiel-Seite 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:

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

nach obennach unten

HTML 2.0XHTML 1.0MS IE 1.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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:

Beispiel-Seite 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:

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

nach obennach unten

HTML 2.0XHTML 1.0MS IE 1.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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:

Beispiel-Seite 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 nach oben 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.

nach obennach unten

HTML 2.0XHTML 1.0deprecated (missbilligt)MS IE 1.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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:

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

nach obennach unten

HTML 3.2XHTML 1.0deprecated (missbilligt)MS IE 2.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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 nach unten Listen mit CSS formatieren.

Beispiel:

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

nach obennach unten

HTML 4.0XHTML 1.0MS IE 3.0Netscape 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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 Kapitel 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 Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Seite Listenformatierung
Seite Schriftformatierung
Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand

Beispiel:

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

nach obennach unten

Weitere Informationen

In der Kapitel 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:
Seite Element-Referenz für Aufzählungslisten (<ul>...</ul>)
Seite Attribut-Referenz für Aufzählungslisten (<ul>...</ul>)
Seite Element-Referenz für nummerierte Listen (<ol>...</ol>)
Seite Attribut-Referenz für nummerierte Listen (<ol>...</ol>)
Seite Element-Referenz für Definitionslisten (<dl>...</dl>)
Seite Attribut-Referenz für Definitionslisten (<dl>...</dl>)
Seite Element-Referenz für Verzeichnislisten (<dir>...</dir>)
Seite Attribut-Referenz für Verzeichnislisten (<dir>...</dir>)
Seite Element-Referenz für Menülisten (<menu>...</menu>)
Seite Attribut-Referenz für Menülisten (<menu>...</menu>)

 nach oben
weiter Seite Zitate und Adressen
zurück Seite Zeilenumbruch
 

© 2005 Seite Impressum