ungeordnete und geordnete Listen mit UL und OL erstellen
HTML unterscheidet drei verschiedene Arten von Listen.
-
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.
-
-
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.
-
-
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 dem Begriff ungeordnete Liste ist nicht gemeint, dass die Einträge der Liste unsortiert sind. Gemeint ist bloß, dass die Listen-Elemente 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>- Contao CMS
- Joomla CMS
- Typo3 CMS
- WordPress CMS
Dieser Hintergrund repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.
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.
Eine einfache geordnete Liste mit <ol> und <li>
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 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>- Contao CMS
- Joomla CMS
- Typo3 CMS
- 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>.
- Website erstellen
- Web-Design
- Content-Management-Systeme
- Contao CMS
- Joomla CMS
- Typo3 CMS
- WordPress CMS
- Website Themes
Dieser Hintergrund repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.