Sémantické tagy

Doba čtení: cca 3 min

Co jsou sémantické tagy?

HTML nabízí dvě skupiny tagů. První skupinou jsou tagy, které jen vizuálně formátují obsah – například <div> nebo <span>. Ty samy o sobě nic neznamenají, jsou to prázdné obálky. Druhou skupinou jsou sémantické tagy – tagy, které svým názvem přímo říkají, co jejich obsah představuje.

Slovo sémantika znamená význam. Sémantický tag tedy není jen technická značka – je to informace. Prohlížeč, vyhledávač i odečítač obrazovky díky němu ví, že jde například o navigaci, článek nebo zápatí stránky.

Proč na tom záleží?

Představ si dva úryvky kódu, které vypadají v prohlížeči úplně stejně:

<div class="navigace">
			  <a href="index.html">Domů</a>
			</div>
<nav>
			  <a href="index.html">Domů</a>
			</nav>

Vizuálně jsou totožné. Ale pro VoiceOver je mezi nimi zásadní rozdíl. U druhé varianty VoiceOver oznámí: „Navigace“ – a uživatel okamžitě ví, že vstoupil do navigačního menu. U první varianty to neví – <div> mu nic neřekne.

Sémantické tagy tedy pomáhají třem věcem najednou:

  • Přístupnosti – odečítače obrazovky se v stránce lépe orientují a mohou mezi sekcemi přeskakovat.
  • SEO – vyhledávače lépe rozumí struktuře stránky a hodnotí ji výše.
  • Čitelnosti kódu – vývojář na první pohled vidí, co je navigace, co je článek a co je patička.

Přehled nejdůležitějších sémantických tagů

<header>

Záhlaví stránky nebo sekce. Obvykle obsahuje logo, název webu nebo úvodní navigaci. Na stránce může být více elementů <header> – každý článek může mít svůj vlastní.

<nav>

Navigační oblast s odkazy. Používej ho pro hlavní menu, záložkovou navigaci nebo seznam odkazů na části stránky. VoiceOver uživateli oznámí vstup do navigace a umožní mu ji přeskočit.

<main>

Hlavní obsah stránky. Na celé stránce by měl být právě jeden <main>. VoiceOver díky němu umožňuje přeskočit opakující se záhlaví a navigaci rovnou k obsahu – proto je kombinace skip linku a <main> zlatý standard přístupnosti.

<article>

Samostatný, ucelený obsah, který by dával smysl i vytržený ze stránky – blogový příspěvek, novinový článek, lekce v učebně nebo komentář. Pokud by obsah šlo sdílet jako samostatnou věc, patří do <article>.

<section>

Tematická sekce stránky nebo článku. Používá se pro logické rozdělení obsahu na části. Každá sekce by měla mít nadpis. Na rozdíl od <article> sekce nedává smysl sama o sobě – je to část většího celku.

<aside>

Obsah, který doplňuje hlavní text, ale není jeho součástí – postranní panel, poznámka, související odkazy nebo reklama. VoiceOver ho označí jako doplňkový obsah.

<footer>

Zápatí stránky nebo sekce. Obvykle obsahuje copyright, kontaktní údaje nebo odkazy na podmínky použití. Stejně jako <header> může být na stránce víckrát.

<figure> a <figcaption>

Tag <figure> obaluje samostatný vizuální obsah – obrázek, graf nebo ukázku kódu. Tag <figcaption> uvnitř přidává popisek. Prohlížeč i VoiceOver pak ví, že popisek patří k obrázku.

<figure>
			  <img src="diagram.png" alt="Diagram struktury HTML stránky">
			  <figcaption>Základní struktura HTML dokumentu.</figcaption>
			</figure>

<time>

Označuje datum nebo čas. Atribut datetime obsahuje strojově čitelný formát, zatímco obsah tagu může být libovolný lidský text.

<time datetime="2025-09-01">1. září 2025</time>

Kdy použít div a kdy sémantický tag?

Tag <div> má stále své místo – používá se jako neutrální obal pro skupinu prvků, které potřebuješ nastylovat v CSS, ale nemají žádný sémantický význam. Jakmile ale skupině prvků lze přiřadit sémantiku – je to navigace, článek, sekce – použij příslušný sémantický tag.

Jednoduché pravidlo: ptej se „Co tento obsah je?“ Pokud odpovíš „navigace“, napiš <nav>. Pokud odpovíš „jen obal pro styly“, napiš <div>.

Tip od Zdeňka

Zdeněk radí: Sémantické tagy jsou pro mě jako nevidomého uživatele doslova záchrana. S VoiceOverem mohu stisknout klávesu a přeskakovat přímo mezi nadpisy, navigacemi nebo oblastmi stránky – ale jen tehdy, když autor stránky použil správné tagy. Každý <nav>, <main> a <article> na správném místě je dárek každému, kdo stránku čte bez obrazovky. Piš kód tak, jak bys chtěl, aby vypadaly stránky, které ty sám čteš.