HTML Grundlagen: Listen erstellen leicht gemacht – Schritt-für-Schritt Anleitung zu ul und ol

English

ungeordnete und geordnete Listen mit UL und OL erstellen

HTML-Listen sind ein wesentliches Design-Element, um eine abwechslungsreiche und übersichtliche Webseite zu gestalten. Listen werden verwendet, um Text oder Text mit Bild übersichtlich in Listenform darzustellen. Sie sorgen für Übersicht, weil man auf einen Blick alle wichtigen Fakten erkennen kann.


HTML unterscheidet drei verschiedene Arten von Listen.

  1. ungeordnete Listen bzw. Aufzählungslisten

    • Eine ungeordnete Liste wird mit dem HTML UL-Tag (für Englisch: unordered List) definiert.

    • Die ungeordnete Liste wird mit <ul> eingeleitet und muss mit </ul> abgeschlossen werden.

    • Die Listen-Elemente werden mit dem HTML LI-Tag (für Englisch: List Item) definiert. Jedes Element der Liste wird mit <li> eingeleitet und sollte immer mit </li> abgeschlossen werden.

    • Standardmäßig werden die Elemente der Liste mit einem vorangestellten Aufzählungszeichen ⏺ (Englisch: Bullet Point) dargestellt.


  2. geordnete Listen bzw. nummerierte Listen

    • Eine geordnete Liste wird mit dem HTML OL-Tag (für Englisch: ordered List) definiert.

    • Die geordnete Liste wird mit <ol> eingeleitet und muss mit </ol> abgeschlossen werden.

    • Die einzelnen Listenelemente der geordneten Liste beginnen (wie bei der ungeordneten Liste) mit dem <li>-Tag und müssen mit </li> abgeschlossen werden.

    • Bei der geordneten Liste werden die einzelnen Elemente der Liste automatisch nummeriert.


  3. Beschreibungslisten bzw. Definitionslisten

    • Eine Beschreibungsliste Definitionsliste) wird mit dem DL-Tag (für Englisch: Description List) definiert.

    • Da dieser Listentyp nur selten benutzt wird, wird er hier nicht weiter berücksichtigt.


Die Bezeichnungen ungeordnete Liste und geordnete Liste sind etwas irreführend, da bei diesen beiden Listentypen die Elemente der Liste stets sortiert angegeben werden. Die Listeneinträge der geordneten Liste werden nicht automatisch sortiert, sondern sie werden nummeriert.

Der Begriff ungeordnete Liste meint nicht, dass die Listen-Elemente unsortiert sind. Gemeint ist bloß, dass die Elemente der Liste nicht nummeriert werden.

Eine einfache ungeordnete Liste mit <ul> und <li> erstellen

Beispiel 
<ul>
    <li>Contao CMS</li>
    <li>Joomla CMS</li>
    <li>Typo3 CMS</li>
    <li>WordPress CMS</li>
</ul>
Ausgabe des HTML Codes
  • Contao CMS
  • Joomla CMS
  • Typo3 CMS
  • WordPress CMS

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Die Elemente der UL-Liste stehen standardmäßig untereinander, weil das LI-Tag ein Block-Element ist. Mit CSS kann man die vertikale Liste in eine horizontale Liste umwandeln.

Eine einfache geordnete Liste mit <ol> und <li>

Die geordnete Liste (OL-Liste) wird genauso wie die ungeordnete Liste erstellt. Man muss dazu nur <ul> und </ul> durch <ol> und </ol> ersetzen. Die geordnete Liste erzeugt zusammen mit LI für alle Elemente der Liste eine nummerierte Aufzählung.

Beispiel 
<ol>
    <li>Contao CMS</li>
    <li>Joomla CMS</li>
    <li>Typo3 CMS</li>
    <li>WordPress CMS</li>
</ol>
Ausgabe des HTML Codes
  1. Contao CMS
  2. Joomla CMS
  3. Typo3 CMS
  4. WordPress CMS

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Verschachtelte Listen

Listen kann man verschachteln. Das bedeutet, dass man innerhalb einer Liste eine weitere Liste einfügen kann.

Zwischen <li> und </li> einer übergeordneten Liste kann man eine weitere Liste einfügen. Die Listen dürfen unterschiedliche Listentypen haben.

Eine ungeordnete Liste kann man z.B. als Unterliste bzw. Sub-Liste in eine geordnete Liste einfügen.

<ol>
    <li>Website erstellen</li>
    <li>Web-Design</li>
    <li>Content-Management-Systeme
        <ul>
            <li>Contao CMS</li>
            <li>Joomla CMS</li>
            <li>Typo3 CMS</li>
            <li>WordPress CMS</li>
        </ul>
    </li>
    <li>Website Themes</li>
</ol>

Nach dem Text Content-Management-Systeme wird das öffnende <li> noch nicht geschlossen. Stattdessen wird die vollständige innere Liste (grün dargestellt) eingefügt. Erst danach folgt das abschließende </li>.

Ausgabe des HTML Codes
  1. Website erstellen
  2. Web-Design
  3. Content-Management-Systeme
    • Contao CMS
    • Joomla CMS
    • Typo3 CMS
    • WordPress CMS
  4. Website Themes

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Gestalte die Liste mit CSS entsprechend deinen Wünschen.