Strukturierung von Dokumenten - Listen


Typen von Listen in Texten

Analog zu den meisten Textverarbeitungsprogrammen wird auch in HTML zwischen drei Typen von Listen unterschieden:

Listen sind immer zweistufig aufgebaut: Sie bestehen aus der Liste selbst und beliebig vielen darin enthaltenen Listeneinträgen. Die Listeneinträge werden in HTML als Listenelemente bezeichnet.

Aufzählungen

Eine Liste, bei der die Reihenfolge der Listenelemente keine Bedeutung hat, ist unsortiert (unordered list). Eine unsortierte Liste ist vergleichbar mit "Aufzählungen" in Textverarbeitungsprogrammen. Ein Listenelement (list element) steht in einer eigenen Zeile und wird oft mit einem • markiert.

Beispiel

Im folgenden Beispiel sind die Bestandteile der Listen zusätzlich mit einer farbigen Umrandung markiert: rot ist die gesamte Liste (Aufzählung) markiert, blau die einzelnen Listenelemente. Standardmäßig stellt ein Browser Listen und ihre Listenelemente ohne Umrandung dar, hier dient die farbige Umrandung nur der Verdeutlichung des zweistufigen Listenaufbaus.

See the Pen HTML - Unsortierte Liste by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

Nummerierungen

Eine Liste, bei der die Reihenfolge der Listenelemente wichtig ist und diese daher durchnummeriert werden, ist sortiert (ordered list). Eine sortierte Liste ist vergleichbar mit "Nummerierungen" in Textverarbeitungsprogrammen. Der Browser fügt den Listenelementen (list element) die Listennummern automatisch hinzu.

Auch sortierte Listen sind zweistufig aufgebaut: Sie bestehen aus der Liste selbst (<ol>...</ol>) und beliebig vielen darin enthaltenen Listenelementen (<li>...</li>).

Beispiel

Im folgenden Beispiel sind die Bestandteile der Listen zusätzlich mit einer farbigen Umrandung markiert: violett ist die Liste markiert, grün die einzelnen Listenelemente. Standardmäßig stellt ein Browser Listen und ihre Listenelemente ohne Umrandung dar.

See the Pen HTML - Sortierte Liste by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

Beschreibungslisten

Eine Liste, die aus Name-Wert-Paaren besteht, ist eine Beschreibungsliste (description list).

Typische Beschreibungslisten im Alltag sind Glossare oder Wörterbücher. Die Name-Wert-Paare können beispielsweise sein:

  • Begriffe und ihre Definitionen,
  • Fragen und Antworten usw.

Beschreibungslisten sind ebenfalls zweistufig aufgebaut: Sie bestehen aus der Liste selbst (<dl>...</dl>) und beliebig vielen darin enthaltenen Begriffen (description term, <dt>...</dt>) und ihren Erläuterungen (description definition, <dd>...</dd>).

Eine Beschreibungsliste muss immer Paare aus beiden Elementen dt und dd als Kinder enthalten, wobei das dt-Element vor dem zugehörigen dd-Element stehen muss.

Beispiel

Im folgenden Beispiel sind die Bestandteile der Listen zusätzlich mit einer farbigen Umrandung markiert: violett ist die gesamte Liste markiert, grün und orange die einzelnen Listenelemente. Standardmäßig stellt ein Browser Listen und ihre Listenelemente ohne Umrandung dar.

See the Pen HTML - Beschreibungsliste by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

Aufgaben zum Thema Listen