Nadpisy h1–h6

00:00:00

Nadpisy jsou jedním z nejdůležitějších prvků celé stránky. Nejen vizuálně – strukturují obsah pro vyhledávače, odečítače obrazovky i samotné čtenáře. Správně použité nadpisy jsou základem přístupného a dobře organizovaného webu.

Co jsou nadpisy?

HTML nabízí šest úrovní nadpisů, od <h1> po <h6>. Číslo vyjadřuje hierarchii: <h1> je hlavní nadpis celé stránky, <h2> jsou hlavní kapitoly, <h3> jsou podkapitoly kapitol a tak dále.

<h1>Název stránky</h1>
<h2>Hlavní kapitola</h2>
<h3>Podkapitola</h3>
<h4>Oddíl podkapitoly</h4>

Vizuálně jsou nadpisy obvykle větší a tučnější než okolní text – ale toto je jen výchozí styl prohlížeče. Pomocí CSS můžeš nadpisy stylovat libovolně.

Hierarchie a pořadí

Nadpisy musí tvořit logickou hierarchii – jako obsah knihy. Platí přitom několik pravidel:

Na každé stránce by měl být právě jeden <h1> – je to název stránky, ne webu.
Nadpisy nesmí přeskakovat úrovně: po <h2> může následovat <h3>, ale ne rovnou <h4>.
Nadpisy používej pro strukturování obsahu, ne pro vizuální efekt. Chceš tučný text? Použij <strong> nebo CSS. Nepoužívej <h3> jen proto, že se ti líbí jeho velikost.

Správný příklad struktury stránky:

<h1>Průvodce domácím pečením</h1>

<h2>Základní suroviny</h2>
<h3>Mouka</h3>
<h3>Droždí</h3>

<h2>Postup pečení</h2>
<h3>Příprava těsta</h3>
<h3>Kynutí</h3>

Nadpisy a přístupnost

Pro uživatele odečítače obrazovky jsou nadpisy navigační body. VoiceOver umožňuje přecházet mezi nadpisy jediným stiskem klávesy – stejně jako se ve fyzické knize listuje obsahem. Pokud jsou nadpisy na stránce správně hierarchicky řazeny, nevidomý uživatel si může rychle projít strukturu celé stránky a skočit přímo na část, která ho zajímá.

Špatná hierarchie nadpisů – přeskočení úrovní nebo použití nadpisů jen pro vizuální efekt – zkazí navigaci pro každého, kdo stránku poslouchá místo aby ji četl.

Atribut `id` u nadpisů

Přidáním atributu id k nadpisu vytvoříš kotvu, na kterou lze odkazovat z jiných částí stránky nebo z jiných stránek:

<h2 id="kapitola-zaklady">Základy HTML</h2>

<!-- Odkaz na tuto kapitolu -->
<a href="#kapitola-zaklady">Přejít na základy</a>

<!-- Odkaz z jiné stránky -->
<a href="uvod.html#kapitola-zaklady">Přejít na základy</a>

Atribut id se také používá ve spojení s ARIA atributem aria-labelledby pro propojení sekcí s jejich nadpisy.

Tip od Zdeňka