Listen in HTML erstellen und gestalten

Im HTML-Standard gibt es schon seit sehr langer Zeit Tags, mit denen du Listen in HTML darstellen kannst.

In diesem Artikel stelle ich die verschiedenen Listen-Arten vor und wie du sie entsprechend in deine Website einbinden und gestalten kannst. Dies gehört zum HTML-Grundwissen und ist daher hauptsächlich für HTML-Anfänger interessant.


Schnellnavigation


 

Listen in HTML einfügen

Es gibt in HTML zwei Arten von Listen, die du später in deine Website einbauen kanns: Geordnete Listen sowie ungeordnete Listen.

Sowohl mit dem HTML-Tag <ol> („ordered list“ – geordnete Listen), als auch bspw. mit <ul> („unordered list“ – ungeordnete Listen) kannst du dabei eine solche Liste erstellen. Die einzelnen Punkte einer Liste kannst du anschließend mit den HTML-Tags <li> („list item“ – Listenpunkt) darstellen. Dieses schaut dann beispielsweise wie folgt aus:

 

Beispiel (geordnete Liste):

<ol>
  <li>Diese Liste</li>
  <li>ist ein Beispiel</li>
  <li>für eine geordnete Liste.</li>
</ol>

 

Beispiel (ungeordnete Liste):

<ul>
  <li>Während hingegen</li>
  <li>diese Liste ein Beispiel</li>
  <li>für eine ungeordnete Liste ist</li>
</ul>

 

Auf der Website dargestellt, sieht es dann wie folgt aus:


Live-Beispiel:

Geordnete Liste Ungeordnete Liste
  1. Diese Liste
  2. ist ein Beispiel
  3. für eine geordnete Liste.
  • Während hingegen
  • diese Liste ein Beispiel
  • für eine ungeordnete Liste ist.

Normalerweise stellt der Browser die Elemente einer geordneten Liste mit einer Zahl dar. Eine ungeordnete Liste hingegen stellt der Browser mit einem Bulletpoint dar.

Dieses Verhalten lässt sich aber auch ändern. Wie das funktioniert, zeige ich dir anschließend in den folgenden Punkten.

 

Geordnete Listen

Und zwar gibt es insgesamt fünf verschiedene Typen der geordneten Liste. Diese wählst du dann mit dem Attribut type="...“ aus. In der Standard-Einstellung wählen Browser bei geordneten Listen hingegen das Attribut „1“ aus. Dies erzeugt, wie im Beispiel zuvor gesehen, eine nummerierte Liste, die mit „1“ beginnt.

Im Folgenden möchte ich nun die anderen Listen-Typen kurz vorstellen.

 

<ol type=“a“>

Mit diesem Listen-Typ erzeugst du eine alphabetisch geordnete Liste, die weiterhin mit „a“ beginnt.

 

Beispiel:

<ol type="a">
  <li>Alphabetische Listen</li>
  <li>stellen überhaupt kein</li>
  <li>Problem dar.</li>
</ol>

 


Live-Anzeigebeispiel:

  1. Alphabetische Listen
  2. stellen überhaupt kein
  3. Problem dar.

 

<ol type=“A“>

Auch mit diesem Listen-Typ kannst du eine alphabetisch geordnete Liste erzeugen, welche jedoch später mit „A“ beginnt. Der Unterschied ist, dass man die Buchstaben jedoch nicht klein, sondern groß schreibt.

 

Beispiel:

<ol type="A">
  <li>Magst du lieber</li>
  <li>große Buchstaben?</li>
  <li>Auch kein Problem!</li>
</ol>

 


Live Anzeigebeispiel:

  1. Magst du lieber
  2. große Buchstaben?
  3. Auch kein Problem!

 

<ol type=“i“>

Mit diesem Typ erzeugt man hingegen eine Liste mit kleinen, römischen Ziffern.

 

Beispiel:

<ol type="i">
  <li>Kleine römische Ziffern</li>
  <li>sind mit HTML</li>
  <li>kein Problem.</li>
