HTML

Co je to HTML?

HTML neboli HyperText Markup Language je základní značkovací jazyk, který tvoří kostru každé webové stránky na internetu. Představte si HTML jako stavební plán nebo skelet domu – definuje strukturu, obsah a význam jednotlivých prvků na stránce. Důležité je si uvědomit, že HTML není programovací jazyk, ale strukturální značkovací jazyk. To znamená, že neprovádí výpočty ani složitou logiku, ale říká prohlížeči, co je nadpis, co je odstavec, kde je odkaz nebo obrázek.

HTML pracuje s tzv. značkami neboli tagy, které uzavírají jednotlivé části obsahu – například značka pro odstavec, nadpis nebo odkaz. Pro lepší představu: HTML je jako kostra domu, která určuje, kde budou stěny a dveře. CSS pak přidává barvy, velikosti a styl (jako malba a dekorace). JavaScript následně dodává funkcionalitu a interaktivitu (jako elektřina a vodovodní rozvody). Všechny tři technologie spolupracují při tvorbě moderního webu.

HTML vytvořil Tim Berners-Lee v roce 1991 a od té doby prošel značným vývojem. Aktuální verzí je HTML5, oficiálně standardizovaná organizací W3C v roce 2014, která přinesla moderní funkce jako nativní podporu videa, lepší sémantiku a výkonná API pro webové aplikace.

Jak HTML funguje v praxi?

Struktura HTML dokumentu

Každý HTML dokument začíná deklarací DOCTYPE, která prohlížeči sděluje, že jde o HTML5 dokument. Následuje základní trojice značek – značka html obaluje celý dokument, sekce head obsahuje meta informace, které nejsou viditelné na stránce, a sekce body obsahuje veškerý viditelný obsah stránky.

Sekce head je klíčová pro SEO optimalizaci a správné fungování webu. Zde definujete titulek stránky, meta popis, odkazy na CSS styly, kódování znaků, viewport nastavení pro responzivní design a další důležité informace. Sekce body pak obsahuje vše, co návštěvník vidí – texty, obrázky, videa, formuláře, navigace a další prvky. Správná struktura HTML dokumentu zajišťuje, že prohlížeče i vyhledávače webu správně rozumí obsahu a dokážou ho správně zobrazit.

HTML značky (tagy)

HTML používá dva typy značek – párové a nepárové. Párové značky mají otevírací a uzavírací tag, například značka pro odstavec textu nebo pro hlavní nadpis. Obsah je vždy umístěn mezi otevírací a uzavírací značkou. Nepárové značky nepotřebují uzavírací tag, protože nepřidávají obsah – typicky značky pro obrázek, zalomení řádku nebo horizontální čáru.

Atributy značek poskytují dodatečné informace – například značka pro obrázek má atribut src pro cestu k souboru a ALT atribut pro alternativní popisek (důležité pro přístupnost a SEO). Atribut href u odkazu definuje cílovou URL adresu. Správné použití atributů je klíčové pro funkčnost, přístupnost i optimalizaci pro vyhledávače. Více informací o HTML značkách najdete v oficiální dokumentaci MDN Web Docs.

Nejdůležitější HTML elementy

• Nadpisy (H1-H6)

Nadpisy strukturují obsah a vytvářejí hierarchii. HTML nabízí šest úrovní nadpisů od nejdůležitějšího H1 po nejméně důležitý H6. Na každé stránce by měl být právě jeden H1 – je to hlavní nadpis celé stránky, který říká vyhledávačům i uživatelům, o čem stránka je. Podnadpisy H2 rozdělují obsah na hlavní sekce, H3 pak na podsekce v rámci H2 atd. Správná hierarchie nadpisů pomáhá uživatelům orientovat se v obsahu a vyhledávače ji používají k pochopení struktury a důležitosti tématu stránky. Nikdy nevynechávejte úrovně – po H2 nemá přijít hned H4 bez H3.

• Odstavce a text

Element pro odstavec vytváří odstavce textu – základní stavební prvek webového obsahu. Pro zvýraznění textu používáme sémantické značky pro důležitý text (tučně) a pro důraz (kurzíva). Je důležité používat sémantické značky s významem místo čistě vizuálních značek. Moderní HTML preferuje značky, které mají sémantický význam – značka pro důležitý text říká "tento obsah je důležitý", což vyhledávače oceňují. Vyhledávače berou v potaz sémantiku a dávají větší váhu správně označenému obsahu. Pro citace existují speciální značky pro delší i kratší citáty.

• Odkazy a navigace

Odkazy jsou srdcem webu – "HyperText" v HTML odkazuje právě na propojování dokumentů pomocí odkazů. Atribut href určuje cílovou adresu odkazu. Atribut target s hodnotou blank otevře odkaz v novém okně (užitečné pro externí odkazy na jiné weby). Pro navigaci uvnitř stránky používáme kotvy – odkaz může skočit na konkrétní element s definovaným identifikátorem. Kvalitní popisný text odkazu (ne "klikněte zde") je důležitý pro přístupnost i SEO optimalizaci.

• Seznamy

