Nadpis

Nadpisy (H1–H6) určují informační hierarchii stránky. Zlepšují čitelnost, přístupnost i pochopení obsahu vyhledávači.

Co znamená „Nadpis“

Nadpis je značkovací prvek HTML, který vyjadřuje téma sekce obsahu. HTML poskytuje šest úrovní <h1> až <h6>, kde H1 zpravidla označuje hlavní téma stránky a nižší úrovně tvoří logickou hierarchii podtémat. Správné nadpisy pomáhají uživatelům rychle porozumět struktuře textu a technologiím asistivního přístupu (screen readery) v orientaci.

Struktura a typy

  • H1 – název stránky/hlavní téma (obvykle 1× na stránce, i když HTML5 to striktně nevyžaduje).
  • H2 – hlavní kapitoly obsahu.
  • H3–H6 – podkapitoly a jemnější členění.
  • Vizuální ≠ sémantické: vzhled nadpisu řeš CSS, nevol volbu úrovně podle velikosti písma.

Best practices (rychlý checklist)

  • Jedno hlavní téma: jasný H1 odpovídající obsahu a záměru stránky.
  • Nepřeskakuj úrovně (H2 → H3 → H4…); drž logickou hierarchii.
  • Klíčová slova přirozeně – bez přeoptimalizace nebo umělého opakování.
  • Délka: stručně a výstižně (cca do 70–80 znaků u H1/H2, pokud to dává smysl).
  • Přístupnost: nadpis musí dávat smysl i mimo kontext, vyhýbej se „Úvod“, „Další informace“ apod.
  • Styling: používej CSS; neoznačuj nadpisy <div> + velké písmo.

Nejčastější chyby

  1. Více H1 s odlišnými tématy (roztříštěný význam).
  2. Přeskakování úrovní (H2 → H4) a nekonzistentní hierarchie.
  3. Nadpisy tvořené obrázkem bez textové alternativy.
  4. „Keyword stuffing“ v nadpisech na úkor srozumitelnosti.
  5. Použití nadpisu na položky, které nejsou sekcemi (např. tlačítka, dekorativní texty).

Praktický příklad značkování

<main>
  <h1>Jak vybrat správný nadpis na webu</h1>

  <section>
    <h2>Proč na nadpisech záleží</h2>
    <p>Stručné vysvětlení…</p>

    <h3>Orientace uživatele</h3>
    <p>…</p>

    <h3>Přístupnost a SEO</h3>
    <p>…</p>
  </section>

  <section>
    <h2>Nejčastější chyby</h2>
    <ul>
      <li>Přeskakování úrovní…</li>
      <li>Keyword stuffing…</li>
    </ul>
  </section>
</main>

Ukázka dodržuje hierarchii H1 → H2 → H3 a zřetelně rozděluje témata do sekcí.

Jak ověřit kvalitu nadpisů

  • Zobraz si dokument bez CSS: struktura má dávat smysl i „nahá“.
  • Vyzkoušej navigaci po nadpisech v rychlém náhledu (např. v devtools/outline pluginu).
  • Zkontroluj, že každý nadpis uvádí téma následující sekce a není jen stylový prvek.