Eine Ungeordnete HTML Liste erstellen

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 </ul> 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.

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

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.

Das Attribut type="disc"
<ul type="disc">
<li>disc = Scheibe (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>

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.

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