CSS, HTML und Javascript mit {stil}

HTML ul, ol, li • HTML list

Geordnete und ungeordnete Listen mit HTML ul

HTML ul / ol erzeugen ungeordnete Listen und Aufzählungen mit einem Index aus li-Tags. Die Browser markieren die Listenpunkte durch bullets – Kreise oder Punkte – und heben sie durch einen Einzug vom normalen Text ab.

Geordnete und ungeordnete Listen können Zusammenhänge im Schriftbild einer Seite besser herausstellen als einfache Textabsätze.

Eine ungeordnete Aufzählung ist eine Liste von Elementen, die miteinander in einer logischen Verbindung stehen, aber in keiner besonderen Reihenfolge aufgezählt werden müssen. In Listen mit ol sind die Listenpunkte numeriert.

ul – ungeordnete Liste

HTML ul ist ein Block-Tag – beginnt also auf einer neuen Zeile. Innerhalb eines ul-Tags dürfen nur li-Tags liegen. Vor jedem Eintrag der Aufzählung muss ein <li>-Tag gesetzt werden.

Die meisten Browser trennen die Aufzählung von den vorangehenden und folgenden Elementen durch einen Absatz, ziehen jeden Absatz um einige Pixel ein und setzen dem Absatz eine gefüllte Kugel – bullet – voran. Ungeordnete und geordnete Listen können verschachtelt werden und verschachtelte Aufzählungen können verschiedene Aufzählungszeichen aufweisen.

Beispiel: verschachtelte Liste

<ol>
   <li>HTML strukturiert die Inhalte einer Seite
      <ul>
         <li>durch einfache Elemente wie Überschriften und Textabsätze</li>
         <li>durch verschachtelte Elemente wie Aufzählungen, 
         Definitionslisten und Tabellen</li>
      </ul>
   </li>
   <li>CSS formatiert die Inhalte einer Webseite
      <ul>
         <li>CSS ändert Schriften, Farben und Hintergrundfarben</li>
         <li>CSS ändert Größe und Lage der HTML-Blöcke</li>
      </ul>
   </li>
</ol>
  1. HTML strukturiert die Inhalte einer Seite
    • durch einfache Elemente wie Überschriften und Textabsätze
    • durch verschachtelte Elemente wie Aufzählungen, Definitionslisten und Tabellen
  2. CSS formatiert die Inhalte einer Webseite
    • CSS ändert Schriften, Farben und Hintergrundfarben
    • CSS ändert Größe und Lage der HTML-Blöcke

ul Ungeordnete Liste

Ungeordnete Listen um ul sind eine populäre Technik für die Navigation, da sie mit der Verschachtelung eine Hierarchie oder Ebenen mitbringen. Das HTML-Markup ist einfach, spiegelt die Hierarchie der Inhalte wieder und gibt Benutzern mit Readern einen direkten Überblick.

CSS-Eigenschaften für das ul- und ol-Element unterdrücken die Listenkugel, so dass sich Kategorien und Unterkategorien gut herausstellen lassen.

ol Listen mit Ordnungszahlen

Die geordnete Liste mit HTML ol ist das Gegenstück zur ungeordneten Liste. HTML ol setzt einen Index vor jeden Listeneintrag.

Das ol-Tag kennzeichnet den Anfang und das Ende einer geordneten Aufzählung und nummeriert jedes Element mit einem fortlaufenden Index beginnend mit der Zahl 1. Aber auch römische Ziffern oder die Buchstaben des Alphabets können benutzt werden.

Das ol-Tag hat ein eigenes Attribut start für den Anfang des Index. Das erlaubt z.B. eine Unterbrechung der Liste und die Wiederaufnahme.

  1. Sie war nicht in dem Tal geboren, man wußte nicht, woher sie kam,
  2. und schnell war ihre Spur verloren, sobald das Mädchen Abschied nahm.

Formatierung ohne CSS

  1. Der Browser trennt die Aufzählung vom vorangehenden und folgenden Listenelement durch einen Absatz.
  2. Jeder Absatz wird um einige Pixel eingezogen und hat einen eine Index – eine ganze Zahl ab 1.
  3. CSS padding: 1em setzt den Einzug zurück an den linken Rand.
<ol type="a">
    <li>
        Der Browser trennt die Aufzählung …
    </li>
    <li>
        Jeder Absatz wird um einige Pixel …
    </li>
    <li>
        CSS padding: 1em setzt den …
    </li>
</ol>

Attribute für HTML ol

compact
In HTML5 nicht mehr unterstützt. Rendert die Liste kleiner als normal
reversed
Rendert die Liste in umgekehrter Reihenfole (HTML5)
start
Start-Wert des Index
type
Art des Markers: 1, A, a, I, i

HTML li

Das <li>-Tag trennt die einzelnen Elemente der Aufzählung. Das li-Tag ist sowohl in der geordneten Liste ol als auch in der ungeordneten Liste ul erforderlich.

Weder in geordneten noch in ungeordneten Aufzählungen unterliegt der Text in der Aufzählung Einschränkungen – so können die Texte z.B. beliebig lang sein. Innerhalb eines li-Elements dürfen alle HTML-Tags verwendet werden – vom p- oder ul/li-Element bis hin zu Tabellen.

In einer ungeordneten Liste geht jedem Eintrag ein »•« (Bullet oder gefüllter Kreis) voran, in einer Aufzählung eine Ordnungszahl.

Formatierung mit CSS

CSS bietet Mechanismen für die Formatierung von ungeordneten und geordneten Listen – z.B. die Darstellung römischer oder griechischer Ziffern, alternativer Listensymbole anstelle der Kugel oder die Unterdrückung der Listenkugeln. Auch der Einzug vor geordneten und ungeordneten Listen kann nicht mit HTML, sondern erst durch CSS geändert werden.

Verschachtelte Listen

Ungeordnete und geordnete Listen können verschachtelt werden, um mehrstufige Aufzählungen zu erzeugen.

  1. Geordnete Liste mit ol und ungeordnete Listen mit ul können ineinander verschachtelt werden.
    • ul-Tags können unter ol-Tags sitzen
    • ol-Tags können unter li-Tags sitzen
  2. Hierarchische Listen mit ul werden auch für die Naviation eingesetzt.
    • Die Hierarchie spiegelt den Aufbau der Site.
    • Listenelemente lassen sich durch CSS an die Design-Vorgaben anpassen.
<ol>
    <li>Geordnete Liste mit ol und ungeordnete Listen 
        mit ul können ineinander verschachtelt werden.
        <ul>
            <li>ul-Tags können unter ol-Tags sitzen</li>
            <li>ol-Tags könneen unter li-Tags sitzen</li>
        </ul>
    </li>
    <li>Hierarchische Listen mit ul werden auch für 
        die Naviation eingesetzt.
        <ul>
            <li>Die Hierarchie spiegelt den Aufbau der Site.</li>
            <li>Listenelemente lassen sich durch CSS an die 
                Design-Vorgaben anpassen.</li>
        </ul>
    </li>
</ol>