Struktura HTML pro SEO i AI: jak používat H1–H6 a sémantické značky čitelné pro stroje

HTML struktura je něco jako kostra vašeho webu. Když je správně postavená, lidé na něm najdou, co potřebují, vyhledávače pochopí, o čem píšete, a AI nástroje jako ChatGPT nebo Perplexity dokážou váš obsah přesně citovat. Když je špatně, váš text vypadá hezky, ale stroje z něj nedokážou vytáhnout to podstatné. V tomto článku si vysvětlíme, co znamenají sémantické HTML značky, jak správně používat nadpisy H1–H6 a proč je tohle všechno v éře AI vyhledávání důležitější než kdy dřív.

Co je to sémantické HTML jednoduše vysvětleno

Představte si, že píšete dopis. Můžete ho napsat jako jeden velký blok textu od kraje ke kraji. Nebo ho můžete rozdělit – nahoře je adresa, pak oslovení, pak hlavní text rozdělený do odstavců, na konci pozdrav a podpis. Druhá verze říká příjemci jasně: „Tohle je adresa. Tohle je oslovení. Tohle je samotný obsah.“

Přesně to dělá sémantické HTML. Místo aby celý web byl jeden velký blok obalený v anonymních značkách <div>, používáte konkrétní značky, které říkají co daný úsek obsahu znamená:

• <header> – tohle je hlavička stránky
• <nav> – tohle je navigace
• <main> – tohle je hlavní obsah
• <article> – tohle je samostatný článek
• <footer> – tohle je patička

Důležité: Sémantické značky nemění vzhled stránky – ten řídí CSS. Mění význam pro stroje. Pro člověka vypadá <div class="header"> a <header> v prohlížeči stejně. Pro Google, screen reader nevidomého uživatele a AI nástroj je to ale rozdíl jako den a noc.

Hierarchie nadpisů H1–H6: srdce každé stránky

Nadpisy nejsou jen způsob, jak udělat text větší a tučnější. Tvoří logickou osnovu celé stránky. Stejně jako u knihy: máte název, kapitoly, podkapitoly. V HTML to funguje úplně stejně.

H1 – hlavní nadpis stránky

Jeden na stránku. Říká: „Tohle je hlavní téma téhle stránky.“ U článku je to titulek. U produktu název produktu. U domovské stránky obvykle hlavní hodnota firmy.

H2 – hlavní sekce obsahu

Hlavní kapitoly. Dělí stránku na logické bloky. Každý H2 by měl pokrývat samostatné téma nebo otázku, kterou na stránce zodpovídáte.

H3 – podsekce v rámci H2

Když potřebujete H2 sekci dál rozdělit. Například pokud máte H2 „Cenové balíčky“, podsekce H3 mohou být „Basic“, „Standard“, „Premium“.

H4–H6 – hlubší vnoření

Používejte jen tehdy, když opravdu potřebujete. Většině obsahu stačí H1 + H2 + případně H3. H4–H6 mají smysl spíš u rozsáhlé technické dokumentace.

Pravidla správné hierarchie nadpisů

• Jeden H1 na stránku. Google sice už toleruje víc H1, ale pro AI nástroje a screen readery je jeden hlavní nadpis stále nejjasnější signál.
• Nepřeskakujte úrovně. Po H2 následuje H3, ne rovnou H4. Stejně jako v knize neskočíte z kapitoly 1 na podkapitolu 1.1.1.
• Nadpisy popisují obsah, který následuje. Ne styl. „Naše služby“ je dobrý nadpis. „Více informací“ nebo „Zjistěte více“ jsou špatné nadpisy.
• Nepoužívejte nadpisy pro stylování. Pokud chcete větší písmo na obyčejném textu, použijte CSS, ne H2. Nadpis je struktura, ne dekorace.
• Buďte konkrétní. „Jak vybrat WordPress hosting“ je lepší než „Hosting“. Konkrétní nadpisy fungují lépe v Googlu i v AI odpovědích.

Špatná vs. dobrá struktura: praktický příklad

Špatně (nesémantické, tzv. „div soup“)

<div class="top">
  <div class="logo">Naše firma</div>
  <div class="menu">...</div>
