Sie sind hier: Startseite -> HTML-Beispielseite -> Phase II: Inhalt -> Aufzählungslisten

HTML-Inhalt: Aufzählungslisten

HTML-Inhalt: Aufzählungslisten mit CSS

Um Text aufzulockern, aber auch um Fakten übersichtlich zusammenzustellen, verwendet man gerne Aufzählungslisten. Diese werden genützt, um beispielsweise die Zutaten für ein Kochrezept in einer Liste zu präsentieren oder als Checkliste für einen Wanderausflug oder auch als to-do-Liste für andere Vorgänge.

Im Bereich vom Webdesign und den Webseiten gibt es zwei Arten von Listen: die geordnete Liste und die ungeordnete Liste, wobei beide fast gleich aussehen, nur dass die geordnete Liste den ol-Tag besitzt und nützt und eine Nummerierung automatisch anbietet. Die ungeordnete Liste hat den ul-Tag und keine Nummerierung, sondern die bekannten Aufzählungssymbole.

Auf Webseiten kann man viele weitere Möglichkeiten nützen, erst recht wenn man mit CSS arbeitet, aber das bringt auch Probleme. So gibt es Aufzählungslisten mit römischen Zahlen oder mit ganz ausgefallenen Sonderzeichen und man kann sein Logo verkleinert als Aufzählungszeichen nützen - nur in erstem Fall ist nie gesichert, ob jeder Browser die Zeichen darstellen kann und im zweiteren Fall kann es kontraproduktiv sein, wenn in einer Liste 20mal untereinander das Logo im Miniformat besteht.

Daher hat man sich von solchen Spielereien eher verabschiedet und bietet die Listen, die man auch verschachteln kann, so an, wie sie ursprünglich gedacht waren. Im Mittelpunkt stehen damit wieder die Inhalte und nicht das Schnick-Schnack der Gestaltung.

Im HTML-Code sehen wir zwei Listen. Ich empfehle wieder das ursprüngliche HTML-Gerüst aus Phase I und den Beispielsatz durch den obigen Code ersetzen. Sieht man sich das Ergebnis im Browser an, dann sehen wir zwei Listen.

Die erste Liste ist eine ungeordnete (ul-Tag) Liste, der eine weitere untergeordnet wurde. Damit ist das Verschachteln auch gleich Demonstriert. Der ul-Tag ist aber nur die Außenhaut der Liste. Jeder Eintrag der Liste wird mit dem li-Tag definiert.

Die zweite Liste ist eine geordnete (ol-Tag) Liste, die nach dem gleichen Prinzip arbeitet. Hier sieht man allerdings die Nummerierung statt der Aufzählungssymbole.

Das Ergebnis sieht so aus: Beispielseite

Wieder haben wir die Möglichkeit, die fix in HTML definierten Listen durch CSS zu verfeinern. Der Aufwand hält sich dabei in Grenzen, denn es gibt nur den ul-/ol-Tag und den li-Tag für die eigentlichen Listeneinträge.

Den Abstand zu den anderen Textelementen, beispielsweise dem letzten und dem nächsten Absatz einer Seite, definiert man über margin im ul-/ol-Tag. Außerdem besteht hier die Möglichkeit, ein anderes Listensystem zu definieren. Ich habe das Quadrat (square) ausgewählt. Andere Möglichkeiten wären ein eigenes Bild, das man per url-Link definiert, wobei hier das oben genannte Problem bestehen kann, dass es vom Inhalt zu sehr ablenkt. Viele Seiten sind von dieser an sich feinen Möglichkeit wieder abgerückt. Weitere Möglichkeiten:

  • square (hier verwendet)
  • disc = gefüllter Kreis
  • none = kein Zeichen
  • circle = Kreis
  • decimal = Dezimalzahlen (1. ,2. , 3.)
  • lower-roman = kleine römische Zahlen (i. ,ii. ,iii.)
  • upper-roman = grosse römische Zahlen (I. ,II. , III.)
  • decimal-leading-zero = Dezimalzahlen mit führender 0 (01. ,02. , 03. )
  • lower-greek = kleine griechische Nummerierung alpha, beta, gamma
  • lower-latin = kleine Ascii-Zeichen (a. ,b., c.)
  • upper-latin = große Ascii-Zeichen (A., B. ,C.)

Es gibt auch exotischere Zeichen wie armenische beispielsweise, wobei nicht jeder Computer und jedes Betriebssystem solche Zeichen unterstützt. Wieder die Empfehlung: CSS in die bereits verwendete styles.css kopieren und die einzelnen Optionen ausprobieren.

Was die Listeneinträge selbst (li-Tag) betrifft, so kann man hier wieder den Abstand festlegen, der somit den Abstand zwischen den einzelnen Einträgen definiert. Oftmals braucht man CSS hier, um das Einrücken der Texte festlegen zu können. Manchmal möchte man das per HTML direkt festgelegte Einrücken reduzieren, manchmal verstärken. Im obigen CSS-Beispiel habe ich mit margin-left den Abstand vom linken Rand um 20 Pixel erhöht, also das Einrücken verstärkt.

Ebenfalls interessant:

Überschrift + Text

Informationen über das HTML-Konzept von Überschrift und Text, SEO-Tipps und CSS-Formatierung.

Textformatierung

Informationen über die Textformatierung mit HTML und Möglichkeiten, CSS einzusetzen.

[aktuelle Seite]

Aufzählungslisten

Informationen über die HTML-Aufzählungslisten in der HTML-Beispielseite und die Formatierung durch CSS.

Bild einbauen

Informationen über das Einbauen eines Bildes in die HTML-Beispielseite und die Formatierung mit CSS.

Startseite

Informationen über die Startseite mit echtem Text für das HTML-Beispielprojekt, die Ausgangspunkt für weitere Seiten ist.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Phase II: Inhalt

Startseite HTML-Beispielseite