HTML nabízí tři typy seznamů. Nečíslovaný seznam s odrážkami, číslovaný seznam s čísly a definiční seznam pro dvojice termín–definice. Každá položka seznamu má svou vlastní značku. Seznamy zlepšují čitelnost a vyhledávače je oceňují pro strukturovanou prezentaci informací. Seznamy jsou důležité pro uživatelskou zkušenost, protože umožňují rychlé skenování obsahu a lepší orientaci v informacích.

• Obrázky a média

Značka pro obrázky vkládá obrázky s povinnými atributy - cesta k souboru a alternativní popisek pro nevidomé a SEO. Kvalitní ALT text je klíčový pro přístupnost a pomáhá vyhledávačům pochopit obsah obrázku. HTML5 přineslo nativní elementy pro video a audio, což umožňuje přehrávání multimédií bez nutnosti externích pluginů. Moderní element pro adaptivní obrázky umožňuje responzivní obrázky – různé verze pro různé velikosti obrazovek a rozlišení displayů. Atributy šířky a výšky pomáhají prohlížeči rezervovat prostor a eliminovat poskakování stránky při načítání obsahu.

• Formuláře

Formuláře umožňují uživatelům zadávat data – kontaktní formuláře, registrace, vyhledávání. Obsahují vstupní pole různých typů, textové oblasti, výběrová pole a tlačítka. Moderní HTML nabízí speciální typy vstupních polí pro email, telefon, datum a další, které zajišťují automatickou validaci zadaných údajů. Atributy mohou označit povinná pole. Správně vytvořené formuláře s popisky pro každé vstupní pole zlepšují přístupnost a uživatelský zážitek. Pro více informací o tvorbě přístupných formulářů doporučuji prostudovat W3C Web Accessibility Initiative průvodce.

HTML5 – Moderní webová éra

Zatímco starší verze HTML používaly obecné kontejnerové elementy pro všechno, HTML5 přineslo sémantické značky, které dávají struktuře konkrétní význam. Místo generického kontejneru s identifikátorem "hlavicka" teď používáme sémantickou značku pro hlavičku, místo kontejneru "navigace" máme značku pro navigaci. Mezi další sémantické elementy patří značky pro hlavní obsah stránky, samostatný článek nebo příspěvek, tematickou sekci, doplňkový obsah nebo postranní panel, patičku a ilustrace s popisky.

Proč je sémantika důležitá? Za prvé, lepší SEO – vyhledávače lépe chápou strukturu a význam obsahu, když použijete správné sémantické tagy. Za druhé, přístupnost – čtečky obrazovky pro nevidomé používají sémantické značky pro navigaci po stránce. Za třetí, čitelnější kód – vývojář okamžitě vidí, co je navigace, co hlavní obsah, co patička. HTML5 také přineslo nové API pro geolokaci, offline práci, drag and drop, canvas pro grafiku a mnoho dalších moderních funkcí, které umožňují tvořit komplexní webové aplikace. Více informací o sémantických elementech najdete v W3C HTML5 Semantics specifikaci.

HTML a SEO

Správně strukturované HTML je základem úspěšné SEO strategie. Hierarchie nadpisů (H1-H6) pomáhá Googlu pochopit strukturu a klíčová témata stránky. Vždy mějte právě jeden H1 s hlavním klíčovým slovem. Meta tagy v sekci head jsou klíčové – title určuje titulek v SERPs (výsledcích vyhledávání), meta description poskytuje popis zobrazený pod titulkem. Tyto elementy výrazně ovlivňují míru prokliků (CTR) z vyhledávání.

Atribut ALT u obrázků pomáhá nevidomým, ale také umožňuje vyhledávačům "vidět" obsah obrázků. Dobře popsané ALT tagy zvyšují šanci objevit se ve vyhledávání obrázků Google. Sémantické HTML5 tagy jako article, nav, header signalizují vyhledávačům strukturu stránky a usnadňují jejich práci při indexaci. Strukturovaná data (Schema.org) implementovaná pomocí JSON-LD v HTML poskytují Googlu detailní informace o obsahu – recenze, produkty, události, recepty. Validní, čistý HTML kód bez chyb zajišťuje správnou indexaci. Weby s HTML chybami mohou mít problémy se zobrazením ve vyhledávačích. Technické SEO začíná právě kvalitním HTML kódem.

Nejčastější chyby v HTML

Zapomenuté uzavírací značky patří mezi klasiku začátečníků. Nezavřená značka může rozhodit celé zobrazení stránky. Moderní editory jako VS Code naštěstí tuto chybu často zvýrazní a automaticky doplní uzavírací značku. Nevalidní vnořování elementů – například nemůžete vložit blokový element do inline elementu. Chybějící ALT atributy u obrázků zhoršují přístupnost a SEO. Vždy popište, co obrázek zobrazuje, ideálně s relevantním klíčovým slovem pro lepší nalezitelnost.

Více H1 na jedné stránce mate vyhledávače i uživatele – H1 by měl být jeden, jedinečný pro každou stránku. Používání tabulek pro layout je zastaralá praktika z 90. let. Tabulky jsou určeny pro tabulková data (ceníky, statistiky), ne pro rozvržení stránky – k tomu slouží CSS a moderní techniky jako CSS Grid nebo Flexbox. Inline styly místo externího CSS znepřehledňují kód a znesnadňují údržbu. Styly patří do samostatného CSS souboru. Ověřit validitu vašeho HTML kódu můžete pomocí oficiálního W3C Markup Validation Service.

Související pojmy