HTML5 sémantika

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, ne vizuální prezentace (tu řeší CSS).
• Jeden účel – jeden element: pokud existuje adekvátní sémantický element, použijte jej místo generického <div> nebo <span>.
• Správná hierarchie: hlavičky <h1–h6> reprezentují logickou strukturu obsahu; nemají být používány k vizuálnímu formátování.
• Landmark role: prvky jako <header>, <nav>, <main> atd. 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>: úvod části nebo stránky (logo, název, navigační prvky). Může se vyskytovat vícekrát (v rámci <article>/<section>).
• <nav>: hlavní navigace, soubory odkazů mezi sekcemi nebo stránkami. Nepoužívejte pro izolované in-page odkazy typu „zpět na začátek“.
• <main>: jedinečný hlavní obsah dokumentu; na stránce má být přesně jednou.
• <article>: samostatná, na sobě nezávislá část obsahu (zpráva, příspěvek na blogu, karta produktu).
• <section>: tematická sekce s vlastním nadpisem; nepoužívat 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 vs. intonační důraz); nenahrazujte je <b>/<i> pro význam.
• <mark>: zvýraznění relevantního textu (např. shody vyhledávání).
• <time>: strojově čitelný čas s atributem datetime (ISO 8601) pro události, datum publikace apod.
• <abbr>: zkratky s atributem title pro plné znění.
• <dfn>: první výskyt definovaného termínu.
• <cite> a <q>: citace děl a krátké citace v textu; pro delší citace použijte <blockquote>.
• <code>, <kbd>, <samp>: fragmenty kódu, vstupy z klávesnice a ukázkové výstupy.
• <data>: párování zobrazované hodnoty s strojovým 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>: responzivní obrázky a art-direction; vždy uvádějte smysluplný atribut alt.
• <video> a <audio>: nativní přehrávání; používejte controls, více <source> a pro přístupnost <track kind="captions">.

Interaktivní a „disclosure“ prvky

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

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

• Typy vstupů: email, url, tel, number, date, datetime-local, range, color atd. zajišťují validaci a specializované UI.
• <label for> a přidružené názvy: každý ovládací prvek má být spojen s <label> kvůli přístupnosti.
• <fieldset> a <legend>: logické skupiny; zlepšují navigaci a čitelnost formulářů.
• <datalist>: nápověda pro <input> s možností výběru a volného psaní.
• <output>, <meter>, <progress>: výstup výpočtů, míry a průběhu; používejte atributy min, max, value, low, high, optimum.
• Autofill a autocomplete: nastavujte autocomplete s konkrétními hodnotami (např. name, email, address-line1).
• Validace: HTML5 poskytuje atributy required, pattern, min/max, step; pro custom zprávy 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: komplexní tabulky označte atributy headers a id nebo víceúrovňové scope.
• Layout: tabulky nepoužívejte pro rozvržení; responzivitu řešte CSS (např. přetečení, transformace do karet).

Role ARIA a jejich vztah k HTML

Princip „native first“: pokud nativní prvek již odpovídá potřebné roli, nepřidávejte ARIA. Když tvoříte vlastní komponenty, ARIA doplní sémantiku, stavy a vztahy.

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 ve <script type="application/ld+json"> pro schémata Article, BreadcrumbList, Product apod.
• Metadata: <meta name="description">, og: a twitter: karty pro sdílení.

Mezinárodní prostředí a jazyk

• Jazyk dokumentu: nastavte <html lang="cs">; pro cizojazyčné úseky použijte lang na elementu.
• Směr textu: u jazyků RTL použijte dir="rtl"; vyhýbejte se míchání bez explicitního nastavení.
• Formát času a čísel: sémantiku <time> kombinujte s lokalizovaným zobrazením na klientu.

Anti-patterny a časté chyby

• „Div-soup“: všude <div> a <span> i tam, kde existují sémantické prvky.
• Falešné nadpisy: vizuální nadpisy tvořené jen CSS; používejte skutečné <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 prvcích, které už sémantiku mají.
• Obsah bez popisů: chybějící alt u <img> a <figcaption> u komplikovaných figure.

Přístupnost: praktické zásady

• Landmarks: využijte <header>, <nav>, <main>, <aside>, <footer> pro rychlou navigaci čteček.
• Fokus a klávesnice: interaktivní prvky musí být dosažitelné klávesnicí; nepřebarvujte outline bez náhrady.
• Kontrast a význam: odlišení nesmí být jen barvou; používejte také sémantické značky a text.
• Stavy a názvy: u vlastních komponent nastavujte aria-* atributy (např. aria-expanded, aria-controls).

Výkonnost a udržovatelnost

• Konzistentní struktura: opakovatelné komponenty (hlavička, patička, karty) s jasnou sémantikou usnadňují testování.
• Menší závislost na JS: elementy <details> a <dialog> řeší běžné vzory bez knihoven.
• Responzivní obrázky: <picture> a srcset/sizes snižují datovou zátěž a zlepšují CLS/LCP.

Testování a validace

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

Mapování scénářů na sémantické prvky

Verzování a dokumentace sémantiky

• Design systém: pro každou komponentu definujte HTML kostru, ARIA pravidla, varianty stavu a příklady použití.
• Linting: nástroje pro statickou analýzu (HTMLHint, ESLint s pluginy) v CI zajišťují konzistenci.
• Dokumentované kontrakty: popište, které části DOM jsou veřejné (sloty, datové atributy) a které interní.

Budoucí směr a interoperabilita

• Zpřesňování ARIA: nové vzory pro složité komponenty (kombinované seznamy, gridy) a lepší interoperabilita čteček.
• Dialog a form patterns: dokončování standardů kolem modálních interakcí, validace a hlášek.
• Web Components: šíření nativní sémantiky skrz shadow DOM a standardizované role.

Závěr: Praktický check-list sémantiky

• Má dokument jeden <main> a smysluplné landmarky?
• Je hierarchie nadpisů konzistentní a odpovídá obsahu?
• Mají obrázky adekvátní alt a komplexní vizuály <figcaption>?
• Jsou formulářové prvky spárované s <label> a mají správné typy?
• Nepoužíváte ARIA tam, kde stačí nativní HTML?
• Prošli jste validací, a11y auditem a testem s čtečkou?