Listen

Es gibt in HTML „ungeordnete Listen“, „geordnete Listen“ und Beschreibungslisten. Ungeordnete Listen haben nur ein Symbol als Aufzählungszeichen und geordnete Listen eine Nummerierung. Beschreibungslisten ermöglichen eine oder mehrere Beschreibungen zu jedem Listenelement.

Mit dem „ul“-Element können „ungeordnete Listen“ erstellt werden. Das „ul“ steht dabei für „unordered list“, was auf deutsch „ungeordnete Liste“ heißt. Die einzelnen Listenelemente werden dann mit dem „li“-Element gebildet:

<ul>

   <li>Erstes Listenelement</li>

   <li>Zweites Listenelement</li>

   <li>Drittes Listenelement</li>

</ul>

Mit dem „type“-Attribut kann die Form der Aufzählungszeichen definiert werden. Dabei kann das „type“-Attribut die Werte „disc“ (ausgefüllter Kreis), „circle“ (unausgefüllter Kreis) und „square“ (unausgefülltes Rechteck) annehmen. Wird das „type“-Attribut nicht verwendet, wird bei ungeordneten Listen automatisch der ausgefüllte Kreis als Aufzählungszeichen verwendet.

HTML-Datei:

Ergebnis:

Ergebnis im Browser:

Mit dem „ol“-Element können „geordnete Listen“ erstellt werden. Das „ol“ steht dabei für „ordered list“, was auf deutsch „geordnete Liste“ heißt. Die einzelnen Listenelemente werden auch hier mit dem „li“-Element gebildet:

<ol>

   <li>Erstes Listenelement</li>

   <li>Zweites Listenelement</li>

   <li>Drittes Listenelement</li>

</ol>

Auch bei den „Geordneten Listen“ kann mit dem „type“-Attribut die Form der Aufzählungszeichen definiert werden. Dabei kann das „type“-Attribut hier folgende Werte annehmen:

HTML-Datei:

Ergebnis:

Ergebnis im Browser:

Mit dem „reversed“-Attribut kann die Reihenfolge umgekehrt (engl. „reversed“) werden. Da ab HTML5 alle Attribute einen Wert in Anführungsstriche haben müssen, wird die Umkehrung der Reihenfolge mit reversed=“reversed“ angegeben.

HTML-Datei:

Ergebnis:

Ergebnis im Browser:

Hinweis: Wird das „type“-Attribut und das „reversed“-Attribut nicht verwendet, werden standardmäßig nummerisch aufsteigende Aufzählungszeichen verwendet!

Beschreibungslisten bestehen aus Listenelementen und Beschreibungen zu den Listenelementen. Beschreibungslisten können z. B. für Glossare verwendet werden. Beschreibungslisten werden mit dem „dl“-Element gebildet. Dabei steht „dl“ für „description list“, was auf deutsch „Beschreibungsliste“ heißt. Die Listenelemente werden hier mit dem „dt“-Element gebildet. Das „dt“ steht für „description term“, was auf deutsch „Beschreibungs-Ausdruck“ heißt. Die zugehörige Beschreibung wird dann mit dem „dd“-Element erstellt. Das „dd“ steht für „description description“ , d. h. Beschreibungs-Beschreibung:

<dl>

   <dt>HTML</dt>

   <dd>Hypertext Markup Language</dd>

   <dt>CSS</dt>

   <dd>Cascading Style Sheets</dd>

</dl>

Es können aber auch einem Element mehrere Beschreibungen zugeordnet werden, wie z. B. bei der Auflistung von Vokabeln:

<dl>

   <dt>foot</dt>

   <dd>Fuß</dd>

   <dd>Sockel</dd>

   <dd>Basis</dd>

   <dt>home</dt>

   <dd>Haus</dd>

   <dd>Heim</dd>

   <dd>Heimat</dd>

</dl>

HTML-Datei:

Ergebnis:

Ergebnis im Browser:

HTML-Listen können beliebig verschachtelt werden. Dabei können auch die verschiedenen Listen-Typen miteinander kombiniert werden.

HTML-Datei:

Ergebnis:

Ergebnis im Browser:

Baue als Abschlussübung das vorhergehende Beispiel nach und erweitere es um ein Rezept für Rührei:

Nachdem du die Seite erstellt hast, kannst du dir zur Kontrolle die Lösung mit folgendem Link herunterladen:

https://wiki.selfhtml.org/wiki/Ul

http://www.w3schools.com/tags/tag_ul.asp

https://wiki.selfhtml.org/wiki/Ol

http://www.w3schools.com/tags/tag_ol.asp

https://wiki.selfhtml.org/wiki/Dl

http://www.w3schools.com/tags/tag_dl.asp