Definice: zapomenuté tagy

Seznam definic - Compact - Další možnosti stylování - Jde to tabulkami

Seznam definic

Snad už v první verzi jazyka HTML existovaly značky na vymezení definic. Protože www se mělo stát hlavně vědeckým prostorem, bylo zavedení definic pochopitelné. Takže vznikly tři HTML tagy: <dl>, <dt> a <dd>, které se udržely dodnes.

<DL>: Anglicky Definition List, tedy seznam definic. Uvnitř tohoto párového tagu se mají vyskytovat párové značky <dt> a <dd>
<DT>: Definovaný termín. Zobrazuje se normálně vlevo. Anglicky Defined Term. V dalším textu vnitřek tagu <dt> nazývám "termín".
<DD>: Definice příslušící k předchozímu termínu. Zobrazuje se o řádek níž a je asi o palec odsazená od levého okraje. Tag <dd> nazývám "definicí".
Syntaxe: Správně by měl zdrojový kód seznamu definic vypadat takto:
<dl>
<dt>První termín</dt>
<dd>Výklad prvního termínu</dd>
<dt>Druhý termín</dt>
<dd>Výklad druhého termínu</dd>
</dl>
Teoreticky se nemusí psát uzavírací tagy </dt> a </dd>, já je raději píšu, protože se tím nic nezkazí.
Použití a zneužití: Protože Internet už dávno není čistě vědecké médium, lze těchto tagů zneužívat pro formátovací účely. Pokud je ale náhodou někdy potřeba vysvětlit větší množství termnínů, neexistuje lepší a přehlednější nástroj. Já sám rád užívám definic pro seznam změn svých stránek, kdy na místě termínu píšu datum a v definici popisuji ty změny. Příklad:
31. července 2000: Píšu tuhle stránku
1. srpna: Asi ji raději smažu :-)

Compact

Tag compact: Použití atributu "compact" u tagu <dl compact> umožňuje defincicím (tag dd), aby se zobrazovaly vedle definovaného termínu, tedy pokud se tam vejdou. Když se compact nepoužije, (tedy v normálním případě) definice se zobrazí až na dalším řádku.
Nestandardní!: Musím zmínit, že tento atribut je považován za nestandardní, takže by se neměl používat. Podle mých zkušeností je ale podporován v IE i NN, takže se hodí, třebaže má některé chybky, které popisuji níže.
Délka termínu: Někdy je ale definovaný termín příliš dlouhý, takže se vedle něj definice prostě nevejde. Naštěstí se dá nastavit levý okraj definic tak velký, aby se do něj vešly i relativně dlouhé termíny. Levý okraj se nastavuje CSS stylem: dd {margin-left: 150px} třeba. (Stejně tak je možno použít i padding.)
Příliš dlouhý termín, tak dlouhý, že se to vedle něj nemůže vejít: Pokud vedle termínu prostě není místo, definice začíná odsazená na novém řádku, tak jako by atributu "compact" nebylo. Pokud ale náhodou termín kousek přeteče na další řádku, definice se zobrazí vedle toho kousku.
Závaznost syntaxe: Je nutné dávat atribut compact do tagu <dl>, jinde prostě nefunguje (ani v dd, ani v dt).
Compact v CSS: K velké lítosti mnohých "stylařů" se musí tag compact vpisovat přímo do tagu <dl>. V návrhu CSS2 sice existuje nová hodnota vlastnosti display: compact, která zatím ale není nikde podporována. Až bude, tak se to bude zapisovat do stylopisu: dl {display: compact}, zatím to ale nemá smysl. Mnohem větší smysl má zkusit něco takovéhoto:

dt {float: left; margin-right: 1em;}
dd {clear: both;}

FrontPage 98: Dejte si pozor na tenhle Microsoftí editor: namísto <dl compact> zapisuje do kódu <dl codebase="true">. V editoru to vypadá jako compact, ale v žádném prohlížeči to tak nefunguje.

Další možnosti stylování

Odsazení první řádky: Dokonalý špek představuje compact a odsazení první řádky. Dělá se to taktéž pomocí CSS stylů, vlastností text-indent: dd {text-indent: 200px}. Lze to použít namísto odsazení celé definice vlastností margin. Potom to vypadá, jako by v textu byl tabulátor.
Kombinované: Je možno použít i obou odsazení najednou (margin i indent), což může přinést opravdu hezkou úpravu. Mimochodem, Netscape úplně vlastnost text-indent u tagu <dd> ignoruje, takže se není třeba obávat, že by to vypadalo špatně.

Tučný termín

V tomto textu schválně ztučňuji všechny termíny. Normálně se tučně nezobrazují. Stačí napsat do stylopisu deklaraci

dt {font-weight:
		bold}

, čímž se podle zásad CSS ztuční všechny definované termíny. Samozřejmě lze použít jakýkoliv jiný myslitelný formát. Výhodou tohoto formátování je fakt, že funguje i v Netscapu. A je hezké.

Zarovnání doprava

Text definice se dá zarovnávat doprava pouze pomocí CSS stylů:

dd
		{text-align: right; IE}

-- zkusil jsem

<dd
		align="right">

a nefungovalo to. Představte si, co všechno se s tím dá udělat. Třeba nadpis a datum na jednom řádku. Žel, Netscape to nechápe a zarovnává doprava termín. Takže přichází ke slovu opět nesmysl v deklaraci stylu (to je to IE).

Nadpis

datum: 31. července 2000

Zanořené definice

Další seznam definic (<dl compact>) uvnitř jedné definice (<dd>)

první termín: definice 1. termínu
druhý termín: definice druhého

Jde to tabulkami

Všechno, co jsem popisoval v tomto textu, se dá spolehlivěji udělat i pomocí tabulek, třebaže ne tak elegantně. Mimochodem právě existence tabulek je podle mě důvodem, proč se dnes seznamy definic na formátování skoro vůbec nepoužívají.

Reklama