Tagy HTML5: příručka s příklady

HTML tagy nejsou seznam k memorování, ale nástroj pro označení významu. Prohlížeč, vyhledávací robot i čtečka obrazovky čtou tutéž stránku jinak a jediné, o co se všichni opírají, jsou zvolené tagy. Níže najdete všechny aktuální tagy HTML5: co každý znamená, kdy se hodí, který tag nahradil zastaralý a jaké chyby se v kódu objevují nejčastěji.

Jak je HTML dokument postavený

Každá stránka je strom. Strom má jeden kořen <html> a dvě větve: <head> se servisními údaji a <body> s tím, co vidí návštěvník. Všechno ostatní se vnořuje do těchto dvou větví a právě vnoření určuje, jak prohlížeč postaví DOM a na co CSS použije styly.

Minimální korektní dokument HTML5 vypadá takto:

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Název stránky</title>
</head>
<body>
    <h1>Ahoj</h1>
</body>
</html>

Čtyři řádky z toho je třeba pochopit. <!DOCTYPE html> přepíná prohlížeč do standardního režimu — bez něj se zapne režim kompatibility s dvacet let starými dokumenty a výpočet rozměrů bloků se změní. Atribut lang sděluje vyhledávači a hlasové syntéze jazyk textu. <meta charset="UTF-8"> musí být v prvních 1024 bajtech dokumentu, jinak se diakritika změní v otazníky. <meta name="viewport"> zajišťuje, že se na telefonu stránka nezobrazí jako „celá šířka desktopu drobným písmem“.

Blokové a řádkové prvky

Historicky se tagy dělily na blokové (div, p, section) a řádkové (span, a, strong). Specifikace HTML5 toto dělení nahradila kategoriemi obsahu, v praxi však rozdíl zůstal: blokový prvek zabírá celou dostupnou šířku a začíná na novém řádku, řádkový plyne uvnitř textu. Platí pravidlo vnoření: řádkový prvek nesmí obsahovat blokový. Jedinou výjimkou je <a>, kterému HTML5 dovolilo obalit celé bloky — hodí se, když má být odkazem celá karta produktu.

Sémantická struktura stránky

Před HTML5 se typická stránka skládala z do sebe vnořených <div> s třídami header, menu, content, sidebar. Stroj nevěděl, co tyto třídy znamenají — byly to pro něj stejné bezejmenné krabice. Sémantické tagy daly každé části stránky vlastní jméno.

Rozdíl mezi <article> a <section> mate nejčastěji. Zkouška je prostá: pokud lze úryvek vyjmout ze stránky, zveřejnit samostatně a neztratí smysl, jde o <article>. Je-li to jen obsahová část něčeho většího, jde o <section>. Příspěvek na blogu je article. Část „Parametry“ uvnitř popisu produktu je section.

Typická stránka blogu se označuje takto:

<body>
  <header>
    <a href="/">Logo</a>
    <nav><a href="/blog/">Blog</a> <a href="/contacts/">Kontakty</a></nav>
  </header>

  <main>
    <article>
      <h1>Nadpis článku</h1>
      <p>Text článku…</p>
      <section>
        <h2>Část článku</h2>
        <p>…</p>
      </section>
      <footer>Autor, datum publikace</footer>
    </article>
  </main>

  <aside>Podobné příspěvky</aside>

  <footer>© 2026</footer>
</body>

Přínos není abstraktní. Čtečka obrazovky umožní nevidomému skočit rovnou na main a vynechat menu. Režim čtení v prohlížeči rozpozná article a zobrazí jen text. Vyhledávací robot přesněji pozná, kde je hlavní obsah a kde začíná obal opakovaný na všech stránkách.

Text: nadpisy, odstavce a zvýraznění

Textové tagy používáme denně — a právě u nich se nejčastěji zaměňuje vzhled za význam.

Rozdíl mezi <strong> a <b> je ve významu, ne v řezu písma. „Pozor: server se restartuje“ je strong, protože věta je důležitá. Název produktu vysázený tučně podle typografické zvyklosti je b. Totéž platí pro dvojici <em> a <i>: první mění smysl věty, druhý jen naklání písmo.

U nadpisů platí pravidlo, které se porušuje neustále: úrovně tvoří osnovu dokumentu, ne sadu velikostí písma. Následuje-li po h2 rovnou h4, vznikne ve struktuře díra. Potřebujete menší písmo? To je úkol pro CSS, ne důvod sáhnout o úroveň níž.

Seznamy

HTML má tři druhy seznamů a každý řeší svůj úkol.

<ul>                        <!-- odrážkový, na pořadí nezáleží -->
  <li>První položka</li>
  <li>Druhá položka</li>
</ul>

<ol start="3" reversed>      <!-- číslovaný, na pořadí záleží -->
  <li>Třetí v pořadí</li>
</ol>

<dl>                         <!-- seznam definic -->
  <dt>HTML</dt>
  <dd>Značkovací jazyk pro dokumenty</dd>
  <dt>CSS</dt>
  <dd>Jazyk pro popis vzhledu</dd>
</dl>

<ol> má užitečné atributy, na které se zapomíná: start určuje začátek číslování, reversed je otočí, type přepne značky na písmena nebo římské číslice. Seznam definic <dl> se skvěle hodí pro slovníčky pojmů, parametry produktu a bloky „otázka — odpověď“: dvojice „pojem — popis“ čte stroj jako spojené, na rozdíl od dvou sousedních odstavců.

Menu webu je také seznam. Odkazy jen oddělené mezerami přečte čtečka obrazovky jako souvislý text, zatímco seznam ohlásí: „navigace, 5 položek“.

Odkazy a navigace

<a> je hlavní tag hypertextu a několik jeho atributů stojí za to znát zpaměti.

<a href="/blog/">Interní odkaz</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Externí</a>
<a href="#section-2">Kotva na téže stránce</a>
<a href="mailto:[email protected]">E-mail</a>
<a href="tel:+380675024584">Zavolat</a>
<a href="/price.pdf" download>Stáhnout ceník</a>

target="_blank" bez rel="noopener" je stará bezpečnostní díra: otevřená stránka získá přístup k objektu window.opener a může podvrhnout původní panel. Moderní prohlížeče noopener doplňují samy, spoléhat se na to v cizím prostředí je ale nerozumné.

Atribut rel nese i význam pro SEO: rel="nofollow" říká vyhledávači, ať nepředává váhu, rel="sponsored" označuje placený odkaz, rel="ugc" odkaz z uživatelského obsahu. Text odkazu musí být smysluplný: „více“ a „zde“ jsou stejně neužitečné pro vyhledávač i pro člověka, který stránku poslouchá čtečkou a dostane seznam odkazů bez okolního textu.

Obrázky, video a zvuk

Obrázek v HTML není jen <img>. Kolem něj stojí celá rodina tagů, která řeší dva úkoly: popsat obrázek a podat prohlížeči soubor přiměřené velikosti.

<figure>
  <img src="/img/scheme.webp"
       alt="Schéma struktury HTML dokumentu"
       width="1200" height="630"
       loading="lazy" decoding="async">
  <figcaption>Strom dokumentu: jeden kořen a dvě větve</figcaption>
</figure>

Atribut alt je povinný vždy. Popisuje obsah obrázku těm, kdo jej nevidí, a zobrazí se místo obrázku, který se nenačetl. U čistě dekorativního obrázku se píše prázdné alt="" — čtečka jej pak přeskočí, zatímco chybějící atribut ji donutí přečíst název souboru. Atributy width a height neslouží k rozměrům, ale k tomu, aby si prohlížeč předem rezervoval místo: bez nich stránka při načítání poskakuje, což přímo zhoršuje Cumulative Layout Shift v Core Web Vitals. loading="lazy" odloží obrázky mimo viditelnou oblast.

Když je potřeba podat různým obrazovkám různé soubory, nastupuje <picture>:

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Popis">
</picture>

Prohlížeč vezme první formát, kterému rozumí, a tam skončí. Starý prohlížeč dojde k <img> a dostane JPEG. Tentýž postup s atributem media ukáže na telefonu výšku a na desktopu šířku.

Automatické přehrávání funguje jen ve spojení autoplay muted playsinline — bez muted jej mobilní prohlížeč zablokuje. U <iframe> vždy uvádějte title: čtečka jím ohlásí obsah rámu, jinak návštěvník uslyší bezejmennou „vloženou oblast“.

Tabulky

Tabulky se vrátily do hry poté, co se přestaly používat na sazbu. Pro skutečná tabulková data alternativu nemají, označit je ale musíte úplně.

<table>
  <caption>Tarify hostingu</caption>
  <thead>
    <tr><th scope="col">Tarif</th><th scope="col">Disk</th><th scope="col">Cena</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Start</th><td>10 GB</td><td>3 $</td></tr>
    <tr><th scope="row">Business</th><td>50 GB</td><td>9 $</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">Ceny bez DPH</td></tr>
  </tfoot>
</table>

Tři věci odlišují označenou tabulku od hromady buněk. <caption> jí dá název, který se přečte jako první. <th> s atributem scope prohlásí buňku za záhlaví sloupce nebo řádku a čtečka při pohybu po buňkách napovídá: „Business, Cena, 9 dolarů“. Rozdělení na <thead>, <tbody> a <tfoot> umožní prohlížeči opakovat záhlaví při tisku dlouhé tabulky a rolovat tělo odděleně.

Na úzké obrazovce je široká tabulka vždy problém. Fungují dvě řešení: obalit ji kontejnerem s overflow-x: auto a nechat rolovat, nebo pomocí CSS přestavět řádky na karty a záhlaví sloupců brát z data-label. Obojí ponechá kód správný — tabulku rozbije teprve snaha vtěsnat ji do šířky obrazovky zmenšením písma.

Formuláře a vstupní pole

Formuláře jsou největší skupina tagů a jediné místo, kde HTML nejen zobrazuje, ale i sbírá data.

<form action="/send/" method="post">
  <fieldset>
    <legend>Poptávka</legend>

    <label for="name">Jméno</label>
    <input type="text" id="name" name="name" required autocomplete="name">

    <label for="mail">E-mail</label>
    <input type="email" id="mail" name="email" required
           placeholder="[email protected]" autocomplete="email">

    <label for="plan">Tarif</label>
    <select id="plan" name="plan">
      <optgroup label="Hosting">
        <option value="start">Start</option>
        <option value="pro" selected>Business</option>
      </optgroup>
    </select>

    <label for="msg">Zpráva</label>
    <textarea id="msg" name="message" rows="5"></textarea>

    <button type="submit">Odeslat</button>
  </fieldset>
</form>

Spojení <label for> s id pole není formalita. Zvětšuje plochu pro kliknutí — klik na popisek umístí kurzor do pole — a čtečce díky němu dojde, na co se formulář ptá. Pole bez popisku, kde jeho roli hraje placeholder, je běžná chyba: nápověda zmizí při prvním znaku a návštěvník přestane vědět, co vyplňuje.

Typ pole určuje jak klávesnici na telefonu, tak vestavěnou kontrolu:

Validace prostředky HTML funguje bez jediného řádku JavaScriptu: required zakáže odeslání prázdného pole, minlength a maxlength omezí délku, pattern zadá regulární výraz, min a max meze čísla a data. Je to první linie, ne ochrana: kontrolu na serveru nenahrazuje, protože jakýkoli požadavek lze poslat mimo formulář.

Pozornost si zaslouží ještě dva tagy této skupiny. <datalist> dá poli našeptávání a přitom ponechá možnost zadat vlastní hodnotu. <output> zobrazí výsledek výpočtu — třeba součet objednávky přepočítaný při změně množství.

Interaktivní prvky bez JavaScriptu

Část chování, kvůli které se dřív připojovaly skripty, je v HTML5 vestavěná.

<details>
  <summary>Co zahrnuje správa webu?</summary>
  <p>Aktualizace, zálohy, sledování dostupnosti.</p>
</details>

<dialog id="modal">
  <p>Poptávka odeslána</p>
  <button onclick="modal.close()">Zavřít</button>
</dialog>

<progress value="70" max="100">70%</progress>
<meter value="0.8" low="0.3" high="0.9">80%</meter>

<details> se <summary> je hotová harmonika: rozbalí se kliknutím, funguje z klávesnice, indexuje ji vyhledávač. Blok „otázka — odpověď“ na tomto tagu nepotřebuje jediný řádek JavaScriptu. <dialog> je modální okno se správným chováním fokusu: metoda showModal() uzamkne fokus uvnitř okna a zavře se klávesou Escape. <progress> ukazuje průběh procesu, <meter> hodnotu ve známém rozsahu, například zaplnění disku.

Servisní tagy v <head>

Tyto tagy návštěvník nevidí, přesto rozhodují o tom, jak stránka vypadá ve výsledcích hledání a na sociálních sítích.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tagy HTML5: příručka</title>
  <meta name="description" content="Všechny aktuální tagy HTML5 s příklady">
  <link rel="canonical" href="https://example.com/html5/">
  <link rel="alternate" hreflang="uk" href="https://example.com/uk/html5/">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/style.css">
  <meta property="og:title" content="Tagy HTML5: příručka">
  <meta property="og:image" content="https://example.com/img/cover.webp">
  <script src="/app.js" defer></script>
</head>

<title> je nejsilnější textový signál pro vyhledávač a to, co návštěvník vidí na panelu. <link rel="canonical"> určuje hlavní adresu stránky, vede-li na ni několik URL s parametry. hreflang propojuje jazykové verze — pro vícejazyčný web povinné, bez něj vyhledávač ukáže špatnou verzi. Vlastnosti og: určují, jak odkaz vypadá v messengeru a na sociální síti.

O připojování skriptů platí jedno: <script> bez atributů zastaví zpracování dokumentu, dokud se soubor nenačte a nespustí. Atribut defer odloží spuštění na konec zpracování a zachová pořadí souborů, async spustí ihned po načtení a pořadí nezaručuje. Pro měřicí kódy se hodí async, pro kód aplikace defer.

Zastaralé tagy a čím je nahradit

Prohlížeče je stále zobrazují, specifikace je však vyřadila: část obstarávala vzhled, který dávno patří do CSS, část prostě škodila.

Vlastní příběh má <hgroup>. Byl ze specifikace vyřazen, pak vrácen s jiným významem a dnes pro dvojici „nadpis plus podnadpis“ stačí obyčejný <p> vedle nadpisu.

Časté chyby v kódu

• Několik <h1> na stránce. Nadpis první úrovně popisuje celou stránku a je jediný. Vše ostatní patří o úroveň níž.
• Blok uvnitř odstavce. <div> uvnitř <p> prohlížeč mlčky opraví tím, že odstavec zavře dřív — a sazba se rozjede bez viditelné příčiny.
• <br> místo odstupů. Tři zalomení za sebou se snaží kódem udělat to, co dělá margin.
• Obrázek bez alt. Ztrácí se přístupnost i návštěvnost z vyhledávání obrázků.
• Tlačítko udělané z <div>. Takové „tlačítko“ potřebuje obsluhu klávesnice, role a tabindex, zatímco <button> to umí rovnou.
• Odkaz bez href. Prvek vypadne z navigace klávesnicí. Nemáte adresu — použijte <button>.
• Tabulka pro sazbu. Na mobilu se takový kód nepřestaví a čtečka jej přečte jako datovou tabulku.
• <div> místo sémantiky. Stránka ze samých div funguje, ale přijde o vše, co přináší značkování významu: rychlou navigaci, režim čtení, srozumitelnou strukturu pro vyhledávač.

Jak kód zkontrolovat

Tři nástroje pokryjí téměř všechny chyby. Validátor W3C najde nezavřené tagy, špatné vnoření a neexistující atributy. Záložka Accessibility ve vývojářských nástrojích prohlížeče ukáže strom přístupnosti — to, co „vidí“ čtečka obrazovky. Lighthouse v Chromu zkontroluje sémantiku spolu s rychlostí a vrátí seznam konkrétních připomínek.

Jedna domácí zkouška vydá za všechny: otevřete stránku s vypnutým CSS. Pokud se dokument i bez stylů čte shora dolů jako smysluplný text s nadpisy, seznamy a popisky obrázků, je kód v pořádku. Pokud se změní v kaši, nejde o styly, ale o tagy.

Stručně to hlavní

Stačí mít v hlavě několik pravidel a zbytek z nich vyplyne sám:

• Tag se volí podle významu, ne podle vzhledu. Vzhled kteréhokoli prvku změní jeden řádek CSS, zatímco význam uložený v tagu čtou stroje — a styly jej nezmění.
• Strukturu stránky tvoří header, nav, main, article, section, aside, footer. <div> zbývá na případy, kdy se nehodí žádný z nich, ne naopak.
• Nadpisy tvoří osnovu dokumentu. Jeden h1, dál popořadě, bez přeskakování úrovní.
• Tři atributy, na které se zapomíná nejčastěji: alt u obrázku, for u popisku pole a title u rámu. Každý zabere dvě minuty a přístupnost znatelně zlepší.
• Formulář se umí zkontrolovat sám. Správný type spolu s required a pattern pokryje většinu validace bez JavaScriptu — kontrolu na serveru ale nenahradí.
• Všechno kolem vzhledu patří do CSS. Právě proto ze specifikace odešly font, center a jejich sousedé.

Dobrý kód není skoro vidět: web prostě funguje — rychle se načte, dobře se čte na telefonu, správně vypadá ve výsledcích hledání i v messengeru a je použitelný se čtečkou obrazovky. Špatného kódu si všimnete hned, léčí se ale obvykle jinde, než to bolí: opravují se styly, přidávají skripty, instalují pluginy — zatímco příčinou jsou dva tři špatně zvolené tagy.

Zkontrolujte svou stránku hned teď: otevřete zdrojový kód a spočítejte, kolik je v něm <div> a kolik tagů s významem. Převažují-li první v poměru tři ku jedné, projděte tento článek od začátku po sekcích. Celý web přepisovat nebudete muset: obvykle stačí přejmenovat několik kontejnerů a doplnit zapomenuté atributy.