Listen

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> 
		

---