Startseite ⇒ Listen ⇒ Ungeordnete Liste
1664 Aufrufe

Eine Ungeordnete HTML Liste erstellen

Die Elementtypen <ul> und <li>

ul = unordered list = ungeordnete Liste

li = list item = Listenpunkt


Beschreibung:

Eine ungeordnete Liste ist eine Reihe von Elementen, die in irgendeiner Weise miteinander in einer logischen Verbindung stehen, aber in keiner besonderen Reihenfolge aufgezählt werden müssen.


Das HTML Element <ul>:

Die ungeordnete Liste wird mit dem HTML Element <ul> eingeleitet. Danach folgen die Listeneinträge. Gibt es keine Listeneinträge mehr, so wird die ungeordnete Liste mit dem HTML Element </li> abgeschlossen.


Das HTML Element <li>:

Jeder einzelne Listeneintrag muß zwischen den HTML-Elementen <li> und </li> stehen.


Liste ohne Aufzählungszeichen:

Um eine HTML Liste ohne Aufzählungszeichen zu erstellen, müssen Sie mit CSS arbeiten. Es ist zwar möglich, das Listenpunkt-Element einfach wegzulassen und Linsteneinträge mit einem Zeilenumbruch <br /> voneinander zu trennen, doch diese Sytax ist "INVALIDE".


Liste mit Aufzählungszeichen:

Wollen Sie eine HTML Liste mit Aufzählungszeichen, so müssen Sie das einleitende Element <li> und das abschließende Element </li> benutzen. Standardmäßig ist hier als Aufzählungszeichen der Wert "disc" eingestellt.


Quelltext:

HTML Listen:
<ul>
  <li>Ungeordnete Liste</li>
  <li>Geordnete Liste</li>
  <li>Definitionsliste</li>
  <li>Verzeichnisliste</li>
  <li>Menüliste</li>
</ul>

Ausgabe:

HTML Listen:
  • Ungeordnete Liste
  • Geordnete Liste
  • Definitionsliste
  • Verzeichnisliste
  • Menüliste

Das Attribut type:

Sie können das Aussehen der Listenpunkte in der HTML Liste verändern, indem Sie das Attribut type="Wert" mit einem entsprechendem Wert im einleitenden Element <ul> angeben. Wie die Zeichen genau ausgegeben werden entscheidet der Browser. Grundsätzlichen werden 3 Typen von Listenpunkten unterschieden.


Quelltext: 
Das Attribut type="disc"
<ul type="disc">
  <li>disc = Platte (Standard)</li>
</ul>

Das Attribut type="square"
<ul type="square">
  <li>square = Quadrat </li>
</ul>

Das Attribut type="circle"
<ul type="circle">
  <li>circle = Kreis </li>
</ul>
Ausgabe:
Das Attribut type="disc"
  • disc = Scheibe (Standard)
Das Attribut type="square"
  • square = Quadrat
Das Attribut type="circle"
  • circle = Kreis

Sie können das Attribut type="Wert" auch in Verbindung mit dem Element <li> nutzen. Dadurch können Sie innerhalb einer HTML Liste das Aufzählungszeichen ändern.


Quelltext: 
Das Attribut "type" im Element <li>:
<ul>
  <li type="disc">HTML</li>
  <li type="square">CSS</li>
  <li type="circle">Java</li>
</ul>
Ausgabe:
Das Attribut "type" im Element <li>:
  • HTML
  • CSS
  • Java


Weiterführende Informationen:


Weblinks: