HTML tutoriál

HOME HTML Úvod do HTML HTML editory HTML Basic HTML prvky Atributy HTML HTML nadpisy HTML odstavce HTML styly Formátování HTML HTML citace HTML komentáře HTML barvy HTML CSS HTML odkazy HTML obrázky HTML favicon HTML tabulky HTML seznamy HTML Block & Inline HTML třídy ID HTML HTML iframe HTML JavaScript Cesty souboru HTML HTML hlava Rozložení HTML HTML responzivní Počítačový kód HTML Sémantika HTML Průvodce stylem HTML HTML entity HTML symboly HTML Emojis Znaková sada HTML HTML kódování URL HTML vs. XHTML

HTML formuláře

HTML formuláře Atributy formuláře HTML HTML prvky formuláře Typy vstupu HTML Vstupní atributy HTML Atributy vstupního formuláře HTML

HTML grafika

HTML plátno HTML SVG

HTML média

HTML média HTML video Zvuk HTML HTML pluginy HTML YouTube

HTML API

Geolokace HTML HTML Drag/Drop Webové úložiště HTML HTML Web Workers HTML SSE

Příklady HTML

Příklady HTML HTML kvíz HTML cvičení HTML certifikát HTML souhrn Přístupnost HTML

HTML reference

Seznam značek HTML Atributy HTML Globální atributy HTML Podpora HTML prohlížeče HTML události HTML barvy HTML plátno HTML Audio/Video HTML Doctypes HTML znakové sady HTML kódování URL HTML jazykové kódy Zprávy HTTP HTTP metody Převodník PX na EM Klávesové zkratky

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 hrefurč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 srcurč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 widtha heighturčující šířku a výšku obrázku (v pixelech):

Příklad

<img src="img_girl.jpg" width="500" height="600">

Atribut alt

Povinný altatribut 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 srcatributu 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 stylese 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

langAtribut 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 titledefinuje 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, hrefna <a>kterou odkaz směřuje
  • Atribut určuje cestu k obrázku, který se má srczobrazit <img>
  • Atributy widtha poskytují informace heighto <img>velikosti obrázků
  • Atribut altof <img>poskytuje alternativní text pro obrázek
  • Atribut stylese používá k přidání stylů k prvku, jako je barva, písmo, velikost a další
  • Atribut langtagu <html>deklaruje jazyk webové stránky
  • Atribut titledefinuje některé další informace o prvku

HTML cvičení

Otestujte se pomocí cvičení

Cvičení:

Přidejte „nápovědu“ do odstavce níže s textem „O W3Schools“.

<p ="About W3Schools">W3Schools je web pro vývojáře webu.</p>


Odkaz na atribut HTML

Kompletní seznam všech atributů pro každý HTML element je uveden v našem: HTML Attribute Reference .