Textový element
<h1>–<h6>
Nadpisy šesti úrovní. Dávají stránce osnovu, podle které se v ní orientují lidé, screen readery i vyhledávače.
V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.
Zápis
Šest úrovní
Nadpisy jsou párové tagy h1 až h6. Číslo udává úroveň: h1 je nejdůležitější, h6 nejméně důležitý.
Prohlížeč dává každé úrovni jinou výchozí velikost. Velikost ale není to hlavní, důležitá je úroveň.
Osnova
Nadpisy tvoří osnovu
Jeden h1 pro název stránky, pod ním kapitoly h2 a v nich podkapitoly h3. Jako obsah knihy.
Úrovně nepřeskakujte. Po h2 patří h3, ne rovnou h4. Odsazení v ukázce je jen pro názornost, v HTML na něm nezáleží.
Pozor
Úroveň podle významu, ne podle velikosti
Častá chyba: „chci menší nadpis, tak napíšu h4“. Úroveň se vybírá podle místa v osnově. Velikost pak upravíte v CSS.
Atributy
Nadpis jako cíl odkazu
Nadpisy mají jen globální atributy. Nejužitečnější je id: na nadpis pak vede odkaz href="#texty".
Styl
Typografická stupnice
Výchozí velikosti z prohlížeče nahradíme vlastní stupnicí. Nadpisům dáme těsnější řádkování a víc místa nad sebou než pod sebou, aby patřily k textu, který uvádějí.
Styl
Vyvážené řádky
Dlouhý nadpis se může zalomit tak, že na druhém řádku zůstane jedno slovo. text-wrap: balance rozdělí slova do řádků rovnoměrně.
Kapitoly h2 navíc dostaly jemnou čáru, aby byly v osnově vidět na první pohled.
Responzivita
Nadpisy na telefonu
Nadpis o velikosti 2,5rem zabere na telefonu čtyři řádky. S clamp() se velikost přizpůsobí šířce okna, bez media query.
Přepněte náhled na desktop klávesou M: nadpis se vrátí na plnou velikost.
Shrnutí
Jak psát nadpisy
Ano
- jeden
h1na stránce, název stránky - úrovně podle osnovy, bez přeskakování
- velikost v CSS
Ne
- úroveň vybraná podle velikosti
- nadpis jen proto, aby byl text tučný