V HTML existují různé typy seznamů. Za prvé jsou tu odrážkové seznamy. U tohoto typu seznamu jsou jednotlivé položky seznamu vybaveny odrážkovým znaménkem, tzv. Bullet.
Odrážkové seznamy jsou zahájeny pomocí prvku ul. Jednotlivé položky seznamu jsou označeny prvkem 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>
Zde je pohled na výsledek v prohlížeči:
Před každým příspěvkem je vložena odrážka. Jak tato výchozí podoba vypadá, určují prohlížeče. Existují sice atributy, které umožňují ovlivňovat zobrazení seznamů, ale tyto by již neměly být používány. Namísto toho se používají vlastnosti CSS.
Odrážkové seznamy lze mimochodem i vnořovat. Nejprve si prohlédněte následující obrázek:
Zde je vidět, co tato vnořená struktura znamená.
Syntax pro toto vypadá následovně:
<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>
V rámci jedné položky seznamu může být také další seznam. Mimochodem to nemusí nutně být odrážkový seznam. Ve skutečnosti lze vložit i další typy seznamů - které budou v tomto návodu představeny.
Uživatelsky příjemnější by bylo uzavírat </li> i v HTML5. Syntakticky správné by však bylo i následující:
<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>
Číslované seznamy
Kromě odrážkových seznamů lze také definovat číslované seznamy. Zde také nejprve obrázek, který ukazuje, co vlastně číslované seznamy znamenají.
Položkám seznamu se tedy předkládají po sobě jdoucí čísla. Číslované seznamy se zahajují prvkem ol.
Následující příklad ukazuje, jak tento prvek lze použít.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Stejně jako u odrážkových seznamů jsou jednotlivé položky označeny prvkem li.
Teoreticky lze také vnořovat odrážkové seznamy.
<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>Výsledek v prohlížeči je však zklamáním.
Takovéto číslování není dosaženo následujícím způsobem:
1. Tutorials 2D
1.1 3D
1.2 Web
- Videotrainings 3D
2.1 Mediengestaltung
2.2 Web - Tipps
- Shops
Něco takového není možné čistým HTML. Ve skutečnosti je třeba sáhnout k CSS, aby se obsah automaticky čísloval podle tohoto schématu.
Definiční seznamy
Dalším typem seznamů jsou tzv. definiční seznamy. I pro tyto seznamy nejprve příklad, jak takový seznam nakonec vypadá v prohlížeči:
Hlavním účelem definičních seznamů jsou glosáře. Zde je syntax, která vedla k předchozímu výstupu:
<dl>
<dt>AM</dt>
<dd>AM - Letecká pošta</dd>
<dd>AM - Vzdušný maršál</dd>
<dd>AM - Amberg</dd>
<dd>AM - Americium</dd>
<dd>AM - Amstetten</dd>
<dt>AN</dt>
<dd>AN - nadaný název</dd>
<dd>AN - Přístupový bod</dd>
<dd>AN - Ancona</dd>
</dl>Při definicích seznamů máte vždy co do činění s třemi prvky. Seznamy jsou zahájeny prvek dl. To je tedy vnější struktura. Termín, který má být definován, je označen prvkem dt. To je v konečném důsledku definovaný termín. Popis definic je pak uveden pomocí prvku dd.
Je mimochodem možné mít vnořené definice. To funguje stejně jako u jiných variant seznamů.
Jak vypadají definice seznamů standardně, je určeno prohlížečem. Nakonec však můžete pomocí CSS určit požadovanou úpravu sami.
V dřívějších verzích HTML byly také menu a adresářové seznamy. Pro ně byly použity prvky menu a dir. Prvek dir již v HTML5 není obsažen. Jinak je to s prvkem menu. Tento prvek byl znovu implementován a měl by být v budoucnu použitelný pro kontextová menu a panely nástrojů. Zde je příklad toho, jak si W3C představuje typické použití prvku menu:
<menu type="toolbar"> <li> <menu label="Soubor"> <button type="button" onclick="fnew()">Nový...</button> <button type="button" onclick="fopen()">Otevřít...</button> <button type="button" onclick="fsave()">Uložit</button> <button type="button" onclick="fsaveas()">Uložit jako...</button> </menu> </li> <li> <menu label="Upravit"> <button type="button" onclick="ecopy()">Kopírovat</button> <button type="button" onclick="ecut()">Vyjmout</button> <button type="button" onclick="epaste()">Vložit</button> </menu> </li> <li> <menu label="Nápověda"> <li><a href="pomoc.html">Pomoc</a></li> <li><a href="o-projektu.html">O projektu</a></li> </menu> </li> </menu>
V tuto chvíli to ale žádný prohlížeč nepodporuje.
Proto by menu v současné době ještě nemělo být používáno.
Vytváření seznamů
Ještě jedna poznámka k seznamům. Na mnoha webových stránkách jsou pro vytváření seznamů používány příslušné HTML atributy. Například pomocí <ul type="čtverec"> lze zajistit, že před položkami odrážkových seznamů budou zobrazeny čtverce.
Stejně tak je možné pro číslované seznamy určit typ číslování.
<ol type="A">
Zde ale platí, že byste neměli používat všechno, co je nabízeno. Lepší je použít odpovídající CSS vlastnosti. Měli byste je tedy skutečně používat k přizpůsobení seznamů vašim přání. Podrobné informace o CSS budou následovat v rámci této série.
