Sémantika v HTML5: význam a využití v praxi

Proč sémantika v HTML5 záleží

HTML5 rozšířilo jazyk o sémantické značky, které zpřesňují význam obsahu a zlepšují přístupnost, SEO i udržovatelnost kódu. Správně zvolený element pomáhá čtečkám obrazovky, vyhledávačům, nástrojům pro indexaci a vývojářům porozumět struktuře stránky bez nutnosti heuristik založených na třídách nebo stylech. Tento článek shrnuje moderní sémantické značky, jejich použití, časté anti-patterny a doporučení pro praxi.

Zásady sémantického značkování

Význam před vzhledem: volbu elementu řídí význam obsahu, nikoli vizuální prezentace (tu řeší CSS).
Jeden účel – jeden element: pokud existuje adekvátní sémantický element, využijte jej místo generického <div> nebo <span>.
Správná hierarchie: hlavičky <h1–h6> reprezentují logickou strukturu obsahu; nemají sloužit k vizuálnímu formátování.
Landmark role: prvky jako <header>, <nav>, <main> apod. tvoří orientační body pro asistivní technologie.
Progressive enhancement: sémantika funguje i bez JavaScriptu; interaktivitu přidávejte postupně.

Strukturální a „landmark“ elementy

<header>: úvodní část stránky nebo sekce (logo, název, navigační prvky). Může se vyskytovat opakovaně (např. uvnitř <article>/<section>).
<nav>: hlavní navigační blok, soubory odkazů mezi sekcemi nebo stránkami. Nepoužívejte pro izolované in-page odkazy jako například „zpět na začátek“.
<main>: jedinečný hlavní obsah dokumentu; v rámci stránky by měl být právě jeden.
<article>: samostatná, nezávislá část obsahu (zpráva, blogový příspěvek, produktová karta).
<section>: tematická sekce s vlastním nadpisem; nepoužívejte jako náhradu za <div> bez nadpisu.
<aside>: doplňkový obsah (postranní panel, poznámky, související odkazy).
<footer>: patička stránky nebo sekce (autorská práva, kontakty, související navigace).

Textová sémantika a mikro-značky

<strong> a <em>: sémantické zdůraznění (důležitost oproti intonačnímu důrazu); nenahrazujte je pomocnými <b>/<i> pro význam.
<mark>: zvýraznění relevantního textu (například shody ve vyhledávání).
<time>: strojově čitelný čas s atributem datetime ve formátu ISO 8601 pro události, datum publikace apod.
<abbr>: zkratky s atributem title pro jejich plné znění.
<dfn>: první výskyt definovaného termínu.
<cite> a <q>: citace děl a krátké citace přímo v textu; pro delší citace používejte <blockquote>.
<code>, <kbd>, <samp>: fragmenty kódu, vstupy z klávesnice a ukázkové výstupy.
<data>: párování zobrazované hodnoty s machine-readable value (např. identifikátor).

Obrazový a multimediální obsah

<figure> a <figcaption>: samostatné vizuální bloky s popisem (obrázky, diagramy, ukázky kódu). <figcaption> je volitelný, ale doporučený.
<picture>, <source>, <img>: responsivní obrázky a řízení zobrazení (art direction); vždy uvádějte smysluplný atribut alt.
<video> a <audio>: nativní přehrávače; používejte atribut controls, více <source> a pro přístupnost <track kind="captions">.

Interaktivní a „disclosure“ prvky

<details> a <summary>: rozbalitelné sekce bez nutnosti JS (FAQ, technické detaily). Přidejte sémantický nadpis uvnitř <summary>.
<dialog>: modální i nemodální dialogy s atributem open a metodami pro skriptování; pro plnou přístupnost spravujte fokus a aria-labelledby.
<template> a <slot>: stavební kameny Web Components; <template> není vykreslován uživateli, slouží jako vzor pro klonování do DOM.

Formuláře: sémantika a bohaté ovládací prvky

Typy vstupů: email, url, tel, number, date, datetime-local, range, color apod. zajišťují validaci a specializované uživatelské rozhraní.
<label for> a přidružené názvy: každý ovládací prvek by měl být asociován s <label> kvůli přístupnosti.
<fieldset> a <legend>: logické skupiny prvků; zlepšují navigaci a srozumitelnost formulářů.
<datalist>: nápověda pro <input> s možností výběru a volného psaní.
<output>, <meter>, <progress>: výstupy s výpočty, měřeními a průběhy; používejte atributy min, max, value, low, high, optimum.
Autofill a autocomplete: nastavujte atribut autocomplete s konkrétními hodnotami (např. name, email, address-line1).
Validace: HTML5 nabízí atributy required, pattern, min/max, step; pro vlastní chybová hlášení použijte setCustomValidity().

