Jak používat nadpisy

Hodnotný obsah je základem úspěšných stránek a účelná struktura je základem dobrého obsahu. Struktura, byť jediné stránky, je samozřejmě utvářena mnoha prvky, nicméně jednu z hlavních rolí mezi nimi hrají nadpisy. Právě těm chci věnovat dnešní článek.

HTML rezervuje pro nadpisy hned několik prvků (tagů), které zejména začátečníci rádi opomíjejí. Zde jsou.

<TITLE>

Určuje titul, či název celého dokumentu (stránky). Umísťuje se do hlavičky dokumentu (tj. dovnitř tagu HEAD) a je jedním z mála tagů, které musí v korektním HTML dokumentu povinně být. Ovšem pozor, musí zde být právě jednou.

Obsah prvku TITLE může být tvořen jen prostým textem a HTML entitami. To jsou např. ony známé náhrady uvozovek (&quot;), špičatých závorek (&lt; a &gt;), apod. Nic jiného není povoleno, zejména nelze do TITLE vnořovat další prvky.

Správný titul by měl být krátký, jasný, měl by dobře vystihovat obsah a účel stránky. Doporučená maximální délka je přibližně 60 znaků.

Současné prohlížeče využívají titul třemi způsoby. Všechny je dobré mít na paměti, když titul pro novou stránku vymýšlíte.

1. Titul se v grafických operačních systémech (typicky Windows) zobrazuje v horním, titulkovém pruhu okna prohlížeče. Právě proto by měl být krátký, nebo by alespoň měl začínat dostatečně odlišujícím textem pro případ, že se konec titulu do horního pruhu okna prohlížeče nevejde. Tomu, kdo používá Windows a otevírá si často více oken prohlížeče, výstižný titul pomůže nalézt v liště úloh správné okno.

2. Pokud si váš návštěvník bude chtít uložit stránku do oblíbených položek (favoritů, záložek), prohlížeč zpravidla nabídne titul stránky jako název oblíbené položky. Nabídnutý název lze sice změnit, ale proč přidělávat návštěvníkům práci. Čím výstižnější titul, tím lépe.

3. Moderní prohlížeče obvykle umožňují návrat zpět i přes několik stránek, či dokonce výběr ze všech stránek v poslední době navštívených. Zde uživateli opět pomůže dobře zvolený titul. Smutné je, když autor všem stránkám jednoho webu přidělí shodný titul (někdy to vyplývá z použití rámců) a vy se chcete vrátit třeba na ceník. Historie pak nabízí pouze 10 shodných názvů :-(

Velký význam má titul i při optimalizaci stránek pro vyhledávače. Ty titul obvykle použijí jako nadpis stránky ve výsledcích hledání a navíc mu při hodnocení relevance stránky zpravidla přisuzují větší váhu, než běžnému obsahu. Podrobněji se o této problematice můžete dočíst v  mém článku na Intervalu.

<H1> ... <H6>

Zatímco titul se uvádí v hlavičce a není tedy přímo součástí obsahu dokumentu, prvky H1 až H6 se již zobrazují přímo v textu stránky a měly by se nejvýznamněji podílet na strukturování obsahu.

Pro začínající tvůrce připomínám, že se jedná o tagy párové a blokové. Lze tedy do nich, kromě textu, vkládat další řádkové prvky a vždy musí být uzavřeny. Naopak, nadpisy H1 až H6 mohou být vnořeny do prvků APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DEL, DD, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD a TH.

Jediným přípustným, byť v HTML 4 nedoporučeným (deprecated), atributem je ALIGN pro zarovnání s možnými hodnotami left (vlevo), center (na střed), right (vpravo) a justify (do bloku).

H1 označuje nejvyšší úroveň nadpisů, H6 úroveň nejnižší. Obvykle se doporučuje, a je znakem dobře strukturovaného textu, použít právě jeden nadpis H1 na každé stránce. Nadpisů H2, H3, atd. už může být na stránce samozřejmě víc, žádná pevná pravidla stanovena nejsou.

Používejte nadpisy logicky. Nikdy se nerozhodujte podle toho, jak nadpisy v prohlížeči vypadají. To lze dnes již bez problému (no, někdy trochu s problémy ;-)) změnit pomocí CSS. Přednost má struktura a smysl textu. Je-li tedy v dokumentu právě jeden nadpis H1, měly by další úroveň tvořit nadpisy H2 a nikoli třebas H4, protože se vám více líbí menší písmo. V žádném případě byste samozřejmě neměli použít některý nadpis neúčelně, jen proto, že vám vizuálně právě vyhovuje jeho implicitní písmo a velikost.

Funkce nadpisů by naopak nikdy neměla být suplována obyčejným textem zvýrazněným některými formátovacími, či zdůrazňujícími prvky, jako jsou <B>, <EM>, <STRONG>, <BIG>, apod.

Ještě častěji, než zneužití prvků H1 až H6 pro čistě vizuální formátovací účely, můžete pozorovat absenci nadpisů na stránkách, nebo jejich nedostatečné používání. Mnoho webdesignerů, kteří si i význam nadpisů uvědomují, je mají spojeny pouze s určitým nejtypičtějším způsobem použitím. Tím je obvykle textový nadpis H1 nahoře na stránce a pár nadpisů H2, případně H3 rozčleňující delší text. Nadpisy jsou však vhodné i v jiném kontextu.

Například i tehdy, jsou-li vaše nadpisy tvořeny výhradně obrázky, je na místě použít nadpisové prvky. Konstrukce

je nejenom naprosto korektní, ale v určitém kontextu, z hlediska struktury obsahu, i jediná správná.

Často se zapomíná na blokový charakter nadpisů. I mně kdysi nějakou dobu trvalo, než jsem překonal určitou mentální bariéru a použil pro titul a podtitul stránky tuto naprosto přirozenou a korektní konstrukci:

Jiným případem může být naopak použití nadpisů v rámci určité nadřízené struktury. Typickým příkladem jsou seznamy, které lze strukturovat i takto:

Podobně jako v případě titulu, některé vyhledávače přikládají obsahu prvků H1 až H6 vyšší váhu než ostatnímu textu. Bývá tedy dobré, koncentrovat do nich ta nejdůležitější klíčová slova. To se ostatně vyplatí i z důvodů usnadnění orientace na stránce.

Aby byl náš dnešní přehled nadpisů kompletní, ještě doplním, že v HTML mají do určité míry funkci nadpisů i tyto další prvky:

• THEAD, TH uvnitř prvku TABLE určují popisné záhlaví tabulek.
• CAPTION uvnitř prvku TABLE označuje název či nadpis tabulky. Prohlížeče ho zatím moc nepodporují.
• LABEL slouží k vyznačení nadpisu, titulku či popisku prvku formuláře.

Pokud na svých stránkách používáte nadpisy důsledně a přesně tak, jak se používat mají, neřekl jsem vám nic nového a jistě jste už tento článek přeskočili. Pokud ale ne, zkuste o nadpisech uvažovat, až budete vytvářet nové stránky, nebo předělávat vaše stávající. Abyste to měli ještě pestřejší, čeká vás příště další článek o nadpisech, tentokrát z pohledu obsahového.