HTML (hypertextový značkovací jazyk)

Co HTML v prohlížeči popisuje

HTML dokument je textový soubor složený ze značek, atributů a obsahu. Značky dávají prohlížeči informaci, že určitá část je nadpis, odstavec, odkaz, obrázek, formulářové pole nebo jiný prvek stránky. Prohlížeč z dokumentu sestaví DOM, tedy strom objektů, se kterým dál pracuje vykreslovací engine, JavaScript i asistivní technologie.

Dobře napsané HTML není jen seznam vizuálních bloků. Semantické prvky jako <main>, <nav>, <article> nebo <button> vyjadřují účel obsahu. Stejný text může na obrazovce vypadat podobně, ale pro čtečku obrazovky, vyhledávač nebo automatický test znamená správná značka zásadní rozdíl.

Kde končí HTML a začíná zbytek webu

HTML určuje kostru dokumentu, ne kompletní výslednou zkušenost uživatele. CSS obvykle řeší barvy, rozvržení a responzivní chování. JavaScript přidává interakce, validace, dynamické načítání dat nebo práci se stavem aplikace. Server může HTML poslat hotové, vygenerovat ho až při požadavku nebo nechat velkou část skládání na klientovi, například u přístupů popisovaných jako Server-side rendering.

Oddělení rolí není absolutní. HTML obsahuje atributy ovlivňující chování, například required u formuláře nebo loading="lazy" u obrázku. Přesto platí, že HTML má být čitelné i bez stylů a skriptů, protože právě základní struktura rozhoduje o robustnosti stránky.

Značky, atributy a semantika

HTML značka obvykle ohraničuje obsah, například <p>Text</p>. Atribut doplňuje vlastnost prvku, například adresu odkazu, alternativní text obrázku nebo typ vstupního pole. Některé prvky jsou prázdné a žádný vnitřní obsah nemají, typicky <img> nebo <input>.

Semantika pomáhá hlavně tam, kde stránku nečte člověk vizuálně. Vyhledávač lépe rozpozná hierarchii nadpisů, asistenční technologie nabídne uživateli navigaci po oblastech a prohlížeč může automaticky doplnit klávesové ovládání u nativních prvků.

Příklady z praxe

Objednávkový formulář v e-shopu

E-shop potřebuje získat e-mail zákazníka a zabránit odeslání prázdné hodnoty. Vývojář použije nativní typ pole a atribut required, takže prohlížeč poskytne základní validaci ještě před odesláním na server. Serverová kontrola tím nezmizí, ale uživatel dostane rychlejší zpětnou vazbu.

<form action="/objednavka" method="post">
  <label for="email">E-mail</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Odeslat objednávku</button>
</form>

Článek s jasnou strukturou pro čtenáře i roboty

Redakční web publikuje návod a potřebuje, aby byl srozumitelný v prohlížeči, RSS čtečce i výsledcích vyhledávání. Autor použije <article>, správnou hierarchii nadpisů a stručný popis stránky. Kvalitní struktura podporuje orientaci uživatele i prvky jako Meta description.

<article>
  <h2>Instalace aplikace</h2>
  <p>Stáhněte balíček a spusťte instalační průvodce.</p>
</article>

Dopad HTML na přístupnost a SEO

HTML má přímý vliv na to, jestli stránku dokáže používat člověk s klávesnicí, čtečkou obrazovky nebo slabším zařízením. Odkaz vytvořený jako skutečný <a> se chová jinak než klikací <div>. Podobně tlačítko <button> přináší očekávané ovládání bez ručního doprogramování.

Vyhledávače hodnotí hlavně obsah a odkazy, ale HTML jim dává kontext. Pořadí nadpisů, popisky obrázků, kanonické odkazy, strukturovaná data a sémantické oblasti zvyšují šanci, že robot stránku správně pochopí. Stejné principy často prospívají i přístupnosti, protože čistá struktura pomáhá lidem i strojům.