Nadpisy na webu
Pro značení nadpisů stránek existují značky <h1>
, <h2>
, <h3>
, <h4>
, <h5>
a <h6>
.
Jako jedna z forem pro označení důležitějšího textu existují v HTML nadpisy. Pomáhají vytvářet celou strukturu dokumentu a usnadňují návštěvníkům webu získat rychlý přehled o obsahu stránky. Ne každý čte stránku písmeno po písmenu shora dolů. Netrpělivý návštěvník napřed výrazné prvky stránky (což nadpisy jsou) prolétne očima, aby zjistil, jestli stojí za to obsah vůbec číst.
Z pohledu HTML jsou nadpisy párové elementy s povinnou počáteční i koncovou značkou. Písmeno H
v názvu značky pochází z anglického slova heading – nadpis.
Zápis
Jednotlivé úrovně nadpisů se v zápisu liší jen číslem.
<h1>
Nadpis nejvyšší úrovně
</h1>
<h2>Druhá úroveň</h2>
<h3>Třetí úroveň</h3>
<h4>Nadpis úrovně 4</h4>
<h5>Nadpis úrovně 5</h5>
<h6>Nadpis úrovně 6</h6>
Úrovně nadpisů
Úrovní je sice hned 6, v praxi se ale většinou používají první 3 až 4. Ve výchozím stylu prohlížečů jsou nadpisy blokové (display: block
) a zobrazují se tučné (font-weight: bold
). První tři úrovně (<h1>
až <h3>
) jsou navíc větším písmem než prostý text.
Nadpis <h4>
se potom zobrazuje zpravidla stejně jako běžný tučný text.
Nadpis <h5>
je už menší než prostý text. Dle výchozích stylů velikostně odpovídá obsahu značky <small>
.
Nakonec <h6>
je úplně nejnižší úroveň nadpisu. Je ještě menší než obyčejný text ve značce <small>
. Bez změny výchozího stylu už je skoro nečitelný.
Výchozí styl
Následující tabulka přibližně zachycuje výchozí velikost písma (font-size
) a odsazení (margin
) shora i zdola – odsazení z obou stran bývá shodné.
Značka | Velikost | Odsazení |
---|---|---|
H1 | 32 px | 21 px |
H2 | 24 px | 20 px |
H3 | 19 px | 19 px |
H4 | 16 px | 21 px |
H5 | 13 px | 22 px |
H6 | 11 px | 25 px |
Místo stejného odsazení zdola i shora někdy působí lépe vyšší odsazení horní než spodní (margin-top
větší než margin-bottom
).
Velikost písma nadpisů jednotlivých úrovní odpovídá zastaralému atributu size
používaného pro element <font>
– <font size="6">
je tak stejně velký jako <h1>
atd.
Struktura dokumentu
Pomocí nadpisů se utváří struktura dokumentu. Z toho vyplývá, že:
-
Úroveň nadpisů by měla začínat od nejvyšší úrovně (
<h1>
). -
Jednotlivé úrovně by měly jít postupně za sebou. Tedy ne nějak takto.
<h1> Nadpis nejvyšší úrovně </h1> <h3>Třetí úroveň</h3>
-
Nadpisy by neměly být používány k zvětšování písma. Pokud na dané místo ze struktury vychází nadpis H2, ale jeho písmo je visuálně moc velké, řešení je změnit pro
<h2>
velikost pomocí CSS vlastnostifont-size
.O úrovni použitého nadpisu by se nemělo rozhodovat na základě vzhledu.
V případě správného strukturování nadpisů půjde dobře automaticky sestavit ze stránky její obsah, jaký mají třeba stránky na Wikipedii.
- Automatické generování obsahu stránky – JS a PHP skripty pro vygenerování TOC (Table of contents) na základě nadpisů.
Atribut id
Pokud je stránka delší a obsahuje hodně podnadpisů, je užitečné pro ně přidávat identifikátory. Dělá se to globálním atributem id
. Na takový nadpis potom jde přímo odkázat přidáním #id
do adresy.
<h2 id="id-nadpisu">
Nadpis
</h2>
Musí se používat nadpisy?
Volnost HTML nijak nenutí tvůrce webu nadpisy používat, stránka místo elementů <h1>
–<h6>
tak může obsahovat samé <div>
y:
<div class="nadpis">Nadpis</div>
<div class="podnadpis">Podnadpis</div>
S ohledem na strukturu obsahu stránky, kterou nadpisy tvoří, to ale není dobrý nápad.
Výška řádku
Při globální změně výšky řádku (line-height
) se snadno stane, že zadaný rozměr nebude vhodný pro velké písmo v případě nadpisů.
Jelikož nadpisy většinou bývají krátké, špatná výška řádku nadpisů snadno unikne oku při testování. A potom se v ostrém provozu při mimořádně dlouhém nadpisu stane něco takového:
Pouze jeden <h1>
Některé poučky praví, že na stránce by měl být pouze jeden nadpis nejvyšší úrovně a obsahovat podobný obsah jako titulek (značka <title>
).
<title>Název stránky</title>
…
<h1>
Název stránky
</h1>
U většiny stránek je to skutečně vhodný postup. Nikde ale používání více <h1>
nadpisů zakázané není.
Mohou nastat případy, kdy dává více H1 nadpisů smysl.
Někdo má ve zvyku do <h1>
dávat název celého webu / logo – záleží na úhlu pohledu, jestli se jedná o název stránky nebo spíš součást navigace – potom zpravidla i nadpis samotné stránky bývá v <h1>
. Často více nadpisů nejvyšší úrovně vzniká jako z nouze ctnost kvůli komplikovanému technickému řešení.
-
U stránek, jako je například výpis článků z blogu podle určité kategorie, by se musely nadpisy článků celkově „ponížit“, aby neobsahovaly H1.
-
Často by se na hlavní stránce hodil jako nejvyšší nadpis název webu a na podstránkách potom mít v H1 název té podstránky, což opět znamená dynamicky určovat, jestli název webu má nebo nemá být v
<h1>
.
Vliv nadpisů na SEO
Jelikož text v nadpisech mívá větší význam a v případě <h1>
, <h2>
a <h3>
je i ve výchozím stylu větší než běžný text v odstavcích nebo seznamech, dává smysl, aby mu větší důraz přisuzovaly i vyhledávače.
Nabízí se proto do nadpisů vkládat důležitá klíčová slova. Pokud je ale cílem, aby obsah webu také četl návštěvník, měly by nadpisy stále dávat smysl. Začínat kvůli SEO každý odstavec nadpisem na základě šablony „super seo klíčová fráze <slovo>“ tak není úplně to pravé.
- Plaváček: Budiž nadpis. Řeklo SEO.
Na některých webech jsou k vidění nadpisy obsahující klíčová slova maskované pomocí CSS jako běžný text. Jde to jednoduše:
h1 {
font-weight: normal;
font-size: 100%;
}
Nejedná se ale o moc čistou praktiku, kterou by bylo dobré následovat.
Podnadpisy
V případě, že by se hodilo ihned pod hlavní nadpis umístit podnadpis, existuje několik možností:
-
Podnadpis vložit přímo do
<h1>
, třeba do značky<small>
nebo<span>
:<h1> Nadpis stránky<br> <small>Podnadpis</small> </h1>
-
Podnadpis umístit do odstavce a vhodně ho nastylovat:
<h1>Nadpis stránky</h1> <p class="podnadpis">Podnadpis</p>
-
Podnadpis vložit jako
<h2>
:<h1>Nadpis stránky</h1> <h2>Podnadpis</h2>
Nevýhoda je, že se tím hned vyplácá jedna úroveň nadpisů, protože nejvyšší podnadpisy stránky by potom měli začínat nejspíš úrovní
<h3>
.
Značka <hgroup>
V návrzích HTML existovala značka <hgroup>
, která měla sloužit právě k obalení hlavního nadpisu a jeho podnadpisů.
<hgroup>
<h1>Nadpis stránky</h1>
<h2>Podnadpis</h2>
</hgroup>
Řada prohlížečů ji podporuje, ale z W3C specifikace HTML 5 byla vyřazena.
Odkaz v nadpisu, nadpis v odkazu
Není problém odkaz a nadpis zanořovat oběma způsoby.
<a>
v <h1>
<h1>
<a href=#">
Odkaz v nadpisu
</a>
</h1>
<h1>
v <a>
Tato možnost je od HTML 5 validní, dříve validní nebyla, ale spolehlivě fungovala.
<a href="#">
<h1>
Nadpisu v odkazu
</h1>
</a>
V případě, že je žádoucí, aby byl součástí odkazu kromě nadpisu ještě další element, je nejjednodušší použít jen jeden <a>
, který vše obalí.
Odkazy jinam
- Jak psát web: Bloky > h1 až h6
- DevDocs: Heading Elements
- (Video) Google Webmasters: More than one H1 on a page: good or bad?
Komentáře