Jan Mikoláš
Slovník pojmů
HTML
HTML je základní vrstva webu: nese obsah a jeho význam. Není programovacím jazykem ani nástrojem pro vzhled, ale bez srozumitelné struktury nemají CSS, JavaScript ani asistivní technologie pevný základ.
Stručná definice
Značky popisují obsah dříve, než jej stránka začne stylovat nebo ovládat.
HTML dokument tvoří elementy a jejich atributy. Nadpis označí h1 až h6, odstavec p, navigaci nav, hlavní obsah main a tlačítko button. Prohlížeč z těchto informací vytvoří dokumentový strom, vykreslí základní podobu a předá sémantiku také vyhledávačům a čtečkám obrazovky.
HTML není synonymum pro celou webovou aplikaci. CSS určuje prezentaci a layout, JavaScript podle potřeby doplňuje interakci. Dobrá stránka ale zůstává čitelná a obslužná i před načtením skriptů: odkaz vede na URL, formulář lze odeslat a tlačítko provádí skutečnou akci, nikoli pouze vizuálně napodobuje odkaz.
K čemu se používá
Obsah, navigace, formuláře a sémantika webového rozhraní
HTML je společný základ marketingového webu, e-shopu, administrace i dokumentace API.
- struktura článku, nadpisů, seznamů, obrázků a odkazů na firemním webu
- produktový detail, cena, dostupnost, varianty a objednávkový formulář e-shopu
- navigace, hlavní obsah, zápatí a orientační body pro čtečky obrazovky
- formulářové prvky s popisky, nápovědou a srozumitelnými chybami
- serverem renderovaný základ aplikace, který CSS a JavaScript dále rozšiřují
Praktický příklad
Produktový detail s použitím odpovídajících elementů
Nadpis produktu je nadpis, cena je součást obsahu a nákupní akce používá tlačítko uvnitř formuláře. Kód nepoužívá obecné div pro všechno jen proto, aby se rychleji styloval. CSS může vzhled změnit bez toho, aby se změnil význam pro uživatele klávesnice nebo čtečky obrazovky.
Atribut alt má popsat význam obrázku v daném kontextu. U čistě dekorativního obrázku může být prázdný, ale název produktu ani informace z grafu se nemají ztratit jen proto, že jsou zobrazené vizuálně.
HTML
<article>
<h1>Trekingový batoh 30 l</h1>
<p><strong>2 490 Kč</strong></p>
<form action="/kosik" method="post">
<button type="submit">Přidat do košíku</button>
</form>
</article>Jak funguje
Od značek ve zdrojovém kódu k obsahu v prohlížeči
HTML definuje strukturu, na kterou navazují prohlížeč, CSS, JavaScript i asistivní technologie.
- Server vrátí dokument HTTP response nese HTML s informací o obsahu, odkazech, formulářích a připojených zdrojích.
- Prohlížeč dokument parsuje Z elementů vytvoří DOM, tedy strom objektů, nad kterým pak pracuje vykreslování i JavaScript.
- Vznikne sémantická struktura Nadpisy, landmarky, labely a nativní ovládací prvky předávají význam mimo čistě vizuální podobu.
- CSS určí prezentaci Selektory a pravidla upraví rozvržení, typografii a responzivitu, ale nemění význam tlačítka na odkaz.
- JavaScript doplní chování Skript může zlepšit interakci, nesmí však bez promyšlení odstranit základní navigaci, focus a chování formuláře.
Důležité pojmy a synonyma
HTML je značkování obsahu, ne dekorace z divů.
Synonymum „markup“ vystihuje, že značky přidávají obsahu význam a strukturu.
Sémantické elementy
main, nav, header, footer, article, section, button nebo form říkají, jakou roli část stránky plní. Obecný div je vhodný pro neutrální seskupení, ne jako náhrada všech elementů.
DOM
Document Object Model je strom dokumentu, který prohlížeč vytvoří z HTML. JavaScript jej může měnit, ale změna musí zachovat smysluplnou strukturu a focus.
Odkaz a tlačítko
Odkaz naviguje na jiné URL. Tlačítko spouští akci v aktuálním rozhraní, například odeslání formuláře nebo otevření dialogu.
Formulář a label
Nativní input, select, textarea a label dávají prohlížeči známé chování, validaci a ovládání klávesnicí.
ARIA
ARIA doplňuje sémantiku v případech, kdy ji HTML nemá. Nemá přepisovat správně použitý nativní element ani maskovat špatnou strukturu.
Vztah k ostatním vrstvám
HTML nese význam, ostatní vrstvy jej rozvíjejí.
Záměna odpovědností vede k webu, který funguje jen myší, konkrétním stylem nebo po načtení skriptu.
- CSS
- Mění prezentaci dokumentu přes pravidla a cascade. Nemá určovat, zda je akce odkazem či tlačítkem.
- JavaScript
- Přidává chování a může měnit DOM. Neměl by z nativního ovládání udělat nedostupnou imitaci.
- HTTP a URL
- Dávají dokumentu adresu, způsob přenosu a přirozené fungování navigace bez závislosti na JavaScriptu.
- XSS a CSP
- Bezpečnostní vrstvy chrání před nečekaným spuštěním či vložením obsahu. Sémantické HTML je nenahrazuje.
Výhody a omezení
Nativní elementy dávají dobrý základ, ne hotové celé rozhraní.
Přínosy
- obsah je dostupný a čitelný i před spuštěním JavaScriptu
- prohlížeče a asistivní technologie znají chování formulářů, odkazů a nadpisů
- jasná struktura pomáhá údržbě, SEO i automatizovanému testování
- CSS lze měnit bez ztráty významu dokumentu
Rizika a časté chyby
- klikací div místo buttonu nebo odkazu bez klávesového chování
- přeskakování úrovní nadpisů jen kvůli velikosti písma
- obrázek bez smysluplné textové alternativy nebo informační text vložený jen do obrázku
- vkládání nedůvěryhodného HTML bez escapování a sanitizace
- rozhraní, jehož základní navigace či formulář funguje pouze po načtení skriptu
Kdy je nejdůležitější
Vždy, když má uživatel obsah pochopit nebo provést akci.
Sémantické HTML má hodnotu na jednoduché landing page i ve složité administraci. U e-shopu ovlivňuje cestu k produktu, filtr, košík, přístupnost objednávky i to, zda odkazy fungují při otevření v novém panelu. JavaScriptový frontend stále doručuje výsledné rozhraní do prohlížeče a potřebuje stejné elementy a jejich význam.
Vlastní komponenta dává smysl, když nativní HTML nestačí. Pak je nutné převzít i jeho odpovědnost: klávesové ovládání, focus, stav, pojmenování pro čtečku a chování při chybě. Výchozí volbou má být nativní prvek, dokud není důvod jej nahradit.
Na co myslet
Nejdřív význam a funkce, potom vzhled a rozšíření.
Kvalitní HTML je konkrétní, čitelné a testované i mimo běžnou kombinaci myši a širokého displeje.
- používat jeden srozumitelný hlavní nadpis a logickou hierarchii dalších nadpisů
- volit odkaz pro navigaci a button pro akci
- propojit každé formulářové pole s popiskem a chybu vysvětlit textem
- ověřit tabulátor, viditelný focus, čtečku obrazovky a provoz bez JavaScriptu pro základní cestu
- nedůvěryhodný obsah escapovat podle výstupního kontextu a nepouštět jej přímo do HTML
Časté otázky
HTML v praxi
Je HTML programovací jazyk?
Ne. HTML je značkovací jazyk popisující strukturu dokumentu. Programovou logiku a interakce řeší například JavaScript nebo backend aplikace.
Jaký je rozdíl mezi odkazem a tlačítkem?
Odkaz vede na URL, tlačítko provádí akci. Rozdíl ovlivňuje klávesové ovládání, očekávání uživatele i chování prohlížeče.
Kdy potřebuji ARIA?
Až když nativní HTML nevystihuje potřebnou informaci. Správně zvolený button, input nebo nav má potřebnou sémantiku už v sobě.
Stačí přístupnost řešit v CSS?
Ne. Kontrast a focus jsou důležité, ale základ tvoří správná HTML struktura, nativní ovládání, textové popisky a funkční navigace.
Jak stavím webové rozhraní v praxi
Frontend navrhuji od sémantické a funkční základní vrstvy.
V e-commerce a aplikačních rozhraních propojuji HTML, CSS a JavaScript s API tak, aby zůstaly použitelné, čitelné a udržovatelné.