Listen in HTML

1.1 Arten von Listen

Listen in HTML sind ein wichtiges Werkzeug zur Organisation und Strukturierung von Informationen. Sie ermöglichen es, Elemente mit Nummern oder mit fetten Punkten (Markierungen) anzuzeigen. Schauen wir uns jeden der Listenelemente in HTML genauer an: <ul>, <ol>, und <li>.

Ungeordnete Listen (<ul>)

Das Tag <ul> wird verwendet, um ungeordnete (markierte) Listen zu erstellen. Listenelemente werden mit Markierungen (Punkten, Kreisen, Quadraten) angezeigt.

Beispiel:

    
      <ul>
        <li>Erstes Listenelement</li>
        <li>Zweites Listenelement</li>
        <li>Drittes Listenelement</li>
      </ul>
    
  

Geordnete Listen (<ol>)

Das Tag <ol> wird verwendet, um geordnete Listen zu erstellen. Listenelemente werden mit Zahlen oder Buchstaben angezeigt.

Beispiel:

    
      <ol>
        <li>Erstes Listenelement</li>
        <li>Zweites Listenelement</li>
        <li>Drittes Listenelement</li>
      </ol>
    
  

1.2 Listenelemente <li>

Das Tag <li> wird verwendet, um jedes Element in einer Liste zu kennzeichnen, sei es ungeordnet oder geordnet. Es sollte immer in <ul> oder <ol> eingebettet sein.

Wie man sich diese Tags leicht merken kann:

• Ordered List – geordnete (nummerierte) Liste
• Unordered List – ungeordnete (nicht nummerierte) Liste
• List Item – Listenelement

Attribut type

Dieses Attribut kann innerhalb von <ul> und <ol> verwendet werden, um die Art der Markierungen oder der Nummerierung zu ändern. Zum Beispiel können für <ol> Werte "1", "A", "a", "I", "i" und für <ul> - "disc", "circle", "square" verwendet werden.

Beispiel für das Ändern des Markertyps für <ul>:

    
      <ul type="square">
        <li>Erstes Listenelement</li>
        <li>Zweites Listenelement</li>
      </ul>
    
  

Beispiel für das Ändern des Nummerierungstyps für <ol>:

    
      <ol type="A">
        <li>Erstes Listenelement</li>
        <li>Zweites Listenelement</li>
      </ol>
    
  

Attribut start:

Dieses Attribut wird nur mit <ol> verwendet, um die Startzahl der Nummerierung festzulegen.

Zum Beispiel:

    
      <ol start="5">
        <li>Fünftes Listenelement</li>
        <li>Sechstes Listenelement</li>
      </ol>
    
  

Verschachtelte Listen

Listen können verschachtelt werden, was es ermöglicht, komplexere Strukturen zu erstellen.

Beispiel einer verschachtelten Liste:

    
      <ul>
        <li>Erstes Listenelement</li>
          <ul type="circle">
            <li>Verschachteltes erstes Element</li>
            <li>Verschachteltes zweites Element</li>
          </ul>
        <li>Zweites Listenelement</li>
        <li>Drittes Listenelement</li>
      </ul>
    
  

1.3 Stilisierung von Listen

Listen können mit CSS stilisiert werden, indem man die Farbe der Markierungen, deren Typen und die Abstände ändert.

Beispiel für Stilisierung:

    
      ul.custom-list {
        list-style-type: katakana; /* Japanische Silbenschrift */
        color: blue; /* Textfarbe */
      }

      ol.custom-list {
        list-style-type: hiragana-iroha; /* Japanische Ordnungsform */
        color: green; /* Textfarbe */
      }
    
  

    
      <ul class="custom-list">
        <li>Erstes Listenelement</li>
        <li>Zweites Listenelement</li>
      </ul>

      <ol class="custom-list">
        <li>Erstes Listenelement</li>
        <li>Zweites Listenelement</li>
      </ol>
    
  

So helfen <ul>, <ol>, und <li> dabei, den Inhalt zu strukturieren und seine Lesbarkeit auf Webseiten zu verbessern.