Logické strukturování HTML dokumentu
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 tagacronym
ke značení zkratkových slov (např. NASA). Oba mají atributtitle
, 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, tagq
potom k označení těch kratších. Jediný faktický rozdíl mezi nimi je ten, žeblockquote
je element blokový, zatímcoq
element řádkový. Můžete u nich použít i atributcite
, který označuje URL adresu citovaného dokumentu. Obsah tagublockquote
byste měli uzavírat do odstavce (tagp
). 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 taguins
potom obsah, který sem byl přidán. Oba tagy mají atributycite
(jeho význam je stejný jako u tagublockquote
) adatetime
, 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 ah6
nejnižší důležitost. Každý dokument by měl obsahovat právě jeden nadpish1
a několik podnadpisů. Neměli byste také přeskakovat úrovně nadpisů, tzn. nejdříveh1
, pakh2
, ale ne rovnouh3
. 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.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
inPage AI: Revoluční nástroj pro tvorbu webů
3. července 2024 -
Praktické rady na zabezpečení redakčního systému WordPress
27. února 2023
Nejnovější
-
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024