HTML: Listen

Mittwoch 12. Februar 2020 von Torsten

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….

Dieser Beitrag wurde erstellt am Mittwoch 12. Februar 2020 um 08:00 und abgelegt unter Allgemein. Kommentare zu diesen Eintrag im RSS 2.0 Feed. Sie können zum Ende springen und ein Kommentar hinterlassen. Pings sind im Augenblick nicht erlaubt.

Kommentar schreiben