Html Tags - <ul>, <ol>, <dl> - Webseiten mit Listen strukturieren

Listen gehören zu den logischen Blockelementen in HTML und sollten deshalb auf Webseiten ihrem Zweck entsprechend, zur übersichtlichen Auflistung von Informationen eingesetzt werden. Neben einer übersichtlichen Anordnung von Aufzählungen oder dem Einsatz in Navigationsmenüs eignen sie sich auch zur Textstrukturierung auf einzelnen Unterseiten einer Website, beispielsweise für Sitemaps oder Register. Dank CSS lassen sie sich mit Bildern und Text ebenfalls gut kombinieren und passend in jedes Layout einfügen. In Enzeklopädien kann dies sehr gut genutzt werden. Es gibt verschiedene Varianten, so beispielsweise geordnete und ungeordnete Aufzählungslisten sowie Definitonslisten.

In Html gibt es verschiedene Attribute, die eine unterschiedliche Gestaltung der Listen erlauben. Diese sind jedoch schon sehr lange als "deprecated" gekennzeichnet und sollten nicht mehr verwendet werden. Stattdessen sollten, die für Listen sehr umfangreichen, CSS-Anweisungen zur Formatierung eingesetzt werden. Ohne CSS-Formatierung kann ihr Aussehen nicht genau bestimmt werden, da die Browser auf ihre eigenen Voreinstellungen für Listen zurückgreifen.

Html-Quelltext Bedeutung und Darstellung in der Website
<ul> </ul> unsortierte Liste
<li> </li> Listenpunkt
<ul>
<li>erster Listenpunkt</li>
<li>zweiter Listenpunkt</li>
<li>dritter Listenpunkt</li>
</ul>
Liste mit Bulletes (Schmuckpunkten)
  • erster Listenpunkt
  • zweiter Listenpunkt
  • dritter Listenpunkt
<ul>
<li>erster Listenpunkt
  <ul>
    <li>erster Listenpunkt der zweiten Liste</li>
    <li>zweiter Listenpunkt der zweiten Liste</li>
  </ul>
</li>
<li>zweiter Listenpunkt erste Liste </li>
</ul>
Verschachtelte unsortierte Aufzählungsliste
Die Listenpunkte der ersten Liste erhalten einen Punkt (browserabhängig) am Anfang, die der zweiten Liste (Unterliste) erhalten einen Kreis (browserabhängig). Der Einzug erfolgt entsprechend der Listenverschachtelung. Die Einzugtiefe ist ebenso browserabhängig. Kann auch sortierte oder Definitionsliste als Unterliste enthalten.
  • erster Listenpunkt
    • erster Listenpunkt der zweiten Liste
    • zweiter Listenpunkt der zweiten Liste
  • zweiter Listenpunkt erste Liste
Zur Übersichtlichkeit des Quelltextes, vor allem beim verschachteln von Listen, kann dieser eingerückt werden - dies hat keinen Einfluß auf das Aussehen der Webseite
</li> Endtag des Listenpunktes - es ist nicht zwingend notwendig ihn zu setzen. Manche Browser zeigen die Webseite ohne Endtag jedoch fehlerhaft an. Der Endtag gehört ebenso zum guten HTML-Stil und sollte deshalb immer gesetzt werden. Die folgenden type-Attribute im <li>-Tag sind als "deprecated" gekennzeichnet und sollten nicht mehr verwendet werden. CSS bietet umfangreiche Formatierungsmöglichkeiten für Listen. Listenpunkte lassen sich per CSS-Anweisung über list-style:none; ausblenden, wie am Beispiel dieser Navigationsleiste zu erkennen ist.
<li type="circle">Ring</li>
  • type="circle" erzeugt einen Ring vor dem Text einer Liste - auch ohne circle ein Ring in einer Unterliste
<li type="square">Quadrat</li>
  • type="square" erzeugt ein Quadrat vor dem Text
<li type="disk">Punkt</li>
  • type="disc" verwenden wenn der Kreis in einer Unterliste gefüllt sein soll angeben
Liste mit Absatz
<ul>
<li><p> Listenpunkt mit Absatz</p></li>
<li>zweiter Punkt</li>
<li>dritter Punkt</li>
</ul >
Liste mit Absatz im ersten Listenpunkt. Es können mehrere Absätze in einem Listenpunkt definiert werden.
  • Listenpunkt mit Absatz

  • zweiter Punkt
  • dritter Punkt
<ol> </ol> sortierte Aufzählungsliste
numerisch aufgelistete Inhalte
<ol>
<li>Punkt eins </li>
<li>Punkt zwei </li>
</ol>
numerisch aufgelistete Inhalte
  1. Punkt eins
  2. Punkt zwei
<ol type="I">
<li>Liste römisch untergliedert</li>
<li>zweiter Listenpunkt
 <ol type="i">
 <li>weitere Untergliederung</li>
 <li>Listenpunkt zwei der zweiten Ebene</li>
 </ol>
</li>
</ol>
alphabetisch aufgelistete Inhalte
statt "i" kann jeder andere Buchstabe des Alphabetes stehen
  1. Liste römisch untergliedert
  2. zweiter Listenpunkt
    1. weitere Untergliederung
    2. Listenpunkt zwei der zweiten Ebene
<dl> </dl> Dieser Listentyp ist für die übersichtliche Darstellung von Definitionen vorgesehen und eignet sich deshalb auch zur Verwendung als Register oder Inhaltsverzeichnis. Er kann auch als Unterliste in Listenpunkten von sortierten und unsortierten Aufzählungslisten aufgenommen werden.
<dt> </dt>
hier steht der zu definierende Begriff
<dd> </dd>
hier steht der Inhalt der Definition
Aufbau einer Definitionsliste
<dl>
<dt>zu definierender Begriff</dt>
<dd>Inhalt der Definition</dd>
<dd>zweiter Absatz der Definition</dd>
<dt>zweiter zu definierender Begriff</dt>
<dd>Inhalt der zweiten Definition</dd>
</dl>
Aufbau einer Definitionsliste
zu definierender Begriff
Inhalt der Definition
zweiter Absatz der Definition
zweiter zu definierender Begriff
Inhalt der zweiten Definition
<dl compact>
<dt>Begriff</dt>
<dd>Definition</dd>
</dl >
Definitionsliste, in engerer Schrift dargestellt (kann auch im ul- oder ol-tag stehen), sollte aber nicht mehr verwendet werden. Stattdessen sollte CSS zur Anwendung kommen. Es hat ohnehin kaum ein Browser bis jetzt dargestellt.
Begriff
Definition
Sortierte, unsortierte und Definitionslisten können durch Unterlisten verschachtelt werden. Vorformatierte Menü- <menu> </menu> und Verzeichnislisten <dir> </dir> konnten sich nicht durchsetzen, sind inzwischen als "deprecated" gekennzeichnet.
Mehr Gestaltungsspielraum durch Grafische Aufzählungspunkte
<img src="img/punkt1.gif" > Der Fantasie sind durch den Einsatz von Grafiken auch bei der Gestaltung von Listenpunkten keine Grenzen gesetzt. Sie können einfach in einem Bildbearbeitungsprogramm einen Punkt nach belieben, zum Layout passend gestalten, speichern und in die Liste einbinden.
Die hier verwendete punkt1.gif muss bei dieser Darstellungsweise genau an der angegebenen Stelle, im Verzeichnispfad liegen (relativ zum Dokument).
&#149; • Ascii-code für einen Punkt (die Größe ändert sich mit der Schriftgröße, kann auch einen Farbwert haben, ist aber kein Listenpunkt)