HTML nadpisy H1, H2, …

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><h3>) jsou navíc větším písmem než prostý text.

Velikost nadpisů

Nadpis <h4> se potom zobrazuje zpravidla stejně jako běžný tučný text.

Srovnání nadpisu H4 a tučného textu

Nadpis <h5> je už menší než prostý text. Dle výchozích stylů velikostně odpovídá obsahu značky <small>.

Srovnání nadpisů H5, H6 a tučného textu

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í
H132 px21 px
H224 px20 px
H319 px19 px
H416 px21 px
H513 px22 px
H611 px25 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:

  1. Úroveň nadpisů by měla začínat od nejvyšší úrovně (<h1>).

  2. 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>
  3. 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 vlastnosti font-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.

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:

Nedostatečná výška řádku u velkých písmen

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é.

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í:

  1. Podnadpis vložit přímo do <h1>, třeba do značky <small> nebo <span>:

    <h1>
      Nadpis stránky<br>
      <small>Podnadpis</small>
    </h1>
  2. Podnadpis umístit do odstavce a vhodně ho nastylovat:

    <h1>Nadpis stránky</h1>
    <p class="podnadpis">Podnadpis</p>
  3. 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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Podmíněné komentáře pro IE

Podmíněné komentáře pro Internet Explorer

Jak rychle a snadno hackovat HTML a CSS v různých historických versích Internet Exploreru.

Tag <label> a atribut for

Značka <label> a atribut for

Značka <label> slouží ke svázání popisku s formulářovým prvkem. Kdy použít atribut for?

Doctype

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

Značka <base href>

HTML značka <base>

K čemu využít a na co si dát pozor u HTML tagu <base>?

Meta tag viewport

Značka <meta name=viewport>

K čemu používat <meta> tag name=viewport.

Komentáře