Více H1 ve stránce? Klidně, ale ne s HTML5 osnovou dokumentu

Více <h1> ve stránce mít lze, ale nepočítejte, že to bude fungovat tak jako nastiňuje článek The Truth About Multiple H1 Tags in the HTML5 Era. Tam totiž tvrdí, že když napíšete toto…

<h1>Hlavní nadpis</h1>
<section>
    <h1>Nadpis 2. úrovně</h1>
    <h1>Další nadpis 2. úrovně</h1>
    <section>
        <h1>Nadpis 3. úrovně</h1>
        <h1>Další nadpis 3. úrovně</h1>
    </section>
</section>

…osnova dokumentu (jinak řečeno struktura jeho obsahu) bude podle HTML5 vypadat takto:

* Hlavní nadpis
    * Nadpis 2. úrovně
    * Další nadpis 2. úrovně
        * Nadpis 3. úrovně
        * Další nadpis 3. úrovně

To by bylo skvělé, jenže on novou HTML5 osnovu žádný prohlížeč neimplementoval:

At the time of writing, browsers and screen readers do not support these new outlines, so if you do use multiple <h1>s in your documents, it may confuse your users. It’s best if you use logical heading levels — <h1>–<h6>.

Slabý argument? Pak si přečtěte to hezké červené varování na webu W3C, které objevil Adam Kudrna.

HTML5 outline tedy existuje jen na papíře. A tak bude osnova výšeuvedeného dokumentu v praxi vypadat takto:

* Hlavní nadpis
* Nadpis 2. úrovně
* Další nadpis 2. úrovně
* Nadpis 3. úrovně
* Další nadpis 3. úrovně

Osnova (outline) dokumentu je dost zásadní věc pro sémanticky správné zpracování dokumentu. Tedy pro přístupnost. Nejen obligátní slepecké čtečky, ale třeba i vyhledávače.

Více <h1> ve stránce s HTML4 osnovou? Ano, někdy to smysl dává

Třeba v jednostránkových webech (onepage):

<h1>Nadpis 1. sekce</h1>
<h2>Podnadpis</h2>
<h1>Nadpis 2. sekce</h1>
<h1>Nadpis 3. sekce</h1>

Osnova vypadá takto:

* Nadpis 1. sekce
    * Podnadpis
* Nadpis 2. sekce
* Nadpis 3. sekce

Z pohledu přístupnosti ani vyhledávačů by s tím žádný problém být neměl.

Můžeme si z toho vzít hned 3 ponaučení:

1. HTML5 strukturální elementy jsou uživateli k ničemu. Nikdo vám jejich použití sice zakázat nemůže, ale osnovu dokumentu s jejich pomocí vytvořit rozhodně nelze.
2. Více <h1> ve stránce je i s HTML4 osnovou zcela v pořádku.
3. A v neposlední řadě, přátelé, pozor na články o HTML5 co nezmiňují podporu v prohlížečích. Šíří bludy.