Proč nadpisy nejsou jen o velikosti písma

K čemu při tvorbě obsahu slouží nadpisy a proč je používat pro velikost a styl textu není dobrá strategie do budoucna. Jak správným využitím vylepšíš svůj obsah a zároveň pozici ve vyhledávačích.

Jakmile si zákazník sám spravuje svůj obsah na webu a má k dispozi pokročilí textový editor, který mu dá k dispozici označit odstavec, jako nadpis, funkci začne okamžite používat.
A také proč ne? Spousta vývojářů rozdíl mezi nadpisy a velikostí písma nevysvětlují a kolikrát ani neví, jak vytvořit systém, který zachová strukturu obsahu a zajistí "nezneužití" nadpisů

Co jsou HTML nadpisy a proč na nich záleží?

Většina lidí je zvyklá vytvářet a upravovat text ve Wordu nebo Pages, kde plynulý text rozdělují nadpisy a nezáleží až tak moc, jaký nadpis použijeme. Jde hlavně o vizuální rozdělení textu.
Proto se nedivím, že i na webu většina lidí nadpisy používají stejně.

Samozřejmě i na webu v konečném důsledku pro čtenáře slouží jako vizuální oddělovač textu, ale ...

Nadpisy na webu slouží především k určení struktury/hierarchie obsahu.

Tato struktura, srozumitelná pro webové prohlížeče a vyhledávače, se definuje v přímo v kódu textu. To je hlavní rozdíl oproti jednoduché editaci textu, např. ve Wordu, a proč nadpisy na webu nejsou jen "různě velký text".

Proč jsou nadpisy víc než jen vzhled?

Tato technická struktura, struktura definovaná přímo v kódu, je naprosto zásadní. Jak jinak má prohlížeč nebo vyhledáváč rozpoznat plynulost textu a co k čemu patří. Nejsou schopni si domyslet, že velký nadpis (,který je velký kvůli vzhledu), není hlavní nadpis dalšího článku, ale ve skutečnosti podnadpis stávajícího.

ŠPATNÝ příklad, o kterém mluvím a který tak často u klientů vidím, vypadá takto:

<h1>Hlavní nadpis článku</h1>
    <h2>Podnadpis článku</h2>
        <h3>Podtéma</h3>
    <h1>Druhý hlavní nadpis, použitý pro grafické zvýraznění nadpisu</h1>
    <h2>Druhý podnadpis</h2>
        <h4>Podtéma</h4>

Tento špatný příklad obsahuje dvě typické chyby:

• použití H1 (hlavního) nadpisy znovu v obsahu textu - H1 smí být na každé podstránce jen jednou a určuje o čem celý článek je.
• použití H4 nadpisu jako podtéma druhého H2 nadpisu.
  Nadpisy v HTML mají pevně definovanou hierarchii, jejíž postup musí být dodržován - H1, H2, H3, H4, H5, H6

Porušením této struktury, si zaděláváš na problémy do budoucna:

• Internetové vyhledávače očekávají tuto hierarchii. Rozdělení článku na hlavní nadpis a podnadpisy přímo v kódu, mu pomáhají rozpoznat o čem celý článek a jeho jednotlívé části, oddělené podnadpisy jsou.
  Hlavní nadpis je jedním z nejdůležitějších prvků dané podstránky optimalizace pro vyhledávače a jeho opakováním vyhledávač jen mateš.
• Čtečky a jiné čtěcí doplňky využívají nadpisy k ulehčení navigace a přeskočení ke konkrétní části textu.
• Představ si, že v budoucnu budeš předělávat tvůj web a chceš k článkům na začátek přídat automaticky generovanou navigaci. Ta také bude využívat strukturu nadpisů a nebude hledět jaký styl si pro daný nadpis použil. Nedodržení struktury od začátku tvorby obsahů bude při takovéhle změně od tebe vyžadovat KAŽDÝ článek projít a opravit.

Jak používat nadpisy správně?

Jak už jsem zmínil pro správné používání nadpisů je vlastně jednoduché a je třeba dodržovat tyto principy:

• H1 nadpis je jen jednou na každé podstránce a říká o čem článek/stránka je. Často tento nadpis v obsahu ani nevytváříš, protože je to název článku, když jsi ho vytvářel.
• podnadpisy se řídí logickou strukturou - H2 podnapis, pak H3, H4 a tak dále. Další podtéma začínáš znovu s H2.

Náš příklad by tedy správně mel vypadat takto

<h1>Hlavní nadpis článku</h1>
    <h2>Podnadpis článku</h2>
        <h3>Podtéma</h3>
    <h2>Druhý hlavní nadpis, použitý pro grafické zvýraznění nadpisu</h2>
    <h2>Druhý podnadpis</h2>
        <h3>Podtéma</h3>

Jak tedy správně udělat, aby nadpis byl velký? 🤷‍♂️

Jednoduchá odpověď - CSS.

HTML, tedy kód stránek, určuje jejich strukturu. CSS jejich vzhled/styl.

Proto já používám a pro své klienty připravuji jednoduché CSS třídy, které upravují vzhled (font, tlouštka/síla textu, kurzíva, apod.) nebo velikost daného textu.

Tyto CSS třídy pak přidávám prvkům stránky, které chci aby vypadali jinak, než je jejich standardní vzhled.

Tak podnadpisy můžou vypadat jako hlavní nadpis, jako menší podnadpisy nebo dokonce jako obyčejný text. Ale nenaruší hierarchii.

Pro stylování mám proto k dispozici CSS třídy jako - .h--1, .h--2, .h--3, atd., které prvek stylují (upravují jeho vhled) a definují velikost textu tak, aby vypadal jako hlavní nadpis nebo podnadpis.

Pro nastavení většího a menšího textu mám pak k dispozici další třídy - o tom zas jindy.
V zásadě jsou ale tyto styly vytvořeny jako .text--l, .text--m, text--s, atd.

Tyto třídy pak jednodušše používám při tvorbě obsahu, např. na obrázku 1 v Gutenberg editoru ve WordPressu.

Pro úplnost v CSS jsou pak tyto styly/třídy připraveny takto (pseudo-kód v CSS):

// Definování základního vzhledu nadpisů
h1, h2, ...,
.h--1, .h--2, ... {
    font-family: // font pro nadpisy
    font-weight: // tlouštka/síla písma
    ...
}

// Třídy pro určení velikosti
h1, .h--1 {font-size: // velikost hlavního nadpisu}
h2, .h--2 {font-size: // velikost podnadpisu}
h3, .h--3 {font-size: // velikost podtémata}
...

Další bonus je, že kdykoliv budeš chtít změnit styl, velikosti písma, upravíš je jen na jednom místě a je hotovo. Což by měla být praxe pro většinu úprav.

Závěr: Dodržování struktury nadpisů je pro úspěšný web klíčové

• Nadpis neznamená, jak je písmo veliké. Určuje strukturu a hierarchii obsahu.
• Tato struktura má výrazný vliv na čitelnost pro uživatele, optimalizaci pro vyhledávače a hlavně je tvůj obsah připravený na budoucí úpravy.
• Pokud chceš, aby nadpis vypadal jinak než jak standardně vypadá, jednoduše nepřepni ho na jinou velikost nadpisu. Použij předpřipravené CSS třídy, které globalně určují velikost a styl písma.

Proto je dúležité správnou hierarchii obsahu dodržovat hned od začátku tvorby webu. Jedině tak se vyhneš časově náročnému procházení a opravě všech článků v budocnu.
A u velkých webu je toto prakticky nemožné.