Lednové slevy jsou tu! Až 60 % na vše. Vyzkoušejte nový AI WebEditor. 

Co je atribut

Atribut je vlastnost nebo parametr, který poskytuje doplňující informace o elementu v HTML kódu. Umožňuje upřesnit, jak má být konkrétní prvek na stránce zobrazen nebo jak se má chovat. Atributy se zapisují uvnitř otevírací značky elementu a obvykle mají formát název=“hodnota“. 

Díky atributům lze například nastavit odkazovou adresu, alternativní text obrázku, jedinečné ID prvku nebo jeho třídu pro použití v CSSJavaScriptu. 

Jak atributy fungují 

Každý HTML prvek může mít jeden nebo i více atributů. Některé atributy jsou povinné (např. src u obrázků), jiné volitelné (např. alt text).  

Obecný zápis atributu v HTML: 

<tag atribut=“hodnota“>Obsah</tag> 

Příklady HTML atributů 

Atributy se používají v téměř každém HTML kódu, následující příklady jsou ty nejběžnější. 

<a href=“https://www.webglobe.cz“>Odkaz na Webglobe</a> 

  • Atribut href určuje cílovou adresu odkazu. 

<img src=“obrazek.jpg“ alt=“Popis obrázku“> 

  • Atribut src definuje cestu k obrázku, atribut alt poskytuje alternativní text. 

<p id=“uvod“ class=“text-modry“>Úvodní odstavec</p> 

  • Atribut id jednoznačně identifikuje prvek, atribut class umožňuje aplikaci stylů. 

HTML atributy se dělí do dvou hlavních skupin: 

  • Globální atributy – lze je použít u všech HTML elementů (např. id, class, style, title). 
  • Specifické atributy – jsou určeny jen pro konkrétní elementy (např. href pro <a>, src pro <img>, cols pro <textarea>). 

Jak správně atributy používat 

Správné používání atributů zlepšuje čitelnost kódu, přístupnost webu i jeho SEO. Nevhodné použití může naopak vést k chybám v zobrazení stránky nebo k horšímu hodnocení vyhledávači. 

  • Používejte atributy podle jejich určení (např. alt vždy pro alternativní popis obrázku). 
  • Vkládejte hodnoty atributů do uvozovek. 
  • Dodržujte unikátnost id na stránce. 
  • Nepoužívejte zastaralé atributy (např. align, bgcolor), nahraďte je CSS. 
  • Dbejte na přístupnost – např. aria-* atributy pro čtečky obrazovky. 

 

Poslední aktualizace: