Erstellen einer ungeordneten Liste mit dem HTML-Tag <ul>

Um in HTML eine ungeordnete Liste zu erstellen, verwenden wir das <ul>-Tag. Der Begriff "ungeordnet" bezieht sich dabei auf die Tatsache, dass die Elemente in der Liste nicht in einer spezifischen Reihenfolge angezeigt werden. In der Regel wird jedes Element in einer ungeordneten Liste durch einen Bullet Point dargestellt.

Verwendung von <ul> und <li>

Der <ul>-Tag wird in Kombination mit dem <li>-Tag (Listenelement) verwendet. Jedes Listenelement innerhalb einer <ul> Liste wird mit einem eigenen <li>-Tag markiert. Hier ist ein einfaches Beispiel:

<ul>
  <li>Kaffee</li>
  <li>Tee</li>
  <li>Milch</li>
</ul>

In diesem Beispiel erstellt der <ul>-Tag eine ungeordnete Liste und die <li>-Tags definieren die Listenelemente. Das Resultat wäre eine Liste mit den drei Elementen: Kaffee, Tee und Milch. Jedes Element erhält einen Bullet Point vor dem Text.

Alternativen zu <ul>

Es gibt auch andere Arten von Listen in HTML, die durch unterschiedliche Tags definiert werden. Beispielsweise wird für eine geordnete Liste, in der die Elemente in einer festgelegten Reihenfolge angezeigt werden (meist nummeriert oder alphabetisch), das <ol>-Tag verwendet.

Der <dl>-Tag wird für Beschreibungslisten verwendet, die zum Darstellen einer Liste von Begriffen zusammen mit ihren Beschreibungen dienen. Jedoch können weder <ol> noch <dl> verwendet werden, um eine ungeordnete Liste zu erstellen. Dafür ist ausschließlich das <ul>-Tag zuständig.

Best Practices

Beim Erstellen von Listen in HTML ist es wichtig, klar und konsistent in Ihrer Formatierung zu bleiben. Stellen Sie sicher, dass jedes <li>-Element innerhalb des umgebenden <ul>-Tags liegt und dass Sie die entsprechenden Tags verwenden, abhängig davon, welche Art von Liste Sie erstellen möchten.

Des Weiteren ist es aus Gründen der Zugänglichkeit (Accessibility) empfehlenswert, kurze und prägnante Listenelemente zu verwenden und wo nötig, weitere Informationen über die aria-Attribute zur Verfügung zu stellen.