Nadpisy (H1–H6) – Sémantika a správná struktura

Tento článek se zaměřuje na téma nadpisů v HTML (H1-H6) a sémantiky HTML dokumentu.

Nadpisy jsou struktura webové stránky definovaná pomocí HTML elementů <h1> až <h6>. Slouží k hierarchickému uspořádání obsahu, zlepšují čitelnost, přístupnost i SEO. Nadpisy udávají vyhledávačům i čtečkám obsahu, jak je stránka logicky členěna.

Správné používání nadpisů patří mezi základní principy webové sémantiky.

Úrovně nadpisů (H1–H6)

HTML definice obsahuje šest úrovní:

H1 – hlavní nadpis stránky
H2 – hlavní sekce (podnadpisy H1)
H3 – podsekce H2
H4 – podsekce H3
H5 – podsekce H4
H6 – nejnižší úroveň struktury

Čím vyšší číslo, tím menší význam a hlouběji v hierarchii se nachází. V běžné praxi se používají hlavně úrovně H1 – H3.

Princip hierarchie nadpisů

Struktura nadpisů funguje podobně jako obsah knihy:

H1: Název knihy
    H2: Kapitola 1
        H3: Podkapitola 1.1
        H3: Podkapitola 1.2
    H2: Kapitola 2

Nadpisy by měly následovat logickou hierarchii – nepřeskakovat úrovně bez důvodu (např. z H1 rovnou na H4), protože to narušuje sémantiku.

H1 — hlavní nadpis stránky

Charakteristika:

může být jen jeden
reprezentuje hlavní téma stránky
často se používá jako hlavní „title“ obsahu

Typické příklady:

Název článku
Název produktu
Titulek kategorie

K čemu nadpisy slouží

1) Sémantika

Udávají význam a strukturu obsahu.
Čtečky pro nevidomé podle nadpisů určují pořadí a navigaci.

2) SEO

nadpisy pomáhají vyhledávačům pochopit témata stránky
H1 a H2 mají největší váhu
klíčová slova v nadpisech jsou pozitivní signál

3) UX a přehlednost

rozdělují obsah do čitelných bloků
umožňují rychlé skenování stránky
podporují lepší uživatelský zážitek

4) Navigace

Nadpisy se používají k automatickému generování:

obsahových boxů (Table of Contents)
kotvicích odkazů
náhledů článků

Časté chyby při používání nadpisů

❌ více H1 na jedné stránce (kromě výjimek typu HTML5 section – ale i tam se nedoporučuje)
❌ použití nadpisů čistě pro zvětšení textu
❌ přeskakování úrovní („H2 → H4 → H2“)
❌ použití nadpisů v šablonách jen kvůli designu
❌ příliš dlouhé nadpisy bez klíčového slova
❌ chybějící H1 (často kvůli špatné šabloně nebo vizuálnímu editoru)

Jak má vypadat správná struktura nadpisů

Příklad ideálně strukturovaného článku:

H1: Jak vybrat ideální pračku pro vaši domácnost
    H2: Co je potřeba zvážit před nákupem
        H3: Kapacita bubnu
        H3: Energetická třída a spotřeba
        H3: Prostor a způsob umístění (volně stojící vs. vestavná)
    H2: Typy praček
        H3: Předem plněné
        H3: Vrchem plněné
        H3: Slim pračky do malých prostor
    H2: Klíčové funkce a technologie
        H3: Programy praní
        H3: Smart funkce a ovládání přes aplikaci
        H3: Hlučnost a vibrace
    H2: Doporučení a první kroky po koupi
        H3: Správná instalace
        H3: První spuštění
        H3: Údržba a čištění

Taková struktura je přehledná, logická a sémanticky správná.

Nadpisy a vizuální editory

Moderní editory (WordPress Gutenberg, Bricks Builder, Elementor, Divi):

umožňují nastavit úroveň nadpisu nezávisle na stylu
vizuálně mohou vypadat stejně, ale sémanticky jsou odlišné

❗ Vždy je důležité správně zvolit úroveň nadpisu, ne jeho grafickou velikost.

Nadpisy a přístupnost (a11y)

Správně nastavené nadpisy pomáhají:

lidem používajícím screen readery
uživatelům se zrakovým postižením
navigaci „skip to section“
klávesové navigaci

Stránka bez nadpisů nebo s nesprávnou hierarchií je pro tyto uživatele obtížně použitelná.

Shrnutí

Nadpisy (H1–H6) jsou základním prvkem webové sémantiky. Zlepšují strukturu obsahu, přístupnost, SEO a celkovou použitelnost. Jejich správné používání je klíčové.

Nadpisy