Aufzählungen in HTML: Die einzige Anleitung, die du benötigst

Aufzählungen in HTML wirst du für jede erfolgreiche Webseite benötigen, spätestens wenn du eine Navigation erstellt.

Sie zählen eindeutig zu den top 10 und deshalb solltest du hier besonders aufmerksam sein, weil du es aufjedenfall benötigst ? .

Wofür ist der ganze Spaß nützlich?

Im Prinzip gehören Aufzählungen zur Textformatierung und werden auch deshalb oft dafür in HTML eingesetzt.

Wie bereits auch schon im Intro angemerkt wird die Liste auch sehr gerne für eine Navigation genutzt, weil die Navigationspunkte jeweils einen Listenpunkt widerspiegelt.

Was sind die Anwendungsfälle?

Es gibt viele verschiedene Anwendungsfälle, wobei man es einsetzen kann. Navigation muss ich ja nicht nochmal erwähnen ? .

Wenn du vor dem Problem stehst, eine art Liste darzustellen, dann setze es auch ein.

Hier sind paar andere Beispiele für dich

  • Todo
  • Innerhalb deines Contents
  • Telefonliste

Wie setze ich es ein?

Jetzt zeige ich dir genau wie du es in HTML einsetzt:

<ul>
 <li>Listenpunkt 1</li>
 <li>Listenpunkt 2</li>
</ul>

Mit <ul> wird eine ungeordnete Liste eingeleitet und innerhalb dessen werden die Listenpunkte mit dem Tag <li> erstellt. Du kannst natürlich so viele wie möglich nutzen.

Neben dem <ul> Tag, das jeweils vor jedem Listenpunkt einen Punkt hat, gibt es auch noch das <ol> Tag, das vor jedem Listenpunkt eine Zahl nach Reihe besitzt:

<ol>
 <li>Listenpunkt 1</li>
</ol>

ungeordnete Liste <ul>: Aufzählungszeichen ändern

Es gibt noch 3 andere Aufzählungszeichen, die du nutzen kannst:

<ul type="circle">
 <li></li>
</ul>

<ul type="disc">
 <li></li>
</ul>

<ul type="square">
 <li></li>
</ul>

geordnete Liste <ol>: Aufzählungszeichen ändern

Bei der geordneten Liste gibt es noch 4 andere Aufzählungszeichen, die ich dir gerne zeigen möchte:

TypBezeichnung
type=“i“ oder type=“I“Römische Zeichen
type=“a“ oder type=“A“Buchstaben
<ol type="I">
 <li>Listenpunkt 1</li>
 <li>Listenpunkt 2</li>
 <li>Listenpunkt 3</li>
</ol>

<ol type="i">
 <li>Listenpunkt 1</li>
 <li>Listenpunkt 2</li>
 <li>Listenpunkt 3</li>
</ol>

<ol type="A">
 <li>Listenpunkt 1</li>
 <li>Listenpunkt 2</li>
 <li>Listenpunkt 3</li>
</ol>

<ol type="a">
 <li>Listenpunkt 1</li>
 <li>Listenpunkt 2</li>
 <li>Listenpunkt 3</li>
</ol>

Verschachtelte Liste

Natürlich kannst du auch eine Aufzählung verschalten und das geht ziemlich einfach in HTML. Beispiel gefällig?

<ul>
<li>Listenpunkt 1</li>
<ul>
<li>Listenpunkt 1.1</li>
<li>Listenpunkt 1.2</li>
</ul>
</ul>

Wie du siehst brauchst du einfach noch ein <ul> Tag in den 1. <ul> erstellen und somit wird der 2. zur untergeordneten Liste.

Bonus: Listen mit CSS formatieren

Solltest du interesse haben deine Listen mit CSS zu formatieren, dann kann ich dir nur diesen link ans Herz legen. Damit kannst du deine Aufzählungen noch genauer verändern und kann deshalb für das ein oder andere Projekt interessant sein.

>