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>

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>