Při kódování HTML (a nejen v něm) se často nesprávně zaměňují atributy ID a CLASS.
Velkou chybou je tyto atributy považovat za podobné, nebo dokonce zaměnitelné. A přesto se tomu tak děje, neboť pro začátečníky je jejich použití (tj. tagování elementů pro stylování v CSS) velmi podobné (#id nebo .class).
Ve skutečnosti mají téměř protichůdné chování.
ID dává prvku název. Název, který musí být v daném prostoru jedinečný. Podle tohoto názvu musí být prvek jednoznačně určitelný.
CLASS určuje vlastnosti prvku.
Převedeno na příkladu na lidech, ID je „Jakub Bouček, nar.: 11. 11. 1982“, kdežto CLASS by mohl být: „běloch, černovlasý, vysoký, hubený, programátor“. Zatímco podle ID byste ani na celé zemi nenašli jiného odpovídajícího člověka než mě, tak vychrtlých černovlasých programátorů, věřím, je mnoho.
Podobný systém by se měl dodržovat i při kódování v HTML.
Nečastějším důvodem pro použití ID je potřeba dvojího označení jednoho elemntu. Tedy pokud máte například řadu prvků, které mají určitý CLASS a dodatečně zjistíte, že pro stylovní potřebujete v kódu označit první prvek v této řadě. Zde to přímo láká použít ID.
<div class="trida" id="prvni">...</div> <div class="trida">...</div> <div class="trida">...</div> <div class="trida">...</div> <div class="trida">...</div> <div class="trida">...</div>
Ve stylech pak napíšete jen:
div.trida#prvni {...}
Jenže tím si sobě pravděpodobně řežete větev pod vlasním zadkem. Je velká pravděpodobnost, že co nevidět bude třeba mít na stránce podobné řady prvků dvě a nastane problém s tím, že id=“prvni“ nesmí být na stránce použito více než jednou. Pak totiž nezbývá, než vytvářet zvěrstva jako „prvni2“, nebo pravidlo jedinečnosti ignorovat a mít tak nevalidní kód.
Lepším řešeím je proto využít toho, že jeden prvek může mít více class a proto lze zapsat:
<div class="trida prvni">...</div>
div.trida.prvni {...}
Závěrem
Obecně tedy platí, že ID je vhodné použít pouze tehy, pokud je jím jednoznačně označen nějaký přesně určený kus stránky, který pro danou stránku zcela jedinečný.
Proto je například dobré mít pomocí ID stránku rozdělenou na pevně stanovené bloky, což jest: hlavička stránky, hlavní menu, logo stránky, pomocné menu, drobečková navigace, místní nabídka (boční panel), obsah stránky a patička stránky.U těchto bloků se vám nestane, že by se některý mohl někdy v budoucnu opakovat vícekrát na stránce.
A pokud by přecijen nějaká taková situace nastala, že by se kupříkladu na stránce objevily dvě hlavičky, nebude to určitě jen tak a navíc tyto hlavičky budou mít vůči sobě určitě nějaký vztah (nadřazený/podazený), který lze použít pro jejich jednoznačnou identifikaci v názvu ID (např.: sub_header).
A velmi stručně řečeno: nepoužívejte v kódu ID, pokud k tomu opravdu nebudete schopni dokonale obhájit, proč to děláte.
Problematika ID a CLASS jde ještě více do hloubky, ale to už je zcela nad rámec tohoto článku.
