Listen im HTML
HTML-Webseite und die Listen
Abgesehen von Überschriften und Absätzen ist das wohl häufigste HTML-Element, mit dem Sie sich auseinandersetzen müssen, die Liste. Wenn Sie sich durch diesen Abschnitt gearbeitet haben, werden Sie nicht nur wissen, wie eine Liste erzeugt wird, sondern fünf verschiedene Arten von Listen erzeugen können, eine Liste für jede Gelegenheit!
HTML definiert drei Arten von Listen:
- nummerierte oder geordnete Listen, typischerweise mit Nummern eingeleitet,
- ungeordnete Listen, typischerweise mit einem dicken Punkt oder einem anderen Symbol eingeleitet,
- Glossar-Listen, in denen jeder Eintrag aus einem Stichwort und einer Definition dieses Stichworts besteht, meist so dargestellt, dass das Stichwort irgendwie hervorgehoben oder vom Text abgesetzt wird,
Sie werden einige alte Listen-Arten in der HTML 4.0 Spezifikation bemerken: menu lists (<menu>) und directory lists (<dr>). Diese zwei Listenarten werden nicht oft verwendet und die Unterstützung dieser Listen variiert von Browser zu Browser. Verwenden Sie lieber das <ul>-Tag (oder bulleted list).
Ein verworfenes Tag oder Attribut wird zwar noch unterstützt, wurde aber durch neuere Methoden ersetzt. Sie sollten deshalb die neueren Methoden anwenden. Die Mehrheit der älteren Tags und Attribute in HTML 4.0 wurden zugunsten der Cascading Style Sheets (CSS)-Eigenschaften und -Werte verworfen.
Listen-Tags
Alle Listen-Kennungen (List-Tags) haben gemeinsame Bestandteile:
- Die gesamte Liste ist umgeben von den passenden Einleitungs- und Abschluss-Kennungen für die jeweilige Listenart (zum Beispiel
<ol>und</ol>oder<menu>und</menu>). - Jedes Element in der Liste hat seine eigene Kennung:
<dt>und<dd>für die Glossar-Listen und<li>für alle anderen Listen.
Die abschließenden Tags für <dd>, <dt> und <li> sind in HTML nicht zwingend notwendig. Wenn Sie mit XHTML arbeiten wollen, sollten Sie sich jetzt schon angewöhnen diese Tags abzuschließen: </dd>, </dt>, </li>.
Obgleich die Kennungen und die Listeneinträge in Ihrem HTML-Code beliebig angeordnet sein können, ziehe ich es vor, den Listen-Code so anzuordnen, dass die Listen-Kennungen jeweils in einer eigenen Zeile stehen und jeder neue Eintrag ebenfalls mit einer neuen Zeile beginnt. Das macht es leicht, sowohl die Liste selbst als auch die einzelnen Listeneinträge schnell zu erkennen. Mit anderen Worten, ich finde Anordnungen wie diese:
<p>
Dantes Goettliche Komoedie besteht aus drei Buechern:
</p>
<ul>
<li>Hoelle</li>
<li>Fegefeuer</li>
<li>Paradies</li>
</ul>
leichter zu lesen als die folgende Anordnung, obwohl beides zur gleichen Darstellung im Browser führt:
<p>Dantes Goettliche Komoedie besteht aus drei Buechern:</p> <ul><li>Hoelle<li>Fegefeuer<li>Paradies</ul>
Abbildung zeigt Liste im Safari.
