Atributy HTML
Atributy HTML poskytují další informace o prvcích HTML.
Atributy HTML
- Všechny prvky HTML mohou mít atributy
- Atributy poskytují další informace o prvcích
- Atributy jsou vždy uvedeny v počáteční značce
- Atributy obvykle přicházejí v párech název/hodnota, jako je: name="hodnota"
Atribut href
Značka <a>
definuje hypertextový odkaz. Atribut
href
určuje adresu URL stránky, na kterou odkaz směřuje:
Příklad
<a href="https://www.w3schools.com">Visit W3Schools</a>
Více o odkazech se dozvíte v naší kapitole Odkazy HTML .
Atribut src
Značka <img>
se používá k vložení obrázku do stránky HTML. Atribut src
určuje cestu k obrázku, který se má zobrazit:
Příklad
<img src="img_girl.jpg">
Existují dva způsoby, jak zadat adresu URL v src
atributu:
1. Absolute URL – Odkazuje na externí obrázek, který je umístěn na jiné webové stránce. Příklad: src="https://www.w3schools.com/images/img_girl.jpg" .
Poznámky: Externí obrázky mohou být chráněny autorským právem. Pokud nezískáte povolení k jeho použití, můžete se dopustit porušení autorských práv. Kromě toho nemůžete ovládat externí obrazy; může být náhle odstraněn nebo změněn.
2. Relativní URL – Odkazuje na obrázek, který je hostován v rámci webové stránky. Zde adresa URL nezahrnuje název domény. Pokud adresa URL začíná bez lomítka, bude se vztahovat k aktuální stránce. Příklad: src="img_girl.jpg". Pokud adresa URL začíná lomítkem, bude se vztahovat k doméně. Příklad: src="/images/img_girl.jpg".
Tip: Téměř vždy je nejlepší používat relativní adresy URL. Pokud změníte doménu, nezlomí se.
Atributy šířka a výška
Značka <img>
by také měla obsahovat
atributy width
a
height
určující šířku a výšku obrázku (v pixelech):
Příklad
<img src="img_girl.jpg" width="500" height="600">
Atribut alt
Povinný alt
atribut pro <img>
značku určuje alternativní text pro obrázek, pokud obrázek z nějakého důvodu nelze zobrazit. Může to být způsobeno pomalým připojením, chybou v src
atributu nebo pokud uživatel používá čtečku obrazovky.
Příklad
<img src="img_girl.jpg" alt="Girl
with a jacket">
Příklad
Podívejte se, co se stane, když se pokusíme zobrazit obrázek, který neexistuje:
<img src="img_typo.jpg" alt="Girl
with a jacket">
Více o obrázcích se dozvíte v naší kapitole Obrázky HTML .
Atribut stylu
Atribut style
se používá k přidání stylů k prvku, jako je barva, písmo, velikost a další.
Příklad
<p style="color:red;">This is a red paragraph.</p>
Více o stylech se dozvíte v naší kapitole Styly HTML .
Atribut lang
lang
Atribut byste měli vždy zahrnout do <html>
značky, abyste deklarovali jazyk webové stránky. To má pomoci vyhledávačům a prohlížečům.
Následující příklad specifikuje angličtinu jako jazyk:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Kódy zemí lze také přidat ke kódu jazyka v lang
atributu. První dva znaky tedy definují jazyk HTML stránky a poslední dva znaky definují zemi.
Následující příklad uvádí angličtinu jako jazyk a Spojené státy jako zemi:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Všechny kódy jazyků můžete vidět v naší Referenční příručce jazykových kódů HTML .
Atribut názvu
Atribut title
definuje některé další informace o prvku.
Hodnota atributu title se zobrazí jako nápověda, když najedete myší na prvek:
Příklad
<p title="I'm a tooltip">This is a paragraph.</p>
Doporučujeme: Vždy používejte malá písmena
Standard HTML nevyžaduje názvy atributů malými písmeny.
Atribut title (a všechny ostatní atributy) lze psát velkými nebo malými písmeny jako title nebo TITLE .
W3C však doporučuje v HTML atributy malých písmen a požaduje atributy malých písmen pro přísnější typy dokumentů, jako je XHTML.
Ve W3Schools vždy používáme názvy atributů malými písmeny.
Doporučujeme: Vždy uvádějte hodnoty atributů
Standard HTML nevyžaduje uvozovky kolem hodnot atributů.
W3C však doporučuje uvozovky v HTML a požaduje uvozovky pro přísnější typy dokumentů, jako je XHTML.
Dobrý:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Špatný:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
Někdy musíte použít uvozovky. Tento příklad nezobrazí atribut title správně, protože obsahuje mezeru:
Příklad
<p
title=About W3Schools>
Ve W3Schools vždy používáme uvozovky kolem hodnot atributů.
Jednoduché nebo dvojité uvozovky?
Dvojité uvozovky kolem hodnot atributů jsou v HTML nejběžnější, ale lze použít i jednoduché uvozovky.
V některých situacích, kdy samotná hodnota atributu obsahuje dvojité uvozovky, je nutné použít jednoduché uvozovky:
<p title='John "ShotGun" Nelson'>
Nebo naopak:
<p title="John 'ShotGun' Nelson">
Shrnutí kapitoly
- Všechny prvky HTML mohou mít atributy
- Atribut určuje adresu URL stránky,
href
na<a>
kterou odkaz směřuje - Atribut určuje cestu k obrázku, který se má
src
zobrazit<img>
- Atributy
width
a poskytují informaceheight
o<img>
velikosti obrázků - Atribut
alt
of<img>
poskytuje alternativní text pro obrázek - Atribut
style
se používá k přidání stylů k prvku, jako je barva, písmo, velikost a další - Atribut
lang
tagu<html>
deklaruje jazyk webové stránky - Atribut
title
definuje některé další informace o prvku
HTML cvičení
Odkaz na atribut HTML
Kompletní seznam všech atributů pro každý HTML element je uveden v našem: HTML Attribute Reference .