HTML Grundlagen: Aufzählungen und Nummerierungen erstellen mit UL und OL • verschachtelte Listen definieren •Listen definieren

HTML unterscheidet drei verschiedene Arten von Listen.

1. ungeordnete Listen bzw. Aufzählungsliste

   • 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.

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

   
   

3. Beschreibungslisten bzw. Definitionslisten

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

   • Da diese Art Liste nur 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 Listentypen die Elemente der Liste stets sortiert angegeben werden. Die Listeneinträge der geordneten Liste werden nicht automatisch sortiert, sondern nummeriert.

Mit ungeordnete Liste ist nicht gemeint, dass die Einträge der Liste durcheinander sind. Gemeint ist bloß, dass die Listen-Elemente nicht nummeriert werden.

<ul>
    <li>Contao CMS</li>
    <li>Joomla CMS</li>
    <li>Typo3 CMS</li>
    <li>WordPress CMS</li>
</ul>

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

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

<ol>
    <li>Contao CMS</li>
    <li>Joomla CMS</li>
    <li>Typo3 CMS</li>
    <li>WordPress CMS</li>
</ol>

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>