Існують різні типи списків в HTML. На початку стоять марковані списки. У цьому типі списків кожен елемент списку забезпечується маркером, так званим пустирцем.
Марковані списки ініціюються за допомогою елемента ul. Кожен окремий елемент списку позначається елементом li.
<p>Atuelle Themen aus dem Forum</p> <ul> <li>CSS wird nicht weiter ausgeführt</li> <li>Showroom Hollywood Stil der 40er</li> <li>Ausklappliste CSS</li> <li>PHP connect/disconnect</li> <li>Mein kleiner Showroom - Anfänger bittet um Tipps!</li> </ul>
Ось як виглядає результат у браузері:
Перед кожним повідомленням вставляється маркер списку. Як саме цей маркер виглядає за замовчуванням, визначають браузери. Є атрибути, за допомогою яких можна змінити вигляд списків, але їх уже рекомендується не використовувати. Замість цього використовуються властивості CSS.
Марковані списки, до речі, можна також вкладати один у одного. Спочатку подивіться наступне зображення:
Тут видно, що означає таке вкладення.
Синтаксис для цього виглядає так:
<ul>
<li>Tutorials
<ul>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ul>
</li>
<li>Videotrainings
<ul>
<li>3D</li>
<li>Mediengestaltung</li>
<li>Web</li>
</ul>
</li>
<li>Tipps</li>
<li>Shops</li>
</ul>
В межах кожного елементу списку може бути розташований інший список. До речі, це вкладення не обов'язково має бути маркованим списком. Фактично, можна вставити також інші типи списків — які далі будуть представлені в цьому навчальному посібнику.
До речі, в HTML5 не обов'язково використовувати закривний тег </li>. Проте з метою кращої читабельності я раджу його завжди закривати. Синтаксично правильним також буде щось на зразок наступного:
<p>Die aktuellen Themen aus dem Forum</p> <ul> <li>CSS wird nicht weiter ausgeführt <li>Showroom Hollywood Stil der 40er <li>Ausklappliste CSS <li>PHP connect/disconnect <li>Mein kleiner Showroom - Anfänger bittet um Tipps! </ul>
Нумеровані списки
Окрім маркованих списків, можна також визначити нумеровані списки. Також тут спочатку картинка, яка показує, що насправді означають ці нумеровані списки.
Таким елементам списку передує поспільні число. Нумеровані списки ініціюються за допомогою елемента ol.
Наступний приклад показує, як використовувати цей елемент.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Так само, як і в маркованих списках, кожен елемент позначається елементом li.
Теоретично, можна також вкладати марковані списки.
<ol>
<li>Tutorials
<ol>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ol>
</li>
<li>Videotrainings
<ol>
<li>3D</li>
<li>Mediengestaltung</li>
<li>Web</li>
</ol>
</li>
<li>Tipps</li>
<li>Shops</li>
</ol>Але результат у браузері, на жаль, не такий вражаючий.
Таким чином нумероване нумерування не досягається:
1. Tutorials 2D
1.1 3D
1.2 Web
- Videotrainings 3D
2.1 Mediengestaltung
2.2 Web - Tipps
- Shops
Таке з використанням лише HTML не можливе. Фактично, тут потрібно використовувати CSS для автоматичного нумерування вмісту за таким схемою.
Списки визначень
Ще один тип списків — так звані списки визначень. Тут також спочатку приклад того, як такий список виглядає у браузері: 
Основне використання списків визначень — це глосарії. Ось синтаксис, який привів до показаного вище результату:
<dl>
<dt>AM</dt>
<dd>AM - Повітряна пошта</dd>
<dd>AM - Авіамаршал</dd>
<dd>AM - Амберг</dd>
<dd>AM - Америцій</dd>
<dd>AM - Амштеттен</dd>
<dt>AN</dt>
<dd>AN - вище зазначений</dd>
<dd>AN - Вузол доступу</dd>
<dd>AN - Анкона</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()">New...</button> <button type="button" onclick="fopen()">Open...</button> <button type="button" onclick="fsave()">Save</button> <button type="button" onclick="fsaveas()">Save as...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Copy</button> <button type="button" onclick="ecut()">Cut</button> <button type="button" onclick="epaste()">Paste</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</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.
