Nummerierte und Aufzählungslisten erstellen im HTML5
HTML5-Listen und die Elemente
Zu diesem Thema Nummerierte Listen existiert noch folgender Artikel: Nummerierte Listen im HTML.
HTML enthält Elemente, die speziell zur Erstellung von Listen mit mehreren Elementen gedacht sind. Damit können Sie nummerierte Listen sowie solche mit Gliederungspunkten (sogenannte Bullet Points) und auch Listen mit Beschreibungen erstellen. Diese Listen kann man auch ineinander verschachteln.
Alle Listen werden durch ein Hauptelement gebildet, in dem die Art von Liste angegeben wird (ol, ordered list, für nummerierte Listen, dl, description list, für Beschreibungslisten ul, unordered list, für Aufzählungslisten etc.), und sekundäre Elemente, um festzulegen, welche Art von Elementen man erstellen will (li, list item, für Listenelement in einer ol oder ul, und dt, description term, für den Begriff mit dd für die Beschreibung in einer dl).
Von diesen ist die Aufzählungsliste im Internet als De-facto-Standard fürs Auszeichnen der meisten Arten von Navigation am häufigsten vertreten. Aber alle drei Listentypen haben jeweils ihren eigenen Platz und darum geht es in diesem Kapitel.
Nummerierte und Aufzählungslisten erstellen
Mit der nummerierten Liste kann man z.B. Anweisungen schreiben, wie eine bestimmte Aufgabe schrittweise durchzuführen ist, oder die Gliederung für ein größeres Dokument erstellen, auf Wunsch sogar komplett mit Links zu den entsprechenden Abschnitten. Ebenfalls ist diese Liste die korrekte Wahl zum Auszeichnen einer Breadcrumb-Navigation. Kurz gesagt: für alle Listenelemente, bei denen die Reihenfolge wichtig ist.
Aufzählungslisten sind wahrscheinlich die am häufigsten verwendeten Listen im Netz, weil man sie zur Auszeichnung der Navigation gut nutzen kann.
Listen erstellen
- Geben Sie
<ol>für eine nummerierte oder<ul>für eine Aufzählungsliste ein. Für eine nummerierte Liste können Sie optional die Attributestart,typeundreversedeinfügen. - Tippen Sie
<li>(die ersten beiden Buchstaben von Liste), um das erste Listenelement zu beginnen. Für eine nummerierte Liste können Sie das optionale Attributvalueeinfügen. - Schreiben Sie den Inhalt (z.B. Text, Links oder img-Elemente), der in das Listenelement gehört.
- Mit
</li>schließen Sie jedes Listenelement ab. - Wiederholen Sie die Schritte 2 bis 4 für jedes neue Listenelement.
- Schließen Sie mit
</ol>bzw.</ul>(also passend zum öffnenden Tag aus Schritt 1) ab und beenden Sie damit die Liste.
Es gibt keinen offiziellen Weg, um den Titel einer Liste zu formatieren. Meist ist eine normale Überschrift oder ein Absatz der passende Beginn einer Liste – so wie hier in diesem Beispiel. Es ist üblich, aber nicht erforderlich, die Listenelemente einzurücken, um anzuzeigen, dass sie in einer ol stehen (gilt ebenso bei ul). Deswegen werden sie aber nicht eingerückt dargestellt – dabei handelt sich rein um eine Funktion des CSS, die auf die Liste angewendet wird.
Beispiel
HTML5 bietet neue Elemente für die Definition der Struktur einer Website und die Einbettung von Inhalten. HTML5 ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt. Wir beginnen mit einem kurzen Überblick über HTML5.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<ol>
<li>HTML5 bietet neue Elemente für die Definition der Struktur einer Website.</li>
<li>HTML5 ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt.</li>
<li>Wir beginnen mit einem kurzen Überblick über HTML5.</li>
<li>Die Geschichte von HTML5 beginnt, wie es sich für einen Webstandard gehört, beim W3C.</li>
<li>Doch anders als sonst üblich sollte die Entwicklung von HTML5 zu Beginn außerhalb des W3C vonstatten gehen. ➝ </li>
<li>Denn das World Wide Web Consortium war von der Idee HTML5 anfangs gar nicht begeistert. ➝ </li>
</ol>
</body>
</html>
Die Listenelemente von Aufzählungslisten sind identisch mit denen der nummerierten Listen. Nur das
ul-Element ist anders.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<ul>
<li>HTML5 bietet neue Elemente für die Definition der Struktur einer Website.</li>
<li>HTML5 ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt.</li>
<li>Wir beginnen mit einem kurzen Überblick über HTML5.</li>
<li>Die Geschichte von HTML5 beginnt, wie es sich für einen Webstandard gehört, beim W3C.</li>
<li>Doch anders als sonst üblich sollte die Entwicklung von HTML5 zu Beginn außerhalb des W3C vonstatten gehen. ➝ </li>
<li>Denn das World Wide Web Consortium war von der Idee HTML5 anfangs gar nicht begeistert. ➝ </li>
</ul>
</body>
</html>
Hier ist unsere einfache Aufzählungsliste, bei der römische Ziffern (upper-roman) angewendet werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<ol>
<li>HTML5 bietet neue Elemente für die Definition der Struktur einer Website.</li>
<li>HTML5 ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt.</li>
<li>Wir beginnen mit einem kurzen Überblick über HTML5.</li>
<li>Die Geschichte von HTML5 beginnt, wie es sich für einen Webstandard gehört, beim W3C.</li>
<li>Doch anders als sonst üblich sollte die Entwicklung von HTML5 zu Beginn außerhalb des W3C vonstatten gehen. ➝ </li>
<li>Denn das World Wide Web Consortium war von der Idee HTML5 anfangs gar nicht begeistert. ➝ </li>
</ol>
</body>
</html>
Sie können die Eigenschaft list-style-type auf beliebige Listenelemente anwenden. Wenn Sie auf dieser Seite zwei Listen hätten, von denen eine nicht nummeriert ist, könnten Sie nur für die nummerierte Liste römische Ziffern (in groß) nehmen, indem Sie den Selektor in diesem Beispiel einfach in ol li ändern.
Nun hat auch die nummerierte Liste römische Ziffern (in groß). Beachten Sie, dass die meisten Browser numerische Aufzählungszeichen rechtsbündig ausrichten (aber wie hier zu sehen links vom Inhalt des Listenelements).
Aufzählungszeichen wählen
Wenn Sie eine Liste erstellen, entweder nummeriert oder als Aufzählungsliste, können Sie außerdem die Gestaltung der Aufzählungsgzeichen (Listenpunkte, also sogenannte Bullets, Ziffern oder Bilder) bestimmen, die links neben jedem Listenelement stehen sollen.
Aufzählungszeichen festlegen
In der CSS-Regel schreiben Sie list-style-type: zeichen, wobei zeichen einen der folgenden Werte übernehmen kann:
- disc (•)
- circle (⚬)
- square (■)
- decimal (1, 2, 3, . . .)
- upper-alpha (A, B, C, . . .)
- lower-alpha (a, b, c, . . .)
- upper-roman (I, II, III, IV, . . .)
- lower-roman (i, ii, iii, iv, . . .)