Listen in der HTML Webseite einsetzen

Posted in Allgemeines, Grundlagen, HTML on 11/16/2010 12:21 by Hoegerl_Karl

Häufig werden Listen in Dokumenten benötigt. HTML bietet drei verschiedene Listentypen.

Die ungeordnete Liste
Dieser Listentyp hat ein Zeichen am Beginn der Auflistung. Oft wird dieser Typ auch als Liste mit Bullets oder unstrukturierte Liste bezeichnet.
Die nummerierte Liste
Die mummerierte Liste wird auch als Aufzählungsliste bezeichnet. Denn eine fortlaufende Nummerierung sorgt für die strukturierte Darstellung.
Die definierte Liste
Die Definitionsliste wird selten eingesetzt. Sie wird hauptsächlich für Glossare verwendet.

Die ungeordnete Liste

Die ungeordnete Liste wird meist für Aufzählungen verwendet, bei denen es keine bestimmte Reihenfolge gibt. Der Tag dafür lautet <ul>
Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Listen</title>
 </head>
 <body>
 <h1>Listen im Dokument verwenden</h1>
 <ul>  <!-- Ungeordnete Liste -->
 <li>Listenpunkt</li> <!-- Listenpunkt -->
 <li>Listenpunkt</li>
 <ul> <!-- Eingerückte ungeordnete Liste -->
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
 </ul>
 <li>Listenpunkt</li>
 </ul>
 </body>
</html>

Ergebnis:

  • Listenpunkt
  • Listenpunkt
    • Listenpunkt
    • Listenpunkt
  • Listenpunkt

Die nummerierte Liste

Mit der Aufzählungsliste lassen sich Informationen strukturiert darstellen. Das Wichtigste kommt zuerst und die Wichtigkeit sinkt je später der Punkt gelistet wird. Die Struktur ist die gleiche wie bei der ungeordneten Liste. Statt dem Tag <ul> wird der Tag <ol> verwendet.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Listen</title>
 </head>
 <body>
 <h1>Listen im Dokument verwenden</h1>
 <ol>  <!-- Nummerierte Liste -->
 <li>Listenpunkt</li> <!-- Listenpunkt -->
 <li>Listenpunkt</li>
 <ol> <!-- Eingerückte Nummerierte Liste -->
 <li>Listenpunkt</li>
 <li>Listenpunkt</li>
 </ol>
 <li>Listenpunkt</li>
 </ol>
 </body>
</html>

Ergebnis:

  1. Listenpunkt
  2. Listenpunkt
    1. Listenpunkt
    2. Listenpunkt
  3. Listenpunkt

Die Definitionsliste

Der dritte Listentyp wird nur selten verwendet. Er eignet sich hervorragend für Glossars. Dazu werden die Tags

…
<dl>
<dt>Begriff</dt>
<dd>Erklärung des Ausdrucks</dd>
</dl>
…

Ergebnis:

Glossereintrag 1
Hier steht die Erklärung
Glossereintrag 2
Hier steht die Erklärung

 

zur Übersicht

Zuletzt aktualisiert von .