Polaris Sytems Tutorial
Elemente zur Textstrukturierung: Listen
Eine weitere Möglichkeit Texte in HTML übersichtlich zu strukturieren, besteht in der Anwendung von Listen. Dabei unterscheidet man zwischen nummerierten Listen, Aufzählungslisten und Definitionslisten.
Nummerierte Listen
Nummerierte Listen werden durch das Element <ol> (ordered list) definiert. Mit <li> (list Item) werden dann die einzelnen Punkten innerhalb der Liste begonnen und mit </li> wieder geschlossen. Die Listeneinträge werden bei dieser Art von Liste automatisch durchnummeriert.
<body>
<h1>Nummerierte Liste</h1>
<ol>
<li>PKW</li>
<li>LKW & Nutzfahrzeuge</li>
<li>Krafträder</li>
</ol>
</body>
...
Und hier das Ergebnis, wie es im Firefox angezeigt wird:
Bei standardmäßigen Browsereinstellungen werden für die einzelnen Listenpunkte Dezimalzahlen verwendet. Über CSS hat man jedoch sehr viele Möglichkeiten die Art der Listenpunkte festzulegen. So können z.B. römische Ziffern, große oder kleine Buchstaben oder auch Buchstaben aus anderen Sprachen eingesetzt werden.
Aufzählungen
Aufzählungslisten werden durch das Element <ul> (unsorted list) definiert. Mit <li> werden dann die einzelnen Punkten innerhalb der Liste begonnen und mit </li> wieder geschlossen. Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen versehen.
<body>
<h1>Aufzählungsliste</h1>
<ul>
<li>Limousine</li>
<li>Kleinwagen</li>
<li>Kombi</li>
</ul>
</body>
...
Und hier das Ergebnis, wie es im Firefox angezeigt wird:
Nutzt man die standardmäßigen Browsereinstellungen werden bei Aufzählungslisten die einzelnen Punkte mit einem Bullet (gefüllten Punkt) angezeigt.
Mit CSS können andere Zeichen gewählt werden. Möglich sind z.B. Quadrate, Rechtecke, nicht gefüllte Kreise oder sogar individuelle Bilder.
Definitioslisten
Möchte man ein Glossar für seine Webseite erstellen, kann man in HTML auf die Definitionslisten zurückgreifen.
Das umfassende Element ist dabei <dl> (definiton list). Innerhalb von <dl> steht <dt> (definition term) für den zu erläuternden Begriff und <dd> (definition definition) für die Definition oder Erklärung.
<body>
<h1>Defintionsliste</h1>
<dl>
<dt>HTML>/dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Stylesheets</dd>
<dt>XHTML</dt>
<dd>eXtensible Hypertext Markup Language</dd>
</dl>
</body>
...
Und hier das Ergebnis, wie es im Firefox angezeigt wird:
Verschachtelte Listen
Listen können auch verschachteltet werden.
Im nachfolgenden Beispiel haben wir eine Aufzählungsliste innerhalb einer anderen Aufzählungsliste positioniert.
Bei der Verschachtelung wird eine Liste (<ol> bzw. <ul> samt allen Listeneinträgen <li>) innerhalb eines Listenelements (<li>) einer anderen Liste eingefügt.
<body>
<h1>Verschachtelte Liste</h1>
<ul>
<li>PKW
<ul>
<li>Limousine</li>
<li>Kleinwagen</li>
<li>Kombi</li>
</ul>
</li>
<li>LKW & Nutzfahrzeuge
<ul>
<li>Baumaschine</li>
<li>Kipper</li>
<li>Kran</li>
</ul>
</li>
<li>Krafträder
<ul>
<li>Motorroller</li>
<li>Straßenmotorräder</li>
<li>Geländemotorräder</li>
</ul>
</li>
</ul>
</body>
...
Und hier das Ergebnis, wie es im Firefox angezeigt wird:
Weitere Einsatzmöglichkeiten von Listen
Listen sind ein ideales Element zur Gestaltung von Menüs oder komplette Seitennavigationen. In Kombination mit CSS sind der Gestaltung, Gliederung und dem Aufbau der Navigation kaum Grenzen gesetzt.
In unserem CSS Tutorial werden wir Ihnen anhand von Beispielen einige Anwendungsmöglichkeiten demonstrieren.
Zuletzt aktualisiert am 04.04.2013 von Polaris Systems.