O webu
Identifikátor v HTML/CSS/JS

HTML atribut id má poměrně široké využití:

  1. Odkazování na části stránky pomocí #kotev:

    <a href="#identifikator">
      Odkaz
    </a>
    …
    <div id="identifikator"></div>
  2. Propojení dvojice značek přes <label for>:

    <input id="identifikátor">
    <label for="identifikátor">
      Popisek tlačítka
    </label>
  3. Znázornění vztahu při použití aria-* atributů:

    <label for="policko>
      Název pole
    </label>
    <input id="policko" aria-describedby="popisek">
    <i id="popisek>Popisek políčka</i>
  4. Zaměření elementu CSS selektorem:

    #identifikator {
        color: red;
    }
  5. Získání elementu v JavaScriptu metodou getElementById:

    var el = document.getElementById('identifikator');

    V JS má id ještě jednu zajímavou vlastnost. Každý HTML element s identifikátorem je dostupný přímo přes proměnnou stejného názvu.

    <div id="identifikator"></div>
    <script>
      identifikator.innerHTML = 'Text';
    </script>

    Do uvedeného <div>u se tak nastaví obsah „Text“ – ukázka.

    Obecně na to není moc dobré spoléhat, protože je velmi snadné si tuto proměnnou přepsat jiným obsahem.

Použití identifikátorů v praxi

Ačkoliv je s „idéčky“ možné dělat spoustu věcí, v praxi si jde vystačit s použitím pouze pro kotvy a provázání <label>ů s formulářovými prvky + provázání s atributy pro lepší přístupnost aria-*.

V CSS si jde vystačit jen s třídami. ID oproti nim nenabízejí nic navíc – kromě toho je selektor #id silnější než .trida – to bývá většinou nevýhodné, jelikož bývá přehlednější mít sílu selektorů co možná nejnižší.

Pro zaměření elementů v JavaScriptu je zase užitečné mít v HTML kódu jasně poznamenané, co se v JS používá, tj. využít třeba prostých tříd s prefixem js-*.

<div class="js-identifikator">
</div>

Při dodržení tohoto postupu se jde potom spolehnout na to, že pro CSS se používají jen třídy, pro JavaScript třídy s prefixem a identifikátory tak slouží pouze pro #odkazování a provázání elementů.

Povolené znaky

V HTML 5 se poměrně uvolnilo omezení znaků, které je možné v id atributu použít.

Existuji pouze dvě pravidla – v ID nemůže být mezera a musí mít alespoň jeden znak.

Není tedy problém používat libovolnou diakritiku a speciální znaky. Jediný problém může nastat v CSS, kde platí odlišná pravidla. Číslo na začátku ID se tak musí escapovat nebo použít atributový selektor.

<div id="1337"></div>

Výše uvedený element tak (ne)jde zaměřit:

#1337 { /* nefunguje */ }
[id=1337] { /* atribut funguje */ }
#\31 337 { /* escapování funguje */ }

Při používání ID ke stylování je tak lepší zachovat přísnější pravidla.

Escapování v CSS

Je-li nevyhnutelné části selektoru v CSS escapovat, jde k tomu použít nějaký hotový nástroj:

  • CSS escapes – hotové řešení escapování v CSS

Duplicitní ID

Ještě by každé id mělo být na stránce pouze jednou – jinak je stránka nevalidní. V praxi je to spíš problém kvůli tomu, že první ID vyhrává a ta další jsou ignorována (vyjma CSS, kde není problém zaměřit více elementů se stejným identifikátorem).

Omezení v HTML 4

Ve starších specifikacích HTML byly požadavky na znaky v identifikátorech mnohem přísnější. Podobně jako v názvech CSS tříd neměl identifikátor začínat číslicí.

Obsahovat mohl pouze písmena bez diakritiky, číslice, tečku, dvojtečku, spojovník a podtržítko.

V prohlížečích dlouhodobě funguje všechno, takže se toto omezení ukázalo jako zbytečně přísné.