decocode decocode deco    

Listen #

Geordnete und ungeordnete Listen #

Es gibt zwei Arten von Listen. Geordnete und ungeordnete. Das heißt, nummerierte und unnummerierte Listen, wo bei ›nummeriert‹ auch bedeuten kann, dass dem Listenelement ein Buchstabe vorangestellt ist. Listen werden durch bestimmte verschachtelte Tags definiert. Zunächst wird allgemein eine Liste definiert, dann die einzelnen Listenelemente.

Quelltext auswählen
1
2
3
4
5
<ol>
  <li>Hunde</li>
  <li>Katzen</li>
  <li>Mäuse</li>
</ol>

Dies ist das einfachste Prinzip einer geordneten Liste, die durch das Tag <ol> (ordered list) gekennzeichnet wird. Die einzelnen Listenelemente werden durch das Tag <li> gekennzeichnet.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
<ol>
  <li>Hunde
    <ul>
      <li>Dackel</li>
      <li>Schäferhund</li>
      <li>Terrier</li>
    </ul>
  </li>
  <li>Katzen</li>
  <li>Mäuse</li>
</ol>

Hier haben wir eine ungeordnete Liste als Unterelement einer geordneten Liste. Ungeordnete Listen werden durch das Tag <ul> (unordered list) gekennzeichnet.

Zu beachten ist in diesem Beispiel vor allem, dass die ungeordnete Liste innerhalb der Tags des Listenelements für ›Hunde‹ untergebracht ist. Folgende Verschachtelung wäre syntaktisch falsch, auch wenn Browser in einem solchen Fall tolerant sind:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
<!-- Beispiel für FALSCHE Verschachtelung einer Liste -->
<ol>
  <li>Hunde</li>
    <ul>
      <li>Dackel</li>
      <li>Schäferhund</li>
      <li>Terrier</li>
    </ul>
  <li>Katzen</li>
  <li>Mäuse</li>
</ol>

Der Beginn einer Zählung kann auch beeinflusst werden. Das Attribut start gibt den Beginn der Aufzählung an, wobei bei einer alphabetischen Nummerierung dieser Wert einen Buchstaben repräsentiert, also start='1' für A, start='2' für B usw. Mit dem Attribut value lässt sich ein neuer Startwert für eine Zählung festlegen. Im Beispiel erhält das Listenelement mit dem Inhalt ›Dogge‹ den Wert value='10'. Das bedeutet, die Zählung wird mit dem zehnten Buchstaben des Alphabets (J) fortgesetzt.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>
  <li>Hunde
    <ol style='list-style-type:lower-alpha;' start='4'>
      <li>Dackel</li>
      <li>Schäferhund</li>
      <li>Terrier</li>
      <li value='10'>Dogge</li>
      <li>Setter</li>
    </ol>
  </li>
  <li>Katzen</li>
  <li>Mäuse</li>
</ul>

Definitionslisten #

Definitionslisten dienen der semantischen Auszeichnung von Listen wie z. B. für Glossare, Literaturangaben oder ähnliches. Sie werden durch das <dl>-Tag gekennzeichnet und enthalten jeweils ein <dt>-Element (definition term) für den zu definierenden Begriff und ein <dd>-Element (definition description) für die Erläuterung.

Quelltext auswählen
1
2
3
4
5
<dl>
  <dt>HTML</dt><dd>Hypertext Markup Language</dd>
  <dt>CSS</dt><dd>Cascading Style Sheet</dd>
  <dt>PHP</dt><dd>PHP: Hypertext Preprocessor</dd>
</dl>