</ol>

 


Live Anzeigebeispiel:

  1. Kleine römische Ziffern
  2. sind mit HTML
  3. kein Problem.

 

<ol type=“I“>

Mit dem groß geschriebenen „i“ kannst du hiermit ebenfalls eine Liste mit römischen Ziffern erzeugen. Ähnlich den Großbuchstaben sind hier die Ziffern groß geschrieben (z.B. IV für 4).

 

Beispiel:

<ol type="I">
  <li>Du kannst Listen in HTML</li>
  <li>aber auch mit großen</li>
  <li>römischen Ziffern anzeigen lassen.</li>
</ol>

 


Live Anzeigebeispiel:

  1. Du kannst Listen in HTML
  2. aber auch mit großen
  3. römischen Ziffern anzeigen lassen.

 

Weitere Möglichkeiten für geordnete Listen

Für geordnete Listen gibt es des Weiteren noch andere Attribute, mit denen du sie weiter gestalten kannst.

 

Umgekehrt zählen

Geordnete Listen lassen sich aber auch umgekehrt zählen. Dazu dient dabei das in HTML 5 neu eingeführte Attribut reversed.

 

Beispiel:

<ol reversed>
  <li>Rückwärts zählen?</li>
  <li>Auch das geht</li>
  <li>selbstverständlich mit Listen in HTML.</li>
</ol>

 


Live Anzeigebeispiel:

  1. Rückwärts zählen?
  2. Auch das geht
  3. selbstverständlich mit Listen in HTML

 

Hinweis:

Das zuvor gezeigte Beispiel sieht für dich ganz normal aus und die Liste fängt bei „1“ an? Dann verwendest du entweder einen sehr alten Browser (eine Aktualisierung ist in diesem Fall dringend empfohlen), oder aber den Internet Explorer bzw. Edge. Internet Explorer sowie Edge beherrschen dieses HTML 5-Attribut nicht. Firefox, Chrome und Safari hingegen schon.

 

Liste mit einem bestimmten Wert beginnen lassen

Geordnete Listen kannst du aber auch mit einem bestimmten Wert beginnen lassen. Sie müssen demzufolge nicht immer bei 1, A oder I anfangen. Dafür dient das Attribut start="...“, welches du schließlich dem <ol>-Tag ebenfalls hinzufügen kannst.

 

Beispiel:

<ol type="I" start="3">
  <li>Du kannst</li>
  <li>eine Liste auch</li>
  <li>mit einem bestimmten Wert beginnen lassen.</li>
</ol>

 


Live Anzeigebeispiel:

  1. Du kannst
  2. eine Liste auch
  3. mit einem bestimmten Wert beginnen lassen.

 

Hinweis:

Wie du siehst, verwenden auch anderen Listen-Typen ebenfalls ganz normale, arabische Zahlen für das Start-Attribut. Möchtest du hingegen eine alphabetisch geordnete Liste mit dem Buchstaben „D“ beginnen, so würdest du start="4" als Attribut hinzufügen.

 

Ungeordnete Listen

Kommen wir schließlich zum Bereich der ungeordneten Listen. Hier gibt es im Grunde genommen nur eine Darstellungsweise und auch keine großartig gesonderten Attribute, die man im HTML-Tag einstellen kann.

In der Standard-Einstellung sind dabei die Listenpunkte einer ungeordneten Liste mit einem Bulletpoint dargestellt.

 

Beispiel:

<ul>
  <li>Dies ist</li>
  <li>ein Beispiel</li>
  <li>für eine ungeordnete Liste.</li>
</ul>

 


Live Anzeigebeispiel:

  • Dies ist
  • ein Beispiel
  • für eine ungeordnete Liste.

 

Weitere Gestaltungsmöglichkeiten stehen für ungeordnete Listen in HTML allerdings nicht zur Verfügung. Dies müsstest du dann über CSS realisieren, wie ich im folgenden Abschnitt zeige.

 

Listen gestalten

Mit HTML Listen gestalten

Kurzum gesagt: HTML stellt keine Möglichkeiten zur Verfügung, Listen in irgend einer Art und Weise zu gestalten. Lediglich die zuvor beschriebenen Möglichkeiten für geordnete Listen stehen zur Verfügung.

Ungeordnete Listen hingegen lassen sich in HTML gar nicht gestalten. Früher war es jedoch zumindest möglich, die Art des Bulletpoints zu ändern. Aber auch das ist seit HTML 5 nicht mehr möglich. Demzufolge findet die Gestaltung konsequent über CSS statt. Ein paar Beispiele dazu findest du im folgenden Abschnitt.

 

Mit CSS Listen gestalten

Mit CSS stehen dir jedenfalls eine ganze Reihe von Gestaltungsmöglichkeiten zur Verfügung. Ich werde dabei aber nicht auf alle Möglichkeiten eingehen, das wäre auch viel zu viel. Ein Beispiel werde ich jedoch im folgenden Abschnitt zeigen. Ansonsten lässt sich aber sagen, dass nahezu die komplette Palette an CSS-Möglichkeiten für die Gestaltung auch bei den Listen zur Verfügung steht.

So lassen sich z.B. dreieckige Listenzeichen erstellen, man kann sie mit einer eigenen Grafik versehen oder auch farblich gestalten. Bei geordneten Listen lassen sich allerdings nicht nur römische Ziffern anzeigen. Es gibt weiterhin viele andere Möglichkeiten für unterschiedliche Sprach- und Schriftsätze. Ebenso hast du die Möglichkeit, Listen horizontal darzustellen. Für ein Navigationsmenü ist dies beispielsweise sehr praktisch.

 

Symbol der ungeordneten Listen ändern

Auf eine Möglichkeit zur Gestaltung von Listen möchte ich hingegen noch etwas genauer eingehen. Ich erwähnte bei der Erläuterung zur Erstellung einer ungeordneten Liste, dass man früher in HTML mit dem Attribut type="...“ ebenso auch das Listensymbol ändern konnte. Dies funktioniert in HTML 5 bekanntlich aber nicht mehr. Du musst es daher mit CSS realisieren. Wie du es hingegen einbinden kannst, zeige ich dir im folgenden Beispiel.

 

Zuerst musst du natürlich eine Liste auf der Website erstellen.

Beispiel (HTML):

<ul>
  <li>Der Browser zeigt</li>
  <li>diese Liste mit</li>
  <li>einem nicht ausgefüllten Kreis an.</li>
</ul>

 

Danach kannst du im Stylesheet festlegen, welches Listensymbol der Browser anzeigen soll. Für das folgende Beispiel nehme ich einen Kreis, der aber nicht ausgefüllt ist.

Beispiel (CSS):

ul { 
 list-style-type: circle;
}

 


Live Anzeigebeispiel:

  • Der Browser zeigt
  • diese Liste mit
  • einem nicht ausgefüllten Kreis an.

 

Abgesehen von dem Style-Type circle; gibt es überdies noch weitere Typen, die du auswählen kannst. Die im CSS-Standard definierten Typen lauten dabei:

 

Standardsymbole von Listen in HTML
List-Style-Type Bedeutung
list-style-type: disc; Standard-Typ (ausgefüllter Kreis)
list-style-type: circle; Kreis, nicht ausgefüllt
list-style-type: none; Liste ohne Symbol
list-style-type: square; Viereck

 

Darüber hinaus sind deiner Fantasie bei der Gestaltung jedoch keine Grenzen gesetzt. Zuvor hatte ich ja bereits das ein oder andere Beispiel genannt.

Du kennst weitere Möglichkeiten zur Gestaltung und findest, ich sollte diese hier ebenfalls erwähnen? Ich würde mich jedenfalls über weitere Beispiele sehr freuen. Hinterlasse doch einfach einen Kommentar oder schicke mir dein Beispiel über das Kontaktformular zu.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.