HTML Grundlagen: Was ist der Unterschied zwischen <ul> und <ol>?

ungeordnete und geordnete Listen mit UL und OL erstellen

HTML unterscheidet drei verschiedene Listen Typen.

  1. ungeordnete Listen bzw. Aufzählungsliste
    • Eine ungeordnete Liste wird mit dem <ul> Tag (ul für Englisch »unordered list«). definiert.
    • Das abschließende Tag </ul> ist notwendig.
    • Die einzelnen Listen-Elemente beginnen mit dem <li> Tag und werden mit </li> abgeschlossen.
    • Standardmäßig werden die Listen-Elemente mit vorangestellten Aufzählungszeichen ⏺ (Englisch: »bullet point«) dargestellt.

  2. geordnete Listen bzw. nummerierte Listen
    • Eine geordnete Liste wird mit dem <ol> Tag (ol für Englisch »ordered list«). definiert.
    • Das abschließende Tag </ol> ist notwendig.
    • Die einzelnen Listen-Elemente beginnen mit dem <li> Tag und werden mit </li> abgeschlossen.
    • Die Listen-Elemente werden bei dieser Liste nummeriert.

  3. Beschreibungslisten bzw. Definitionslisten
    • Eine Beschreibungsliste wird mit dem dl Tag (dl für Englisch »description list«) definiert.
    • Da diese Art Liste selten benutzt wird, wird dieser Listentyp hier nicht weiter berücksichtigt.

Die Bezeichnungen »ungeordnete Liste« und »geordnete Liste« sind etwas irreführend, da bei diesen beiden Listen-Typen die Listen-Elemente sortiert angegeben werden. Die Listen-Elemente der geordneten Liste werden nicht automatisch sortiert.

Mit ungeordnete Liste ist nicht gemeint, dass die Listen-Elemente »durcheinander« sind. Gemeint ist bloß, dass die Listen-Elemente nicht nummeriert sind.

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

<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

Die einzelnen Elemente der UL Liste stehen standardmäßig untereinander, weil LI ein Block-Element ist. Mit CSS kann die vertikale Liste aber in eine horizontale Liste umgewandelt werden.

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

Die Definition einer geordneten Liste mit ol erzeugt zusammen mit li für jedes Listen-Element automatisch eine nummerierte Aufzählung der Listen-Elemente.

<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

Verschachtelte Listen

Listen können verschachtelt werden. Das bedeutet, dass innerhalb einer Liste eine weitere Liste eingefügt wird. Zwischen <li> und </li> einer übergeordneten Liste kann eine weitere Liste definiert werden. Die übergeordnete und untergeordnete Liste dürfen einen unterschiedlichen Listentyp haben. Eine ungeordnete Liste kann zum Beispiel als Unterliste bzw. Sub-Liste in eine geordnete Liste eingefügt werden.

<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