Úvod k úloze

Jakmile máte v HTML dokumentu kostru a umíte správně volit sémantické elementy, dalším krokem je práce s atributy. Atributy přidávají k elementům doplňující informace – pomáhají je identifikovat, propojit s CSS styly či JavaScriptem, nebo určují, jak se má daný prvek chovat. Správné používání atributů je naprosto zásadní pro funkčnost i vzhled stránky. Pokud je napíšeme chybně, stránka nemusí fungovat podle očekávání.

Teorie a principy

  1. Co je atribut

    • Atribut je vlastnost HTML elementu, která upřesňuje jeho význam nebo chování.

    • Vždy se píše uvnitř otevíracího tagu.

    • Má tvar název="hodnota".

  2. Základní atributy

    • id – jednoznačný identifikátor prvku (na stránce by se měl vyskytovat jen jednou).

    • class – třída, umožňuje seskupovat prvky pro stylování nebo skriptování.

    • src – cesta ke zdroji, nejčastěji u obrázků (<img>) nebo skriptů (<script>).

    • alt – alternativní text u obrázků, důležitý pro přístupnost a SEO.

  3. Syntaktická pravidla

    • Hodnoty atributů se vždy píší do uvozovek (" ").

    • Mezi atributy musí být mezera.

    • Jeden tag může mít více atributů, ale každý musí být jasně oddělený.

Praktické příklady kódu

Použití id a class

  • Pomocí id="uvod" na něj můžeme odkazovat v CSS nebo JavaScriptu.

  • class="zvyrazneny" umožňuje použít stejný styl i u více prvků.

Obrázek se zdrojem a alternativním textem

  • src určuje cestu k souboru obrázku.

  • alt popisuje obsah obrázku pro uživatele, kteří jej nemohou vidět.

Využití více atributů v jednom tagu

  • href definuje odkaz.

  • target="_blank" otevírá odkaz v nové záložce.

  • class="tlacitko" umožňuje odkaz graficky upravit.

Typické chyby / záludnosti

  • Chybějící uvozovky:

  • Některé prohlížeče si poradí, ale je to nevalidní HTML. Správně:

  • Záměna id a class – ID má být jedinečné, zatímco class můžete použít opakovaně.

  • Prázdný atribut alt u dekorativních obrázků je v pořádku:

    • Ale nikdy ho nevynechávejte úplně.

  • Zapomenuté mezery mezi atributy:

    • zde chybí mezera před alt.

Shrnutí

  • Atributy rozšiřují elementy o dodatečné informace a chování.

  • Syntaxe je vždy název="hodnota".

  • Důležité atributy:

    • id (jedinečný identifikátor),

    • class (pro skupiny prvků),

    • src (cesta ke zdroji),

    • alt (alternativní text obrázku).

  • Dodržujte uvozovky a mezery mezi atributy.

  • Správné atributy jsou klíčové pro stylování (CSS) i interaktivitu (JavaScript).