W HTML istnieją różne rodzaje list. Po pierwsze są to listy punktowane. W tym rodzaju listy poszczególne elementy listy są wyposażone w punktor, znaną jako kropka.
<p>Obecne tematy z forum</p> <ul> <li>CSS nie jest już wykonywane</li> <li>Showroom styl Hollywood z lat 40.</li> <li>Lista rozwijana CSS</li> <li>Podłączanie/odłączanie PHP</li> <li>Mój mały showroom - Początkujący prosi o porady!</li> </ul>
Oto jak wygląda efekt w przeglądarce:
Przed każdym postem jest wstawiana kropka. Wygląd tego standardowo określany jest przez przeglądarkę. Istnieją atrybuty, za pomocą których można modyfikować wygląd list, jednak obecnie zaleca się ich nie używać. Zamiast tego wchodzą w grę właściwości CSS.
Listy punktowane można również zagnieżdżać. Najpierw jednak spójrz na następujący obraz:
To klarownie pokazuje, na czym polega takie zagnieżdżanie.
Syntax dla tego wygląda w następujący sposób:
<ul>
<li>Poradniki
<ul>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ul>
</li>
<li>Wideotutoriale
<ul>
<li>3D</li>
<li>Projektowanie mediów</li>
<li>Web</li>
</ul>
</li>
<li>Porady</li>
<li>Sklepy</li>
</ul>
Wewnątrz elementu listy może znajdować się inna lista. Przy okazji nie musi to koniecznie być lista punktowana. Rzeczywiście, można również wstawiać inne rodzaje list – które zostaną tutaj przedstawione – w takim przypadku.
Można zauważyć, że w HTML5 nie jest konieczne użycie kończącego </li>. Mimo lepszej czytelności zawsze zaleca się jego użycie. Syntaktycznie poprawne byłoby również coś takiego:
<p>Aktualne tematy z forum</p> <ul> <li>CSS nie jest już wykonywane <li>Showroom styl Hollywood z lat 40. <li>Lista rozwijana CSS <li>Podłączanie/odłączanie PHP <li>Mój mały showroom - Początkujący prosi o porady! </ul>
Lista numerowana
Obok list punktowanych istnieje możliwość definiowania list numerowanych. Ponownie najpierw obrazek, który przedstawia ideę list numerowanych.
Zatem elementy listy poprzedzane są kolejnymi cyframi. Listy numerowane są zaczynane za pomocą elementu ol.
Poniższy przykład pokazuje, jak tego elemntu użyć.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Podobnie jak w przypadku list punktowanych, poszczególne wpisy są oznaczane za pomocą elementu li.
Teoretycznie możliwe jest także zagnieżdżenie list punktowanych.
<ol>
<li>Poradniki
<ol>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ol>
</li>
<li>Wideotutoriale
<ol>
<li>3D</li>
<li>Projektowanie mediów</li>
<li>Web</li>
</ol>
</li>
<li>Porady</li>
<li>Sklepy</li>
</ol>Jednakże rezultat w przeglądarce jest rozczarowujący.
Numeracja według tego schematu nie zostaje zrealizowana:
1. Poradniki 2D
1.1 3D
1.2 Web
- Wideotutoriale 3D
2.1 Projektowanie mediów
2.2 Web - Porady
- Sklepy
Tego typu rozwiązanie nie jest możliwe w czystym HTML. W rzeczywistości należy skorzystać z CSS, aby numeryczne elementy były automatycznie numerowane w oparciu o ten schemat.
Listy definicyjne
Kolejnym rodzajem listy są tzw. listy definicyjne. Ponownie, najpierw przykład, jak lista ta ostatecznie wygląda w przeglądarce:
Głównym obszarem zastosowania list definicyjnych są słowniki. Oto składnia, która doprowadziła do wyświetlenia przedstawionego wcześniej wyniku:
<dl>
<dt>AM</dt>
<dd>AM - Poczta lotnicza</dd>
<dd>AM - Balonowy Marszałek</dd>
<dd>AM - Amberg</dd>
<dd>AM - Ameryk</dd>
<dd>AM - Amstetten</dd>
<dt>AN</dt>
<dd>AN - wyżej wymieniony</dd>
<dd>AN - Węzeł dostępu</dd>
<dd>AN - Ancona</dd>
</dl>Bei Definitionslisten hat man es immer mit drei Elementen zu tun. Eingeleitet werden die Listen durch das dl-Element. Das ist also die äußere Struktur. Der zu definierende Ausdruck wird durch ein dt-Element gekennzeichnet. Das ist im Endeffekt der Definitionsbegriff. Die Definitionsbeschreibung wiederum wird über das dd-Element angegeben.
Eine Verschachtelung von Definitionslisten ist übrigens ebenfalls möglich. Das funktioniert dann genauso, wie das bei den anderen Listenvarianten gezeigt wurde.
Wie die Definitionslisten standardmäßig aussehen, wird wieder durch die Browser bestimmt. Letztendlich könnt ihr dann aber über CSS das gewünschte Layout selbst festlegen.
In früheren HTML-Versionen gab es übrigens noch Menü- und Verzeichnislisten. Verwendet wurden dafür die beiden Elemente menu und dir. Das dir-Element ist in HTML5 nicht mehr enthalten. Anders sieht es mit menu aus. Dieses Element wurde neu implementiert und soll künftig für Kontextmenüs und Toolbars verwendet werden können. Hier ein Beispiel dafür, wie sich das W3C eine typische menu-Anwendung vorstellt:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">Nowy...</button> <button type="button" onclick="fopen()">Otwórz...</button> <button type="button" onclick="fsave()">Zapisz</button> <button type="button" onclick="fsaveas()">Zapisz jako...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Kopiuj</button> <button type="button" onclick="ecut()">Wytnij</button> <button type="button" onclick="epaste()">Wklej</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Pomoc</a></li> <li><a href="about.html">Informacje</a></li> </menu> </li> </menu>
Momentan wird das in dieser Form allerdings noch von keinem Browser unterstützt.
Daher sollte menu zum jetzigen Zeitpunkt auch noch nicht eingesetzt werden.
Listen gestalten
Ein Hinweis noch zu den Listen. Auf vielen Webseiten wird für die Gestaltung von Listen auf entsprechende HTML-Attribute gesetzt. So kann man beispielsweise über <ul type="square"> dafür sorgen, dass vor den Einträgen der Aufzählungslisten Rechtecke angezeigt werden.
Ebenso lässt sich für nummerierte Listen die Art der Nummerierung festlegen.
<ol type="A">
Hier gilt aber, dass man eben nicht alles einsetzen sollte, was angeboten wird. Besser geeignet sind die entsprechenden CSS-Eigenschaften. Ihr solltet diese also tatsächlich nutzen, um die Listen euren Wünschen gemäß anzupassen. Ausführliche Informationen zu CSS folgen im Rahmen dieser Reihe.