</div>
<div class="content">
  <div class="title">Naše služby</div>
  <div class="text">Lorem ipsum...</div>
</div>
<div class="bottom">
  <div>© 2026</div>
</div>

Pro člověka v prohlížeči to může vypadat hezky. Pro Google, screen reader i ChatGPT je to ale neproniknutelná houština. Roboti musejí hádat z názvů tříd, co je co. A class jména si mohou vývojáři vymyslet jakkoli – pro stroj je class="title" stejně bezvýznamné jako class="xyz123".

Dobře (sémanticky správně)

<header>
  <h1>Naše firma</h1>
  <nav>...</nav>
</header>
<main>
  <article>
    <h2>Naše služby</h2>
    <p>Lorem ipsum...</p>
  </article>
</main>
<footer>
  <p>© 2026</p>
</footer>

Stejný vzhled, ale stroje teď přesně vědí: tohle je hlavička, tohle je navigace, tohle je hlavní obsah s článkem, tohle je patička. A nadpisy tvoří jasnou hierarchii.

Klíčové sémantické značky a kdy je použít

• <header> – hlavička stránky nebo článku (logo, navigace, titulek)
• <nav> – jakákoliv navigace (hlavní menu, drobečková navigace, postranní menu)
• <main> – hlavní obsah stránky (jeden na stránku, neobsahuje header/nav/footer)
• <article> – samostatný kus obsahu, který by dával smysl i samostatně (článek, recenze, produkt)
• <section> – tematická sekce uvnitř článku nebo stránky
• <aside> – doplňující obsah (sidebar, související odkazy, autorská bio)
• <footer> – patička stránky nebo článku
• <figure> a <figcaption> – obrázek s popiskem, který k němu patří
• <time> – datum a čas ve strojově čitelném formátu
• <blockquote> – delší citace

Proč na tom v éře AI tolik záleží

U klasického vyhledávání byly nadpisy a struktura důležité hlavně pro Google. V éře AI je situace ještě výraznější. Důvod je technický a stojí za to ho pochopit.

AI nástroje rozsekávají obsah na „chunks“

Když ChatGPT, Claude nebo Perplexity zpracovávají vaši stránku, nečtou ji jako celek. Rozdělují ji na kratší úseky (tzv. chunks) podle struktury. Pak vyhodnocují, který chunk nejlépe odpovídá uživatelovu dotazu, a ten citují v odpovědi.

Hádejte, podle čeho ten obsah dělí. Podle nadpisů a sémantických značek. Když máte stránku jasně rozdělenou na H2 sekce, kde každá zodpovídá jednu otázku, AI ji dokáže přesně vytáhnout. Když máte jeden velký blok textu bez struktury, AI buď vezme něco náhodného, nebo vás přeskočí úplně.

Studie potvrzují vyšší přesnost

Případové studie z roku 2025 ukázaly, že vyčištění nekonzistentních úrovní nadpisů a zavedení sémantického HTML zvýšilo přesnost vyhledávání AI systémů ze 71 % na 84 %. To je výrazný rozdíl mezi „vás občas cituji“ a „vás citují konzistentně“.

Každý H2 je „answer unit“

Při psaní obsahu pro AI éru je užitečné dívat se na každý H2 jako na samostatnou odpověď na konkrétní otázku. Pokud čtenář (nebo AI) hledá odpověď na „Jak udělat X“, je ideální mít H2 přímo „Jak udělat X“ a pod ním jasnou, čitelnou odpověď.

HTML struktura ve WordPressu

Dobrá zpráva je, že WordPress (zejména s Gutenberg editorem) k sémantické struktuře tlačí přirozeně. Špatná zpráva: hodně šablon a stránkových builderů to kazí.

Co Gutenberg dělá za vás

• Bloky Nadpis automaticky generují H1–H6
• Bloky Odstavec generují <p>
• Bloky Seznam generují <ul> nebo <ol>
• Bloky Citace generují <blockquote>

Co kontrolovat v šabloně

