Logické strukturování HTML dokumentu

2. dubna 2002

•

HTML je ze své podstaty jazykem popisujícím strukturu informací – tedy jejich význam, důležitost, vzájemné vazby apod. Dnes si o tomto tématu povíme něco víc a také si představíme několik značek pro logické formátování textu.

Proč logické strukturování?

Jak už jsem naznačil v úvodu – HTML není jazyk určený k popisování vizuální podoby stránky, ale k popisování její struktury. V tomto ohledu bylo poněkud nešťastným krokem schválení značek jako jsou font, basefont, b, i, strike, s, u nebo tt, a také formátování stránky pomocí tabulek. Dnes jsou tyto značky a postupy buď zavrženy, nebo je od jejich používání odrazováno. Místo nich by se mělo používat značek strukturálních, o kterých si něco povíme v dnešním článku, a formátování stránky pomocí CSS (tomuto tématu se na Intervalu věnovalo již několik článků).

Webové konsorcium ale nepodněcuje autory k používání strukturálních značek, protože nemá co na práci, jak by si možná někteří z vás mohli myslet po přečtení předchozího odstavce. Důvod je v tom, že obsah internetu (respektive webové stránky) by měl být čitelný pro jakékoli zařízení schopné přistupovat na internet. Už dnes jsou rozšířená například PDA, různé organizéry, mobilní telefony apod., řadíme sem ale i zařízení pro handicapované lidi, jako jsou čtečky obrazovky, a také různé vyhledávací roboty (myslím, že jejich význam pro jakoukoli webovou stránku není třeba zdůrazňovat).

Je také pravděpodobné, že se různá „alternativní“ zařízení, které jsem jmenoval výše, budou stále více rozšiřovat a vytlačovat tak dnes již klasická (a podle některých neperspektivní) PC. Možná již není zas tak daleko doba, kdy bude mít každá lednička přístup na internet. :)

K ilustraci toho, čemu jsem se věnoval v předchozích odstavcích, nám poslouží následující příklad: Pokud na svojí stránce používáte ke zvýraznění důležítých textových pasáží tag b, říkáte tak klientovi, aby obsah této značky vykreslil tučným písmem. Může se ale stát, že klient text tučným písmem zobrazovat neumí a nebo dokonce nemůže (v případě jiného než vizuálního výstupu), a proto bude tuto značku ignorovat. Kdybyste ale použili tag strong, říkáte tím klientovi, že obsah tohoto tagu má zvýraznit – záleží ale na něm, jak toto zvýraznění provede. Díky tomu může klient například vykreslit text uvnitř této značky jinou barvou než je barva obyčejného textu, uložit tento text jako klíčový (v případě vyhledávacího robota) nebo nechat text vyslovit důraznějším tónem (v případě hlasového výstupu).

Strukturování HTML stránky

Současný trend a doporučovaný postup návrhu webových stránek je ten, že byste měli na stránce nejprve vytvořit obsah s pomocí logických HTML značek a až v druhém kroku byste měli těmto značkám přiřazovat CSS vlastnosti, pomocí kterých řeknete různým zařízením, jak mají obsah uvnitř daných značek interpretovat. Jednotlivá zařízení si poté podle svých možností vyberou z nabízených vlastností a dokument podle nich naformátují. CSS vlastnosti lze tedy chápat jako něco navíc – základem je správně strukturovaný HTML dokument, který je čitelný pro jakékoli zařízení.

Logické HTML značky konkrétně

V následujcím výčtu vám představím některé značky, které jsou určeny k logickému formátování textu v HTML dokumentu:

abbr, acronym: Tag abbr slouží ke značení zkratek (např. WWW), zatímco tag acronym ke značení zkratkových slov (např. NASA). Oba mají atribut title, do kterého se píše celé znění zkratky/zkratkového slova. Příklad: <abbr title="World Wide Web">WWW</abbr>.
address: Slouží k poskytování kontaktních informací o autorovi dokumentu.
blockquote, q: Tag blockquote slouží k označení delších citací v dokumentu, tag q potom k označení těch kratších. Jediný faktický rozdíl mezi nimi je ten, že blockquote je element blokový, zatímco q element řádkový. Můžete u nich použít i atribut cite, který označuje URL adresu citovaného dokumentu. Obsah tagu blockquote byste měli uzavírat do odstavce (tag p).
cite: Slouží k označení citovaného zdroje. Příklad: <cite>Božena Němcová</cite> kdysi řekla <q>Láska rodí lásku.</q>
code: Uvnitř tohoto tagu by se měl nacházet různý počítačový kód.
del, ins: Do tagu del by se měl v dokumentu uzavírat obsah, který již neplatí, do tagu ins potom obsah, který sem byl přidán. Oba tagy mají atributy cite (jeho význam je stejný jako u tagu blockquote) a datetime, který obsahuje datum odebrání/přidání obsahu uvnitř těchto tagů.
dfn: Jeho obsahem je definice určitého termínu (pro angličtináře uvádím přesné znění ze specifikace HTML: defining instance of the enclosed term).
em: Tento tag značí lehké zdůraznění.
h1, h2, h3, h4, h5, h6: Tyto tagy slouží pro nadpisy, přičemž h1 má nejvyšší důležitost a h6 nejnižší důležitost. Každý dokument by měl obsahovat právě jeden nadpis h1 a několik podnadpisů. Neměli byste také přeskakovat úrovně nadpisů, tzn. nejdříve h1, pak h2, ale ne rovnou h3. Jejich používání byste neměli podceňovat, protože se podle nich mimojiné často orientují vyhledávače a navíc díky nim váš dokument získává správnou logickou strukturu.
kbd: Značí text, který by měl být vložen uživatelem, např.: id="<kbd>jméno tagu</kbd>". Můžete ho použít například i u formulářových políček.
p: Tento tag je vám jistě dobře znám. Já jen připomínám, že značí odstavec a že byste do něj měli uzavírat veškerý text na stránce (snad s výjimkou nadpisů). I tento tag často slouží vyhledávačům v orientaci v dokumentu (ty např. indexují několik prvních znaků každého odstavce).
samp: Označuje příklad výstupů programů, skriptů apod. Zde na Intervalu ho používáme k označování výpisů zdrojového kódu uvnitř textu.
strong: Označuje silnější zdůraznění (než tag em).
var: Označuje instanci proměnné nebo parametr programu.

Je jasné, že pomocí těchto značek nemůžete logicky vyznačit význam většiny slovních spojení z lidského života, týkají se spíše oboru počítačů. Ale již dnes se objevují první vlaštovky využívající technologii sémantického webu, což je systém založený na XML, pomocí kterého to již možné je.