In diesem Tutorial will ich euch die Grundlagen über Listen im HTML näher bringen.

Grundsätzlich können wir zwischen drei verschiedenen Listentypen unterscheiden: Unsortierte Liste (ul), Sortiert Listen (ol) und Beschreibungen (dl)

Fangen wir aber erstmal mit dem Aufbau einer unsortierten Liste an. Wir leiten diese also mit dem <ul>-tag ein und schließend dann wieder mit </ul>. Die Abkürzung "ul" steht übrigens für "unordered list" (=unsortierte Liste). So kann man sich das etwas leichter merken. ;)

Zwischen die <ul>-tags wird nun für jeden Listenpunkt ein <li> gesetzt, worauf ein kleiner Text folgt und der mit </li> geschlossen wird. Die Abkürzung "li" steht hier für "list item" (=Listen Element).

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

Damit haben wir schonmal die Grundstruktur einer Liste gelernt. Wie die Punkte vor den Listen Elementen aussehen ist hier nicht festgelegt und wird deshalb vom Browser bestimmt.

Kommen wir nun zu den sortierten Listen. Bei dieser Listenform, werden die einzelne Punkte nummeriert aufgelistet. Sie eignen sich also besonders um eine Rangfolge oder Ähnliches darzustellen.

Hier beginnen wir mit <ol>-tags und schließen nach der Auflistung unserer Listenpunkte wieder mit dem </ol>. Das "ol" steht für "ordered list" (=sortierte Liste).

<ol>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

Definitionslisten eignen sich besonders für Glossare oder Ähnliches. Statt den <ul> oder <ol> tags wird hier das <dl>-tag verwendet. Das "dl" ist die Abkürzung für "definition list" (=Definitionsliste). Innerhalb können dann mit <dt> (="definition term") verschiedene Begriffe aufgelistet werden, die erklärt werden sollen und in den <dd> tags (="definition description") folgt dann eine Beschreibung/Erklärung des Begriffs.

<dl>
<dt>Begriff 1</dt>
<dd>Eklärung 1</dd>
<dt>Begriff 2</dt>
<dd>Eklärung 2</dd>
<dt>Begriff 3</dt>
<dd>Eklärung 3</dd>
</dl>[/

Nun, da wir die verschiedenen Typen und Unterschiede geklärt haben, gehen wir mal auf die Formen und Eigenschaften der Listen ein.

Zuerst zeige ich euch noch, wie ihr Listen verschachteln könnt und so verschiedene Unterkategorien und Unterpunkte erstellen könnt:

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

Wichtig hierbei ist, dass ich dir neue Liste innerhalb des <li>-tags platziert! Achtet auch immer darauf die Zeilen einzurücken, damit ihr bei längeren, verschachtelten Listen die Übersicht behaltet.

Als nächstes verändern wir das Symbol, das vor unseren Listenelementen steht. Ist es nicht definiert, wird es vom Browser festgelegt. Mit dem Attribut "Type" können die Symbole verändert werden, aber diese Methode ist sehr veraltet und in Zukunft sollte man hierfür auf CSS zurückgreifen. Dennoch erkläre ich euch kurz, wie es aussehen müsste:

<ul type="circle">
<li>Listenpunkt mit Kreis</li>
</ul>

<ul type="square">
<li>Listenpunkt mit Rechteck</li>
</ul>

<ul type="disc">
<li>Listenpunkt mit Scheibe</li>
</ul>

Bei sortierten Listen kann mithilfe des "Type"-Attributs festgelegt werden, ob die Nummerierung normal, alphabetisch oder mit römischen Zahlen sein soll.

<ol type="I">
<li>Listenpunkt, römisch</li>
</ol>

<ol type="A">
<li>Listenpunkt, alphabetisch</li>
</ol>

Nun solltet ihr die wichtigsten Grundlagen über Listen kennen. Demnächst folgt dann noch ein Tutorial, in dem ich euch zeige, wie ihr solche Listen stylen könnt. :)