Unsortierte Listen

Sortierte Listen

Definitionslisten

Listen gehören zu den Blockelementen. Es gibt unsortierte Listen, sortierte Listen und Definitionslisten.

Die unsortierten Listen werden häufig für Aufzählungen verwendet.

Die Listeneinträge werden als eingerückte Absätze dargestellt. Alle Listeneinträge werden mit einem vorangestellten Symbol (meist ein schwarzer Punkt) dargestellt.

Die vorangestellten Symbole der Listeneinträge können mit 'type' auf disc, circle oder square gesetzt werden gelten aber als veraltet und sollten daher nicht mehr verwendet werden.

Innerhalb der Listenelemente können weitere unsortierte Listen definiert werden.

Somit lassen sich unsortierte Listen gut strukturieren.

Beispiel:

<ul>
    <li>erster Listeneintrag</li> 
    <li>zweiter Listeneintrag</li> 
    <li>dritter Listeneintrag 
        <ul> 
            <li>erster Listeneintrag Unterliste</li> 
            <li>zweiter Listeneintrag Unterliste</li> 
        </ul> 
    </li> 
</ul>

So sieht es dann aus:

• erster Listeneintrag
• zweiter Listeneintrag
• dritter Listeneintrag
  • erster Listeneintrag Unterliste
  • zweiter Listeneintrag Unterliste

nach oben

Bei den sortierten Listen erfolgt eine automatische Nummerierung der Listeneinträge.

Im Gegensatz zu den unsortierten Listen wird kein Symbol vor den Listeneinträgen angezeigt, sondern die fortlaufende Nummerierung.

Der Art der Nummerierung lässt sich mit 'type' innerhalb des <li> ändern.

type="I" - entspricht: I II III IV V usw.

type="A" - entspricht: A B C D usw.

type="a" - entspricht: a b c d usw.

Mit start im <ol> Tag lässt dich der Startwert festlegen und mit value im <li> Tag kann die Nummerierung neu gesetzt werden.

<ol start="4">
  <li>erster Listeneintrag</li>
  <li>zweiter  Listeneintrag</li>
  <li value="10">dritter  Listeneintrag</li> 
  <li>vierterListeneintrag</li>
</ol>

So siehts dann aus:

4. erster Listeneintrag
5. zweiter Listeneintrag
10. dritter Listeneintrag
11. vierter Listeneintrag

nach oben

Mit Definitionslisten lassen sich sogenannte Glossare erstellen.

z.B.:

<dl>
  <dt>JavaScript</dt>
  <dd>clientseitige Scriptsprache....</dd>
  <dt>PHP</dt>
  <dd>serverseitige Scriptsprache ....</dd>
</dl>

Beispiel

nach oben

Linktipps: