BESTE WEBSITE FÜR WEBENTWICKLER
HTML5-Lektionen für Anfänger

Ua En Es

HTML -Ungeordnete Listen


Das HTML-Tag <ul> definiert eine ungeordnete Liste (mit Aufzählungszeichen).


Ungeordnete HTML-Liste

Eine ungeordnete Liste beginnt mit dem Tag <ul>. Jedes Listenelement beginnt mit dem Tag <li>.

Die Listenelemente werden standardmäßig mit Aufzählungszeichen (kleinen schwarzen Kreisen) markiert:

Beispiel

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

Ungeordnete HTML-Liste – Wählen Sie Listenelementmarkierung

Die CSS-Eigenschaft list-style-type wird verwendet, um den Stil der Listenelementmarkierung zu definieren. Es kann einen der folgenden Werte haben:

Wert Beschreibung
disc Setzen Sie die Listenelementmarkierung auf ein Aufzählungszeichen (Standard)
circle Setzen Sie die Listenelementmarkierung auf einen Kreis
square Setzen Sie die Listenelementmarkierung auf ein Quadrat
none Die Listenelemente werden nicht markiert

Beispiel - Disc

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

Beispiel - Circle

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

Beispiel — Square

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

Beispiel — None

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

Verschachtelte HTML-Listen

Listen können verschachtelt werden (Liste innerhalb der Liste):

Beispiel

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
Try it Yourself »

Hinweis: Ein Listenelement (<li>) kann eine neue Liste und andere HTML-Elemente wie Bilder und Links usw. enthalten.


Horizontale Liste mit CSS

HTML-Listen können mit CSS auf viele verschiedene Arten gestaltet werden.

Eine beliebte Möglichkeit besteht darin, eine Liste horizontal zu gestalten, um ein Navigationsmenü zu erstellen:

Beispiel

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
Try it Yourself »

Tipp: Viel mehr über CSS erfahren Sie in unserem CSS-Tutorial.


Kapitelzusammenfassung

  • Verwenden Sie das HTML-Element <ul>, um eine ungeordnete Liste zu definieren
  • Verwenden Sie die CSS-Eigenschaft list-style-type, um die Listenelementmarkierung zu definieren
  • Verwenden Sie das HTML-Element <li>, um ein Listenelement zu definieren
  • Listen können verschachtelt werden
  • Listenelemente können andere HTML-Elemente enthalten
  • Verwenden Sie die CSS-Eigenschaft float:left, um eine Liste horizontal anzuzeigen

HTML-Listen-Tags

Tag Beschreibung
<ul> Definiert eine ungeordnete Liste
<ol> Definieren Sie eine geordnete Liste
<li> Definiert ein Listenelement
<dl> Definiert eine Beschreibungsliste
<dt> Definiert einen Begriff in einer Beschreibungsliste
<dd> Beschreibt den Begriff in einer Beschreibungsliste

Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz.



Kommentare