16: HTML lists


Zusammengefasst nach dem Artikel von Ben Buchanan

Quelle:http://dev.opera.com/articles/view/16-html-lists/
Semantic HTML and Search Engine Optimization

Listen werden verwendet dazu verwendet, um zueinander verwandte Informationen klar und deutlich miteinander zu verbinden. Sie helfen, eine gut strukturierte und schnell verständliche Webseite zu generieren. Im modernen Webdesign werden Listen auch für die Navigation verwendet.

3 Varianten
 
Es gibt 3 verschiedene Varianten von Listen im HTML:
ungeordnete Liste (ul)
geordnete Liste (ol)
definition Liste (dt)

Ungeordnete Liste
 
Ungeordnete Listen oder auch Punkte Listen werden verwendet, um eine Gruppe miteinander verwandter Informationen miteinander zu verbinden. Die Reihenfolge dabei ist jedoch egal.
Mit Hilfe von CSS können die Aufzählungspunkte geändert werden.
Ungeordnete Listen verwenden ein Set von <ul></ul> Tags, welche mehrere Sets von <li></li> Tags umschließt.

Beispiel Einkaufsliste:
<ul>
  <li>bread</li>
  <li>coffee beans</li>
  <li>milk</li>
  <li>butter</li>
</ul>

Geordnete Liste
 
Geordnete Listen oder auch nummerierte Liste werden verwendet, um eine Liste von Informationen darzustellen, welche in einer bestimmte Reihenfolge dargestellt werden müssen.
Geordnete Listen können mit Hilfe von mehreren numerischen oder alphabetischen Systemen dargestellt werden (z.B.: A, B, C, ...; 1, 2, 3, ...; i, ii; ...; I, II). Diese können wiederum mit CSS definiert werden.
Geordnete Listen verwenden ein Set von <ol></ol> Tags, welche mehrere Sets von <li></li> Tags umschließt.

Beispiel Kochrezept:
<ol>
  <li>Gather ingredients</li>
  <li>Mix ingredients together</li>
  <li>Place ingredients in a baking dish</li>
  <li>Bake in oven for an hour</li>
  <li>Remove from oven</li>
  <li>Allow to stand for ten minutes</li>
  <li>Serve</li>
</ol>

Es ist auch möglich eine geordnete Liste nicht mit 1 beginnen zu lassen. Dafür muss innerhalb des <ol> Tags die „start“ Eigenschaft verwendet werden. Das ist sehr hilfreich, wenn man innerhalb der Liste eventuelle eine Notiz einfügen will.

Beispiel Kochrezept:
<ol>
  <li>Gather ingredients</li>
  <li>Mix ingredients together</li>
</ol>

<p class=“note“>Before you place the ingredients in the baking dish, preheat the oven to 180 degrees centigrade/350 degrees farenheit in readiness for the next step</p>

<ol start=“4“>
  <li>Bake in oven for an hour</li>
  <li>Serve</li>
</ol>

Definitions Liste
 
Definitions Listen verbinden bestimmte Informationen und deren Erklärung innerhalb der Liste. Jede Erklärung und Information ist eine Definitionsgruppe. Es können eine unbegrenzte Anzahl von Gruppen erzeugt werden, jedoch muss es in jeder Gruppe mindestens eine Information und eine Erklärung geben. Somit können auch mehrere Informationen zu einer Erklärung gehören  oder umgekehrt. Jedoch eines ohne dem anderen ist nicht möglich.
Im HTML werden Definition Listen mit einem Set von <dl></dl> Tags dargestellt, welche eine Gruppe von <dt></dt> und <dd></dd> Tags umschließt. Es muss zumindest ein <dt></dt> Tag mit mindestens ein <dd></dd> gepaart sein, wobei <dt> immer als erstes kommt.

Beispiel:
<dl>
  <dt>Information</dt>
  <dd>Erklärung</dd>
  <dt>Information</dt>
  <dd>Erklärung</dd>
  <dt>Information</dt>
  <dd>Erklärung</dd>
</dl>

Verschachtelte Liste
 
Ein Punkt in einer Liste kann eine komplett neue Liste enthalten.

Beispiel Inhaltsverzeichnis:
<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

Es muss darauf geachtet werden, dass die verschachtelte Liste nach dem <li> Tag und dem darin enthaltenen Text beginnt jedoch vor dem </li> Tag aufhört.
Theoretisch können unendlich viele Listen ineinander verschachtelt werden, jedoch in der Praxis kann das jedoch ziemlich verwirrend werden. Bei sehr umfangreichen Listen empfiehlt es sich, sie besser in mehrere Listen aufzuteilen und diese jeweils mit einer Überschrift versehen.