Listen

Suche

Geordnete und ungeordnete Listen

Geordnete und ungeordnete Listen sehen im Markup - von der unterschiedlichen Kennzeichnung durch ol und ul abgesehen - völlig gleich aus. Die Darstellung wird ausschließlich durch die Styles bestimmt.

Einfache nummerierte Liste

  1. Illustrationen
  2. Thumbnails
  3. Linkicon
  4. Listen
  5. Tabellen
  6. Formular
  7. Suchformular
  8. Zitate

Die Darstellung im HTML-Code:

<ol>
  <li>Illustrationen</li>
  <li>Thumbnails</li>
  <li>Linkicon</li>
  <li>Listen</li>         
  <li>Tabellen</li>
  <li>Formular</li>
  <li>Suchformular</li>
  <li>Zitate</li>                           
</ol>

Zweifache nummerierte Liste

  1. Illustrationen
  2. Thumbnails
  3. Unterpunkte:
    1. Unterpunkt 1
    2. Unterpunkt 2
    3. Unterpunkt 3
  4. Listen
  5. Tabellen
  6. Formular
  7. Suchformular
  8. Zitate

Die Darstellung im HTML-Code:

<ol>
  <li>Illustrationen</li>
  <li>Thumbnails</li>
  <li>Unterpunkte:
	<ol>
	  <li>Unterpunkt 1</li>
	  <li>Unterpunkt 2</li>
	  <li>Unterpunkt 3</li>
	  </ol>
  </li>
  <li>Listen</li>         
  <li>Tabellen</li>
  <li>Formular</li>
  <li>Suchformular</li>
  <li>Zitate</li>                           
</ol>

Unsortierte Liste

  • Illustrationen
  • Thumbnails
  • Linkicon
  • Listen
  • Tabellen
  • Formular
  • Suchformular
  • Zitate

Die Darstellung im HTML-Code:

<ul>
  <li>Illustrationen</li>
  <li>Thumbnails</li>
  <li>Linkicon</li>
  <li>Listen</li>                  
  <li>Tabellen</li>
  <li>Formular</li>
  <li>Suchformular</li>
  <li>Zitate</li>                        
</ul>

Zweifache Unsortierte Liste

  • Eins
  • Zwei mit Unterpunkten
    • Untereins
    • Unterzwei
  • Drei

Die Darstellung im HTML-Code:

<ul>
  <li>Eins</li>	
  <li>Zwei mit Unterpunkten
	<ul>
	<li>Untereins</li>
	<li>Unterzwei</li>
	</ul>
  </li>
  <li>Drei</li>
</ul>

Folgens Beispiel zeigt die Darstellung eines LIste, in dem die einzelnen Listenfelder in Absatztexten formatiert werden. Dies wird bei Listen verwendet, die größere Textblöcke enthalten sollen.

  • Normales Listenelement

  • Kurzes Absatzelement

  • h3-Überschrift

    Absatztext

  • Absatztext

    • Unterlistelement 1
    • Unterlistelement 2

    • Absatz: Und nun eine Aufzählung

      1. Zählliste 1
      2. Zählliste 2

Definitionslisten

Einen Sonderfall, der bestimmte Eigenschaften von Tabellen mit denen von Listen kombiniert, bilden die Definitionslisten. Sie können überall dort verwandt werden, wo jeweils zwei Elemente einander in Listenform zugeordnet werden sollen.

Abel
Tel. 12345
Bebel
Tel. 34567
Caesar
Tel. 56789
Dorian
Tel. 78901

Die Darstellung im HTML-Code:

<dl>
  <dt>Abel</dt>
  <dd>Tel. 12345</dd>
  <dt>Bebel</dt>
  <dd>Tel. 34567</dd>
  <dt>Caesar</dt>
  <dd>Tel. 56789</dd>
  <dt>Dorian</dt>
  <dd>Tel. 78901</dd>
</dl>