Struktura dokumentu přehledně
Vysvětlivky k obrázku
- Definice typu dokumentu - DOCTYPE
- Hlavička - deklarační část dokumentu uzavřená tagem
head
- Kódování, styly, atd. -
meta, style, script, atd.
- Tělo dokumentu - hlavní část dokumentu uzavřená tagem
body
- Nadpis úrovně 1 - Nadpis nejvyšší úrovně - tag
h1
- Ostatní nadpisy - různé úrovně nadpisů - tagy
h2 až h6
- Seznam - seznam
ul, ol
- Položka seznamu -
li
- Tabulka - data prezentována v řádcích a sloupcích - tag
table
- Datová položka - řádek či sloupec tabulky
- Blokové, řádkové elementy, seznamy, tabulky, atd. - Jedná se o obsah patřící do určitého místa struktury dokumentu, např. odstavce, obrázky, odkazy, kontejnery, atd.
- Části stromu se zelenou hvězdičkou - nejsou přímo určeny značkami, jejich pozice v dokumentu je však důležitá.
Stálé a v současné době velice moderní téma o struktuře webovského dokumentu jsem si dovolil okořenit názorným obrázkem stromu struktury á la Průzkumník ;-) Chci se zaměřit zejména na správné používání titulků a nadpisů při psaní webovského dokumentu. Případné komentáře a zkušenosti rád uvítám.
Deklarace typu dokumentu
Jak známo, každý správný dokument se skládá z hlavičky head a těla body. Dokument by měl mít takzvané Document Type Definition (definice typu dokumentu), což je informace nejen pro prohlížeč, jakému typu dokument odpovídá. Neuvedení typu dokumentu může mimo jiné zapříčinit jeho nesprávné chování.
Tip Nezapomínejte uvádět typu dokumentu na stránkách W3C.
Titulek dokumentu
U titulku dokumentu title bych se rád zastavil více. Jak známo, titulek je často využíván k věcem jiným, než pro které je určen.
Podle mého by měl být titulek jakýsi jednoznačný identifikátor stránky. Ovšem jednoznačný tak, aby se z něj dalo jednoduše vyčíst, co vlastně znamená. Proto je třeba také myslet na to, aby byl titulek uváděn až po deklaraci použitého typu kódování, abychom místo titulku neviděli změť nesmyslných znaků. A to vše proč?
- Titulek se použije v titulku prohlížeče či v titulku záložky (tab), což jednoznačně ulehčuje orientaci při více otevřených stránkách
- Titulek se použije v seznamu oblíbených stránek
- Titulek se použije jako hlavní odkaz na stránku ve vyhledávacích službách
Píšeme-li například jakéhosi "Průvodce světem" a aktuální stránka je věnována např. Řecku, titulek dokumentu by měl být např. Řecko - Průvodce světem. Proč zrovna takto? Podle mě je dobré označit jak vlastní část tématického celku (v našem případě Řecko), tak tématický celek jako takový. Je to lepší jak pro orientaci např. v oblíbených položkách, historii nebo např. při vyhledávání. Řecko je na prvním místě z jednoduchého principu od konkrétního k obecnému.
Tipy jak na titulky ukazuje také W3C.
Tělo dokumentu
Strukturu dokumentu z větší části určují nadpisy.
Nadpis nejvyšší úrovně - h1
Nadpis nejvyšší úrovně by podle mého měl být na stránce jen jeden. Mělo by to být jakési označení celého tématického celku, o kterém ve vlastním obsahu dokumentu píšeme.
Píšeme-li například jakéhosi "Průvodce světem" a aktuální stránka je věnována např. Řecku, měl by podle mého nadpis h1 být právě Průvodce světem a Řecko by mělo být obsahem nadpisu nižší úrovně tzn. h2. Pokud totiž návštěvník stránek bude procházet mezi jednotlivými státy, bude stále vědět, že je v Průvodci světem a právě se dívá na Řecko, Španělsko, Itálii, atd. Určitě by se také dalo polemizovat o tom, zda by nadpis nejvyšší úrovně nemohl znít stejně jako titulek tzn. Řecko - Průvodce světem. První řešení je však podle mě správnější jak ze sémantického hlediska, tak vhodnější pro pozdější formátování...
Tipy jak na nadpisy nejvyšší úrovně ukazuje W3C.
Nadpisy dále
Jak na nadpisy dále podle mého docela pěkně ukazuje obrázek nahoře. Je hlavně třeba dbát na to, aby nadpisy vyjadřovaly strukturu dokumentu, tzn. byly chronologicky významově řazeny – a to hezky od 1 do 6 nikoli na přeskáčku!
Ostatní důležité části dokumentu
Jistě se shodneme na tom, že části dokumentu jako je menu či patička jsou neméně důležité pro orientaci a navigaci návštěvníka stránky jako samotný obsah. Bez dobré navigace se k obsahu návštěvník těžko dostane, bez dobrého obsahu je navigace na nic.
Jenomže tyto části dokumentu nemají s vlastní obsahovou částí mnoho společného. Je nutné je tedy jak sémanticky (např. pomocí linky hr, uzavřením do samotného bloku, či nadpisem), tak vizuálně (např. pomocí stylů) oddělit.