Im ersten Teil meines kleinen HTML-Kurses für Journalisten habe ich einfache Tags erklärt, die im täglichen Einsatz häufig genutzt werden. Im zweiten Teil erkläre ich, wie man Listen mit HTML formatiert.Listen waren schon immer beliebt. Das Internet hingegen kommt ohne Listen gar nicht aus. Denn mit ihnen lässt sich auch das komplexeste Thema auf wenige Punkte herunterbrechen. Listen sind übersichtlich und quasi im Vorbeigehen schnell zu erfassen. Listen geben Auskunft zu so ziemlich allem, was man sich vorstellen kann. Grund genug also, sich mit ihnen zu befassen.
Mit HTML lassen sich drei unterschiedliche Listentypen generieren: geordnete Listen <ol>, ungeordnete Listen <ul> sowie Beschreibungslisten <dl>, die ich in dieser Reihenfolge vorstellen möchte:
Geordnete Listen
Das Tag <ol> (ol steht für englisch: ordered list) leitet eine geordnete, meist durchnumerierte Liste ein. Die einzelnen Listeneinträge werden per <li>Listeneintrag 1</li> (li steht für englisch: list item) generiert. Der Befehl </ol> beendet die Liste. Konkret sieht der Code dann so aus:
<ol>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
<li>Listeneintrag 2</li>
</ol>
Der Leser sieht stattdessen folgende Liste
- Listeneintrag 1
- Listeneintrag 2
- Listeneintrag 3
Weitere Möglichkeiten, eine geordnete Liste zu formatieren, werden auf wiki.selfhtml.org beschrieben.
Die Aufzählungsliste
Eine ungeordnete Liste beginnt mit dem Tag <ul> (ul steht für englisch: unordered list). Das Tag kommt bei reinen Aufzählungslisten ohne erkennbare Hierarchie zum Einsatz. Genutzt wird es etwa, um Produkteigenschaften, Argumentationsketten, aber auch Menüs übersichtlich darzustellen. Die einzelnen Listeneinträge werden daher nicht durchnummeriert, sondern mit einem Aufzählungszeichen (Bullet) eingeleitet. Der Aufbau einer unnumerierten Liste unterscheidet sich nur durch das einleitende <ul> sowie das abschließende </ul> von einer geordneten Liste.
Konkret sieht der Code dann so aus:
<ul>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
<li>Listeneintrag 2</li>
</ul>
Der Leser sieht stattdessen folgende Liste
- Listeneintrag 1
- Listeneintrag 2
- Listeneintrag 3
Weitere Möglichkeiten, eine geordnete Liste zu formatieren, werden auf wiki.selfhtml.org beschrieben.
Die Definitionsliste
Eine Definitionsliste wird mit dem Tag <dl> (dl steht für englisch: definition- bzw. description list) eingeklammert. Mit ihnen lassen sich beispielsweise Begriffe und ihre Definitionen übersichtlich darstellen. Jeder Eintrag einer Beschreibungsliste besteht immer aus mindestens zwei Teilen: Dem zu eläuternden Begriff, der zwischen die Tags <dt> und </dt> geschrieben wird (dt steht für englisch: description term) sowie der Bedeutung, welche mit den Tags <dd> und </dd> (dd steht für englisch: (description description) eingefasst wird. Während sich die ersten beiden Listentypen auch mit Hausmitteln von WordPress erstellen lassen, müssen Definitionslisten händisch getippt werden.
Konkret sieht der Code dann so aus:
<dl>
<dt>Begriff 1</dt>
<dd>Definition 1</dd>
<dt>Begriff 2</dt>
<dd>Definition 2</dd>
<dt>Begriff 3</dt>
<dd>Definition 3</dd>
</dl>
Der Leser sieht stattdessen folgende Liste:
- Begriff 1
- Definition 1
- Begriff 2
- Definition 2
- Begriff 3
- Definition 3
Weitere Möglichkeiten, eine geordnete Liste zu formatieren, werden auf wiki.selfhtml.org beschrieben.