Listen ohne Listenpunkte  nach oben

Um eine normale Liste ohne Listenpunkte, das heißt, ohne Aufzählungen, zu erstellen, können Sie das ul-Element verwenden. Die Listenpunkte werden dann durch Zeilenumbrüche (<br>) voneinander getrennt. Beispiel:

<ul>
 Listenpunkt 1<br>
 Listenpunkt 2<br>
</ul> 

Listen mit Listenpunkten  nach oben

Um eine normale Liste mit Listenpunkten, zu erstellen, verwendet man das ul-Element zum Erstellen der Liste. Es schließt ein oder mehrere li-Elemente ein, welche die Listenpunkte darstellen. Diese li-Elemente enthalten den Text, der dem jeweiligen Listenpunkt angefügt werden soll. Beispiel:

<ul>
 <li>Listenpunkt 1</li>
 <li>Listenpunkt 2</li>
</ul> 

Listenpunkte

Das Aussehen der Listenpunkte können Sie selbst bestimmen. Dazu geben Sie im einleitenden Tag der Liste (ul) das type-Attribut an. Als Werte stehen die folgenden zur Auswahl:

  • circle - ein Kreis
  • square - ein Viereck
  • disc - ein Karo

Beispiel:

<ul type="circle">
 <li>Listenpunkt 1</li>
 <li>Listenpunkt 2</li>
</ul> 

Zähllisten  nach oben

Um Zähllisten zu erstellen, können Sie das ol-Element verwenden. Bei solchen Listen werden die Listenpunkte durchnummeriert bzw. mit Ziffern versehen. Im einleitenden Tag können Sie dazu den Type der Listenpunkte mit dem type-Attribut festlegen. Als Wert können Sie dann eine der verschiedenen Varianten notieren:

  • 1 - Liste mit Zahlen (1, 2, 3, 4...)
  • I - Liste mit großen röm. Buchstaben (I, II, III, IV ...)
  • i - Liste mit kleinen röm. Buchstaben (i, ii, iii, iv ...)
  • A - Liste mit großen Buchstaben (A, B, C, D...)
  • a - Liste mit kleinen Buchstaben (a, b, c, d...)

Des Weiteren können Sie die Startzahl/-ziffer der Listenpunkte mit dem start-Attribut angeben. Normaleinstellung sollte start="1" sein, kann aber auch verändert werden. Im Einzelnen sehen die Listen dann so aus und können durch die Listenpunkte beliebig erweitert werden:

<ol start="3" type="1">
 <li>Listenpunkt 1 (Ziffer 3)</li>
 <li>Listenpunkt 2 (Ziffer 4)</li>
</ol>

<ol start="1" type="I">
 <li>Listenpunkt 1 (Ziffer I)</li>
 <li>Listenpunkt 2 (Ziffer II)</li>
</ol>

<ol start="7" type="i">
 <li>Listenpunkt 1 (Ziffer vii)</li>
 <li>Listenpunkt 2 (Ziffer viii)</li>
</ol>

<ol start="2" type="A">
 <li>Listenpunkt 1 (Ziffer B)</li>
 <li>Listenpunkt 2 (Ziffer C)</li>
</ol>

<ol start="1" type="a">
 <li>Listenpunkt 1 (Ziffer a)</li>
 <li>Listenpunkt 2 (Ziffer b)</li>
</ol> 

Listen in Listen  nach oben

Wenn Sie innerhalb einer Liste eine weitere Liste haben möchten, verläuft zunächst alles wie bei normalen Listen: Sie definieren eine Liste und die dazugehörigen Listeneinträge. An der Stelle an der eine weitere Gruppierung erfolgen soll, notieren Sie nun einfach in diesen Listeneintrag die neue Liste hinein. Diese vertiefung der Listenebenen kann theoretisch beliebig weiter geführt werden. Beispiel:

<ul>
 <li>Listenpunkt 1
  <ul>
   <li>Listenpunkt 1.1</li>
   <li>Listenpunkt 1.2</li>
  </ul>
 </li>
 <li>Listenpunkt 2</li>
</ul> 

Dies kann sowohl mit normalen als auch mit Zähllisten geschehen.

Definitionslisten  nach oben

Definitionslisten können Sie ebenso wie andere Listen erstellen, nur dass das zu verwendenden Element hierfür das dl-Element ist. Das dl-Element startet und beendet die Liste und beschreibt, dass es sich um eine Definitionsliste handelt. Im dt-Element wir die Listendefinition notiert, die in der Liste stehen sollte. Anschließend an das dt-Element kommt das dd-Element. In ihm wird der Listeneintrag notiert. Letztlich schließt die Liste wieder mit dem dl-Element. Es können beliebig viele Listendefinitionen und Listeneinträge vorgenommen werden, solange diese Reihenfolge bestehen bleibt. Dabei ist zu beachten, dass die Listendefinitionen immer ganz links angezeigt werden und die Listeneinträge etwas versetzt nach rechts. Beispiel:

<dl>
 <dt>Listendefinition 1</dt>
  <dd>Listeneintrag 1</dd>
 <dt>Listendefinition 2</dt>
  <dd>Listeneintrag 2</dd>
  <dd>Listeneintrag 3</dd>
</dl> 

Dargestellt werden diese Listen dann so, dass die Listendefinition sowie die Listeneinträge in seperaten Zeilen stehen. Dabei werden die Listeneinträge etwas versetzt dargestellt. Das stellt sich in etwa so dar:

Listendefinition 1
  Listeneintrag 1
Listendefinition 2 
  Listeneintrag 2
  Listeneintrag 3

Kompakte Listen  nach oben

Des Weiteren können alle Listen auch kompakt dargestellt werden. Bei der Darstellung hierzu notiert man das Attribut compact in den einleitenden Listentag:

<ul compact>
... Listendefinitionen und -einträge ...
</ul>

<ol compact>
... Listendefinitionen und -einträge ...
</ol>

<dl compact>
... Listendefinitionen und -einträge ...
</dl>