H1 tag

H1 tag

2. 1. 2014

Kolko <h1> moze byt na stranke? Tuto otazku si kladie nejeden web designer. Preco si ale tuto otazku kladieme

Pred HTML5

Predtym, nez prislo HTML5 bolo pravidlom, ze na stranke je len jeden h1 tag, ktory opisuje obsah stranky. Vyhladavace tak mohli pochopit kontext a posudzovat uroven stranok.

Hlavna stranka

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>...</title>
    </head>
    <body>
        <div>
            <h1>...</h1> <!-- nadpis suvisiaci s hlavnym obsahom -->
        </div>
        <div>
            .... <!-- hlavny obsah -->
        </div>
    </body>
</html>

Stranka s clankom

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>...</title>
    </head>
    <body>
        <div>
            <p>...</p> <!-- nadpis, ktory uz nieje h1 -->
        </div>
        <div>
            <h1>...</h1> <!-- nadpis suvisiaci s hlavnym obsahom -->
            ... <!-- hlavny obsah -->
        </div>
    </body>
</html>

Moznost mat len jeden h1 prinasa niekolko problemov. Nuti k vseobecnemu nadpisu a oslabuje schopnost vyhladavaca zistit predmet obsahu. Nemoznost mat viacero clankov na jednej stranke, pretoze vyhladavac bude brat jednolive clanky ako podsekcie jedneho obsahu (clanku).

Po HTML5

HTML5 riesi problemy spojene s nadpismi, pretoze pomocou semantickych tagov je mozne rozlisit, ci nadpis prislucha root alebo content sekcii. root (alebo koren dokumentu), je deleny na content sekcie, ktore su napriklad obalene v tagu <article>. Ak sa teda <h1> nachadza v <article>, vie ze sa jedna o nadpis clanku a nie stranky. Medzi content patria <article>, <section>, <nav> a <aside>.

Hlavna stranka

<!DOCTYPE html>
<html>
    <head>
        <title>...</title>
    </head>
    <body>
        <header>
            <h1>...</h1> <!-- nadpis suvisiaci s hlavnym obsahom -->
        </header>
        <section>
            ... <!-- hlavny obsah -->
        </section>
    </body>
</html>

Stranka s clankom

<!DOCTYPE html>
<html>
    <head>
        <title>...</title>
    </head>
    <body>
        <header>
            <h1>...</h1> <!-- nadpis stranky -->
        </header>
        <article>
            <h1>...</h1> <!-- nadpis clanku -->
            .... <!-- hlavny obsah -->
        </article>
        <article>
            <h1>...</h1> <!-- nadpis clanku -->
            .... <!-- hlavny obsah -->
        </article>
    </body>
</html>

Vsimnite si, ze sa zmenil DOCTYPE, cim sme vyvolali HTML5. Jednotlive clanky su obalene v article a mame viacero <h1>, ktore prinalezia danej sekcii.

HTML5 pravidla pre h1

Cely dokument moze obsaovat viacero <h1>, ale len jeden na root alebo content sekciu. Dalsim pravidlom je, ze by mal existovat <h1> medzi <body> a prvou content sekciou, ktory bude popisovat celkovy dokument.

comments powered by Disqus