Nach den Formularen kommen nun die Listen. Sowohl in geordneter als auch in ungeordneter Form…
Listen gibt es in HTML in zwei Varianten:
- geordnete Listen
- ungeordnete Listen
HTML Listen benutzen wir bisher für die Layouts und die Navigationen, doch natürlich kann man auch Listen im Inhaltsbereich für echte Auflistungen nutzen.
Die geordnete Liste:
<ol>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
</ol>
Die ungeordnete Liste:
<ul>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
</ul>
Der Unterscheid liegt also nur in den beiden Elementen “ol” und “ul”.
Verschachtelung von Listen:
Der Aufbau von verschachtelten Listen sieht so aus:
<0l>
<li>Listeneintrag 1
<ol>
<li>Untereintrag Ebene 1</li>
</ol>
</li>
<li>Listeneintrag 2</li>
</ol>
Hier ist eine geordnete Liste in eine geordnete Liste verschachtelt. Der Listeneintrag, also das Listenelement “li” wird nicht geschlossen, wenn eine Verschachtelung beginnen soll.
Die beiden li-Elemente sind hier makiert und zeigen, wo das Element geöffnet und wo es geschlossen wird.
Es ist auch möglich eine ungeordnete Liste in eine ungeordnete Liste zu verschachteln.
<ul>
<li>Listeneintrag 1
<ul>
<li>Untereintrag Ebene 1</li>
</ul>
</li>
<li>Listeneintrag 2</li>
</ul>
Es lassen sich auch beide Listen mischen. Eine ungeordnete Liste kann auch in eine geordnete verschachtelt werden und umgekehrt.
<ul>
<li>Listeneintrag 1
<ol>
<li>Untereintrag Ebene 1</li>
</ol>
</li>
<li>Listeneintrag 2</li>
</ul>
Auch die HTML Listen werden per CSS gestaltet. Für die Navigation wurde das bei den Layouts bereits genutzt. Auch die Verschachtelung von Listen wurde bereits genutzt….