Tabulky: data vs. layout

Sémantika: používejte <caption>, <thead>, <tbody>, <tfoot> a pro hlavičkové buňky <th scope="col|row">.
Přístupnost: u komplexních tabulek označte vazby pomocí atributů headers a id nebo využijte víceúrovňové scope.
Layout: tabulky nepoužívejte k rozvržení stránky; responzivitu řešte pomocí CSS (např. přetečení obsahu, transformace do karet).

Role ARIA a jejich vztah k HTML

Princip „native first“ říká: pokud již existuje nativní prvek odpovídající požadované roli, nepřidávejte ARIA. Při tvorbě vlastních komponent doplňuje ARIA sémantiku, stavy a vztahy.

Účel	Preferovaný HTML prvek	Alternativa s ARIA	Poznámka
Navigace	`<nav>`	`role="navigation"`	Na stránce může být více; odlište je názvem (`aria-label`).
Hlavní obsah	`<main>`	`role="main"`	Jeden prvek na stránce.
Tlačítko	`<button>`	`role="button"` + klávesnicová ovladatelnost	U `<div>` vyžaduje JS obsluhu kláves pro `Space/Enter` a `tabindex`.
Dialog	`<dialog>`	`role="dialog"`	Řiďte fokus a atribut `aria-modal`.

SEO a strukturovaná data

Významové značky usnadňují pochopení obsahu vyhledávači (správná hierarchie nadpisů, <article>, <section>, <figure>).
Strukturovaná data: preferujte JSON-LD umístěný ve <script type="application/ld+json"> pro schémata jako Article, BreadcrumbList, Product apod.
Metadata: <meta name="description">, Open Graph (og:) a Twitter karty pro sdílení.

Mezinárodní prostředí a jazyk

Jazyk dokumentu: nastavte <html lang="cs">; u cizojazyčných úseků použijte atribut lang na příslušném elementu.
Směr textu: u jazyků s pravolevým zápisem použijte dir="rtl"; vyhněte se míchání směrů bez explicitního nastavení.
Formát času a čísel: sémantiku <time> kombinujte s lokalizovaným zobrazením na straně klienta.

Anti-patterny a časté chyby

„Div-soup“: nadměrné používání <div> a <span> tam, kde jsou dostupné sémantické elementy.
Falešné nadpisy: vizuální nadpisy tvořené pouze pomocí CSS; vždy používejte skutečné elementy <h2>…<h6>.
Nesprávné vnoření: např. <header> bez související sekce nebo <main> vnořený do <article>.
Přetěžování rolí: zbytečné ARIA role na nativních elementech, které už obsahují sémantiku.
Obsah bez popisů: chybějící atribut alt u <img> a chybějící <figcaption> u komplikovanějších <figure>.

Přístupnost: praktické zásady

Landmarks: využívejte elementy <header>, <nav>, <main>, <aside> a <footer> pro rychlou navigaci čteček obrazovky.
Fokus a klávesnice: interaktivní prvky musí být dostupné klávesnicí; neuměle nezakazujte outline bez adekvátní náhrady.
Kontrast a význam: rozlišení nesmí být založené pouze na barvě; kombinujte sémantické značky a text.
Stavy a názvy: u vlastních komponent používejte atributy aria-* (např. aria-expanded, aria-controls).

Výkonnost a udržovatelnost

Konzistentní struktura: opakující se komponenty (hlavička, patička, karty) s jasnou sémantikou usnadňují testování.
Menší závislost na JS: prvky <details> a <dialog> zvládají běžné vzory bez potřeby knihoven.
Responzivní obrázky: používání <picture> a atributů srcset/sizes snižuje datovou zátěž a zlepšuje metriky CLS a LCP.

Testování a validace

HTML validátor: ověřuje správnost značek, atributů a vnoření.
Lighthouse/axe: kontrola přístupnosti a osvědčených postupů.
Čtečky obrazovky: praktické testování pomocí VoiceOver, JAWS či NVDA odhalí problémy s navigací a popisy.
Outline audit: zkontrolujte logiku nadpisů a navigačních landmarků (např. jeden <main>, smysluplné <nav aria-label>).