Co je atribut ID v HTML a jak se používá?

Podle W3C, atribut ID v HTML isa jedinečný identifikátor prvku. Poskytuje způsob, jak identifikovat oblast webové stránky pro styly CSS, kotevní odkazy a cíle pro skripty.

K čemu se používá atribut ID?

Atribut ID provádí u webových stránek několik akcí:

  • Selektor stylů: Tuto funkci používá většina lidí pro atribut ID. Protože jsou jedinečné, budete stylovat pouze jednu položku na své webové stránce, když budete stylovat pomocí vlastnosti ID. Nevýhodou použití ID pro stylingové účely je, že má velmi vysokou úroveň specifičnosti, což může být velmi náročné, pokud potřebujete z nějakého důvodu přepsat styl později v a styl. Z tohoto důvodu se současné webové praktiky opírají o používání tříd a selektorů tříd místo ID a selektorů ID pro obecné účely stylingu.
  • Pojmenované kotvy pro propojení s: internetové prohlížeče zacilte na ID na konci adresy URL a zacilte na přesná umístění ve svých webových dokumentech. Přidejte ID na konec adresy URL stránky, před kterým je značka hash. Propojte tyto kotvy se samotnou stránkou přidáním značky hash a názvu ID do souboru
    instagram viewer
    href atribut pro prvek. Například pro divizi s ID Kontakt, odkaz na něj na této stránce s #Kontakt.
  • Odkaz na skripty: Pokud píšete jakékoli funkce Javascript, použijte atribut ID, abyste mohli pomocí skriptů provádět změny přesného prvku na stránce.
  • Jiné zpracování: ID podporuje zpracování ve vašich webových dokumentech jakýmkoli způsobem, který potřebujete. Můžete například extrahovat HTML do databáze a použít atribut ID k identifikaci polí.

Pravidla pro používání atributu ID

Zajistěte, aby vaše atributy ID odpovídaly těmto třem standardům:

  • ID musí začínat písmenem (a-z nebo A-Z).
  • Všechny následující znaky mohou být písmena, číslice (0-9), spojovníky (-), podtržítka (_), dvojtečky (:) a tečky (.).
  • Každé ID musí být v dokumentu jedinečné.

Pomocí atributu ID

Po identifikaci jedinečného prvku vašeho webu použijte šablony stylů stylovat jen ten jeden prvek.

Například k identifikaci ID s názvem Kontakt, použijte některou z těchto forem:

div # kontakt {pozadí: # 0cf;} 
#contact {background: # 0cf;}

První vzorek cílí na divizi s atributem ID Kontakt. Druhá stále cílí na prvek s ID Kontakt, prostě by to nestanovilo, že je to divize. Konečný výsledek stylingu by byl úplně stejný.

Můžete také odkazovat na tento konkrétní prvek bez přidání jakýchkoli značek.

Odkaz na tento odstavec ve skriptech pomocí getElementById Metoda JavaScript:

document.getElementById ("kontaktní sekce")

Atributy ID jsou v HTML stále velmi užitečné selektory tříd nahradili je pro většinu obecných stylingových účely. Použití atributu ID jako háku pro styly a zároveň jejich použití jako kotvy pro odkazy nebo cíle pro skripty znamená, že v dnešním webovém designu mají stále důležité místo.