• Generuje šablona <header>, <main>, <footer>? Moderní šablony ano, starší a custom builder šablony často ne.
• Není v šabloně víc H1? Někdy je H1 v hlavičce u loga a další H1 u titulku článku. To je problém.
• Používají se HTML5 značky, nebo všude jen <div>? Otevřete si stránku v prohlížeči, pravým tlačítkem „Zobrazit zdrojový kód“ a podívejte se.

Pozor na page buildery

Některé starší stránkové buildery (Visual Composer, starší verze Elementor Free) generují kódy plné <div> a téměř bez sémantiky. Moderní verze (Elementor 3.x, Bricks, Breakdance, Gutenberg) jsou na tom výrazně lépe. Pokud uvažujete o builderu, otestujte si výstupní HTML před nákupem.

Jak svou strukturu otestovat

• Headings Map (rozšíření Chrome/Firefox) – ukáže celou hierarchii nadpisů na stránce a vypíše chyby (víc H1, přeskočené úrovně)
• WAVE (wave.webaim.org) – komplexní validátor přístupnosti, který také kontroluje strukturu
• Lighthouse (vestavěný v Chrome DevTools) – součástí auditů přístupnosti je i kontrola sémantiky
• HTML5 Outliner – ukáže, jak prohlížeč interpretuje strukturu vaší stránky
• Test v ChatGPT/Claude – nejlepší praktický test. Vložte URL své stránky do AI nástroje a zeptejte se otázek, na které stránka odpovídá. Pokud AI odpovídá přesně a cituje správné sekce, struktura funguje.

Časté chyby

• Nadpisy jako vizuální prvek. „Tady chci větší písmo, dám tam H3.“ Špatně. Pro velikost je CSS, pro strukturu nadpis.
• Více H1 na stránce. Často omylem – jeden H1 v logu šablony, druhý v titulku článku. Vede k nejasnému signálu o hlavním tématu.
• Přeskakování úrovní. Z H2 rovnou na H4 bez H3. Pro AI to znamená rozbitou hierarchii.
• Vágní nadpisy. „Více informací“, „Zjistěte víc“, „O tom dál“. AI ani lidé z toho nepoznají, o čem sekce je.
• Stejné nadpisy na různých sekcích. Pět H2 s textem „Naše výhody“ na jedné stránce mate jak lidi, tak stroje.
• Tlačítka jako nadpisy. „Kontaktujte nás“ jako H2 je nesmysl. Nadpis popisuje sekci obsahu, ne akci.
• Web bez <main>. AI a screen readery hledají hlavní obsah – bez <main> musejí hádat.
• Navigace bez <nav>. Pokud máte menu jen v <div>, AI nepozná, že jde o navigaci, a může ho započítat do hlavního obsahu.

Proč na tom v éře AI tolik záleží: shrnutí

Sémantická HTML struktura je jeden z mála prvků, kde se zájmy úplně všech sčítají:

• Lidé snáze skenují obsah a rychleji najdou, co hledají
• Vyhledávače přesněji chápou hierarchii a relevanci
• AI nástroje dokážou citovat správné pasáže s vyšší přesností
• Nevidomí uživatelé mohou web s screen readerem normálně používat
• Vy máte web, který je obsahově dobře udržovatelný

Investice do sémantické struktury je trvalá – nezastará jako klíčová slova, neztratí na hodnotě jako trendy v designu. Solidní HTML struktura postavená dnes bude fungovat i za pět nebo deset let.

Závěr

Sémantické HTML a hierarchie nadpisů nejsou žádná raketová věda. Stačí dodržovat několik pravidel: jeden H1, logická posloupnost H2 a H3, popisné názvy nadpisů, sémantické značky místo všudypřítomných divů a nadpisy používané pro strukturu, ne pro vzhled.

Když na svém WordPress webu začnete každou stránku stavět tak, že H2 nadpisy odpovídají na konkrétní otázky uživatelů a každá sekce je samostatně srozumitelná, vyhrajete dvakrát: lidé na vás zůstanou déle a AI nástroje vás budou citovat přesněji.

Zlaté pravidlo na závěr: pokud je vaše stránka snadno čitelná pro člověka, který ji jen rychle skenuje, je čitelná i pro AI. Struktura je most mezi lidským a strojovým porozuměním.