Nadpisová struktura (heading structure)

Příklady z praxe

1. 01

   Přeskočená úroveň v článku

   Autor v redakčním systému zvolil pro mezititulek styl s menším písmem, čímž vznikl h4 přímo pod h2. Validátor i audit přístupnosti to označí jako přeskočenou úroveň. Oprava je čistě sémantická: změnit úroveň na h3 a rozdíl ve velikosti písma vyřešit v CSS.

   <!-- špatně -->
   <h2>Doprava a platba</h2>
   <h4>Osobní odběr</h4>
   
   <!-- správně -->
   <h2>Doprava a platba</h2>
   <h3>Osobní odběr</h3>

2. 02

   Komponenta s nastavitelnou úrovní

   Karta produktu se v React aplikaci objevuje v přehledu i v postranním panelu detailu, kde patří o úroveň hlouběje. Místo natvrdo zapsaného h3 přijímá komponenta úroveň jako prop a nadpis vykreslí dynamicky. Struktura pak zůstane platná v obou kontextech.

   function ProductCard({ title, level = 3 }) {
     const Heading = `h${level}`;
     return (
       <article>
         <Heading>{title}</Heading>
       </article>
     );
   }

Časté omyly

MýtusNa stránce smí být jen jeden h1, jinak přijdou postihy od Googlu.

Ve skutečnostiJeden h1 je doporučená praxe kvůli srozumitelnosti osnovy, ale HTML více nadpisů první úrovně povoluje a vyhledávače za ně netrestají. Skutečné riziko je zmatená hierarchie pro uživatele čteček obrazovky.

MýtusNadpis se vybírá podle toho, jak velké chci písmo.

Ve skutečnostiÚroveň nadpisu vyjadřuje pozici v hierarchii obsahu, vzhled řeší CSS. Volba podle velikosti písma vede k přeskočeným úrovním a nepoužitelné osnově pro asistivní technologie.

MýtusKlíčová slova v nadpisech přímo zvedají pozici ve vyhledávání.

Ve skutečnostiNadpisy pomáhají vyhledávači porozumět struktuře a tématu sekce, ale nejsou samostatným faktorem pořadí. Přeplnění klíčovými slovy zhoršuje čitelnost a nepřinese žádný měřitelný zisk.

Časté dotazy

Vadí, když stránka začíná h2 místo h1?

Nadpisová struktura bez h1 není chybou podle validátoru HTML, ale připravuje uživatele o jasné pojmenování hlavního tématu stránky. Čtečka obrazovky pak nemá kotvu, od které se hierarchie odvíjí, a vyhledávač si musí téma odvodit z titulku dokumentu nebo z obsahu. Praktické doporučení zní začít jedním h1, který odpovídá tomu, o čem stránka skutečně je, a teprve pod ním používat h2 pro jednotlivé sekce. Výjimkou bývají fragmenty vkládané do jiných stránek, kde nejvyšší úroveň určuje hostitelský dokument.

Jak rychle zkontroluji nadpisovou strukturu existující stránky?

Nadpisovou strukturu ověříte třemi nezávislými způsoby. Validátor W3C upozorní na hrubé prohřešky ve značkování. Rozšíření prohlížeče pro audit přístupnosti, například nástroje postavené na knihovně axe, zobrazí osnovu a označí přeskočené úrovně. Nejrychlejší je konzole prohlížeče: dotazem na všechny prvky h1 až h6 si vypíšete jejich pořadí i text a hned uvidíte, kde hierarchie skáče. Pro průběžnou kontrolu se stejný test dá zapsat jako automatizovaný krok v CI, aby regrese neproklouzla do produkce.

Můžou být nadpisy skryté, aby nenarušily design?

Skryté nadpisy jsou legitimní technika, pokud zůstanou dostupné asistivním technologiím. Sekce jako navigace, filtry nebo patička často nemají vizuální titulek, ale uživatel čtečky obrazovky ocení, když je v osnově najde pojmenované. Nadpis se proto ponechá v kódu a odsune se mimo viditelnou oblast pomocí CSS třídy typu visually-hidden. Zásadní je nepoužít display none ani visibility hidden, protože ty prvek odstraní i z přístupnostního stromu a nadpis tím ztratí smysl.

Jak řešit úrovně nadpisů v komponentových frameworcích?

V komponentových frameworcích nelze úroveň nadpisu zapsat natvrdo, protože stejná komponenta se objeví v různě hlubokém kontextu. Osvědčují se dva postupy. Prvním je předat úroveň jako vlastnost komponenty a nadpis vykreslit dynamicky. Druhým je kontext, který si pamatuje aktuální hloubku a potomkům ji automaticky zvyšuje o jedna. Druhá varianta je pohodlnější u rozsáhlých stránek, ale hůř se ladí, protože výsledná úroveň není vidět na místě použití. U menších projektů obvykle stačí explicitní vlastnost s rozumnou výchozí hodnotou.

Zdroje

1. HTML Standard(otevře se v novém okně)WHATWG
2. Heading elements(otevře se v novém okně)MDN Web Docs
3. Web Content Accessibility Guidelines (WCAG) 2.2(otevře se v novém okně)W3C, 2023
4. Search Engine Optimization (SEO) Starter Guide(otevře se v novém okně)Google Search Central

Související pojmy

• Featured snippetFeatured snippet je blok ve výsledcích vyhledávání, který zobrazuje úryvek textu z konkrétní stránky jako přímou odpověď na dotaz, spolu s odkazem na zdroj. Google ho sestavuje automaticky z obsahu už zaindexované stránky, obvykle formou odstavce, seznamu, tabulky nebo videa, a umisťuje ho nad běžné organické odkazy.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
• Alfa kanálAlfa kanál je složka obrazových dat, která u pixelu určuje míru neprůhlednosti nebo průhlednosti. Doplňuje barevné kanály, typicky RGB, a umožňuje plynulé okraje, stíny, překryvy, masky i skládání vrstev. Hodnota alfa sama neurčuje barvu, ale říká, jak se barva pixelu promíchá s pozadím.
• Alt atributAlt atribut je atribut HTML značky <img>, který nese textovou alternativu obrázku pro situace, kdy uživatel obrázek nevidí. Čtou ho odečítače obrazovky, zobrazí se při nenačtení souboru a vyhledávače z něj odvozují obsah obrázku. Prázdná hodnota alt="" je platná a znamená, že obrázek je čistě dekorativní.
• Anchor textAnchor text je viditelný, klikatelný text odkazu, tedy obsah mezi značkami <a> a </a>. Vyhledávačům i uživatelům popisuje, co najdou na cílové stránce, a spoluurčuje, na jaké dotazy cílová stránka hodnotí. Kvalitní anchor text je krátký, popisný a čitelný i vytržený ze zbytku věty.
• Animace klíčových snímkůAnimace klíčových snímků je technika, při které animátor zadá hodnoty vlastnosti (polohu, rotaci, barvu, průhlednost) jen v několika vybraných časech a software dopočítá všechny mezilehlé snímky interpolací. Klíčový snímek tedy nese stav v daném okamžiku, křivka mezi klíči určuje rychlost změny a výsledkem je plynulý pohyb bez ručního kreslení každého snímku.