HTML 5 a sémantika

V současné době si náhodný zvědavec zkoumající zdrojový kód nějakého HTML dokumentu musí připadat jako Alenka v říši DIVů. Diverzita používaných tagů je skutečně žalostná, to by se však s příchodem HTML 5 mělo změnit

Obecně

Vizi sémantického webu zformuloval Tim Berners-Lee někdy v roce 1999, zjednodušeně vzato, jednalo se o uspořádání dat takovým způsobem, aby je počítače mohly logicky zpracovat. Pro naplnění této idey připravilo W3C (World Wide Web Consortium) několik prostředků jako třeba RDF (Resource Description Framework) nebo OWL (Ontology Web Language). Pro případné nezasvěcené dodávám, že W3C je standardizační organizace, financovaná z příspěvků svých členů, převážně firem a univerzit, kteří rozhodují o vzniku pracovních skupin, kteréžto vypracovávají konkrétní webové standardy, RDF je rodina specifikací z roku 1999 pro metadatový model implementovaný formou XML aplikace (na RDF je založené např. RSS) a OWL je pak vskutku mocný jazyk, který umožňuje taxonomicky členit informace a stanovovat vzájemné vazby mezi nimi.

Je tedy zřejmé, že Konzorcium si je dobře vědomo významu sémantiky pro uspořádání a přístupnost, resp. dohledatelnost informací. Tím ostřeji pak vystupuje kontrast mezi obecným povědomím potřeby sémantického strukturování informací na straně jedné a datovým chaosem na webu na straně druhé a krade se na mysl otázka, proč W3C nevěnovalo v HTML sémantice násobně větší péči. O odpovědi se dá jen spekulovat, každopádně je v této souvislosti užitečné si povšimnout, že zájem o sémantiku není valný ani mezi kodéry a prim hrají vizuální aspekty.

Na závěr bych chtěl jen podotknout, že se nevyplácí používat tagu <q>, který uvádí citaci. Některé prohlížeče se do něj totiž (správně) snaží automaticky doplňovat uvozovky. Výsledek je často žalostný. Raději pro citace použijte kombinaci tagu <div> a entit.

Jaroslav Polakovič a jeho web o typografii

Proč se vlastně na sémantiku zaměřovat? Vždyť informace na webových stránkách obvykle nejsou prezentovány schématicky a heslovitě systémem pojem – význam, nýbrž přirozeně, mnohdy na bázi volných asociací. Takto zformovaným datům ovšem nemůže počítač dobře rozumět, ani když budou důkladně vyznačené, možnost jejich zpracování je tím výrazně omezená. Ne však minimalizovaná! Zejména vyhledávačům sémantika usnadňuje práci. Z textů zpětných odkazů, nadpisů, titulku mohou snadněji zjistit, k jakým tématům se stránka vztahuje, a relevantně s ní nakládat. A docela dobře, i když ne dokonale (prosazují se stránky vydatně podpořené zpětnými odkazy, někdy na úkor obsahově relevantnějších) to funguje. Naproti tomu vyhledávání obrázků není až tolik uspokojivé. Vyhledávače se zde totiž nemohou opřít o kvalitní sémantický podklad. Tvůrci obsahu se neradi zatěžují něčím tak marginálním, jako je adekvátní textová alternativa k obrázku (atribut alt). Blýská se však na lepší časy. HTML 5 příchází s široce uplatnitelnou ontologickou feature, s níž bude možné přiřazovat k objektům na stránce popisky, což se dá uplatnit zejména u obrázků, kde sémantické řešení viditelného popisku velmi schází. Vypadat by to mělo následovně: popisek reprezentovaný prvkem <legend> se umístí nad, nebo pod obrázek a celé se to „zabalí“ do <figure>.

<figure>
<img src="tibet.jpg" alt="Čínské bezpečnostní složky zasahují proti demonstrantům">
<legend>Násilí v Tibetu</legend>
</figure>

V představené ukázce má indexovací robot hned dva zdroje informací o obrázku – alternativní text a popisek.

Nové prvky

Jediný způsob, jak zvýšit sémantickou úroveň HTML dokumentů, spočívá opravdu asi jen v tom, nabízet webmasterům a webdesignérům takové prvky, které se jim hodí. Které to tedy jsou?

Strukturální prvky

Nejdůležitějším úkolem jazyka HTML je strukturovat webovou stránku. V současnosti se toto strukturování provádí hlavně pomocí významově neutrálního prvku <div>. To je hodně nepřehledné; když se člověk podívá na zdrojový kód HTML dokumentu, jen obtížně se může v záplavě divů orientovat. S HTML 5 se objeví prvky, které k přehlednému popisu struktury stránky výrazně dopomohou, zejména <header>, <footer>, <aside>, <nav>, <article>, <section>. Ustoupí se tak od nadměrného používání tříd a identifikátorů. Více v článku Seznámení s HTML 5.

Prvky spojené s aplikacemi

Web se za relativně krátkou dobu velice změnil. Dřívější statické stránky nabraly dynamiku a proměnily se v interaktivní aplikace. S přihlédnutím k této skutečnosti byla navržena úctyhodně početná skupina interaktivních prvků a prvků určených přímo pro práci s javascriptem, jejichž účelem je jednak částečně javascript nahradit a jednak s ním efektivněji a těsněji spolupracovat. Těmito prvky se však nebudu zabývat, neboť by to v tomto článku zabralo neúměrně velký prostor, a soustředit se budu především na ty prvky, které nemají tak výrazně aplikační charakter.

Audio a video

Multimediální objekty budou na webu hrát beze sporu čím dál významnější úlohu. Je tedy rozumné jejich roli sémanticky zohlednit. HTML 5 tak činí: kromě starých prvků <embed> a <object> zavádí nově i <audio> a <video>. Problém je však s kodeky. Prohlížeče sice mohou podporovat jakékoliv kodeky a určitou množinu svobodných audio a video kodeků by dokonce musely mít v povinné výbavě, ale jak to nakonec přesně dopadne není ještě úplně jasné.

K <audio> a <video> bude možné připojit mimo jiné atribut autoplay, jenž ponese logickou hodnotu. I když se standardizace tohoto atributu nemusí zdát jako dobrý nápad, neboť většina uživatelů kupodivu netouží být na načítané stránce vítána sluchu lahodícími zvuky, je nutno brát v potaz, že možnost automatického přehrání zvuku či videa není žádnou novinkou a za určitých okolností je i přínosná (uživatel nemusí na nic klikat).

Formuláře

Formuláře doznaly dalekosáhlých zásahů, ale jako nové prvky se objevily pouze <output> (zpracovaný výstup ze zadaných údajů) a <datalist> (seznam položek doplnitelných do políčka). Zato se vydatně rozmnožil počet typů inputů. Nově přibyly typy search, url, email, datetime, time, date, month, week, datetime-local, number, range, color.

Velmi důležité je to, že připravené novinky lze využívat již nyní, protože moderní prohlížeče je průběžně implementují v předstihu (W3C změnilo praxi a vydává specifikace až tehdy, když existují implementace specifikovaných funkcí) a nepodpora ze strany starších prohlížečů nebude mít vážné důsledky – projeví se zpětná kompatibilita, viz následující příklad.

<label>E-mail: <input type="email" required placeholder="user@example.cz"></label>

Starší prohlížeče budou tento kód interpretovat takto:

Prezentační prvky

Prvky pro ovlivnění vzhledu textu – pohrobkové dávné minulosti, kdy ještě neexistovaly kaskádové styly – úspěšně přežívají. HTML 5 sice část z nich odstranil (prohlížeče je však budou znát a interpretovat i nadále), vesměs ty, které již upadly v zapomnění, žel stále zůstávají <bdo>, <b>, <i>, <small>, <pre> a dokonce se k nim přidal i <mark> na zbarvení pozadí textu.

V čem spočívá užitečnost prvku <bdo>, jehož účelem je inverze pořadí znaků, jsem nepochopil, ale u těch ostatních je to nabíledni. CSS jsou pro úpravu vzhledu objektivně vhodnější, ale pokud jde pouze o to, odlišit nějakou pasáž, slovo nebo znakovou sekvenci, jsou CSS zbytečně silným nástrojem. Je jasně jednodušší použít ad hoc nějaký ten prezentační prvek.

Pro sémantiku není pohromou samotná existence prezentačních prvků, ale to, když se používají místo těch patřičných.

<b>Super nadpis</b><br>
Super nadpis by neměl bejt moc velikánskej a neměl by pod sebou mýt děsně obrovskou mezeru. Nejlíp se to vykutí tagem B!

S takovými sémanticky závadnými konstrukcemi se lze setkat jen u amatérů?

Staré prvky s novou tváří

Přidáním nových prvků však zásahy do sémantiky HTML nekončí. Nová norma se věnuje i starým prvkům. Mnohé z nich výrazně upravuje, rozšiřuje nebo alespoň upřesňuje.

Co se stalo s definičním seznamem?

Nejprve se s ním stalo to, že se v praxi používal a používá k jiným účelům, než ke kterým byl původně určený. Proto nemělo smysl trvat na jeho původně stanoveném významu, a tak byl redefinován jako asociační seznam, ovšem s poněkud zavádějícím názvem – description list (popisný seznam). Navzdory názvu však bude možné <dl> používat prakticky libovolně, kupříkladu jako kategorizovaný výčtový seznam; následující příklad tak je zcela korektní (převzatý přímo ze specifikace).

<dl>
<dt> Autoři </dt>
<dt> Editoří </dt>
<dd> Robert Rothman </dd>
<dd> Daniel Jackson </dd>
</dl>

Určitou odnoží <dl> je nově zaváděný prvek <dialog>, jenž má reprezentovat konverzaci. Prvek <dt> zde označuje osobu mluvčího a prvek <dd> zaznamenává, co pronesla.

Menu

HTML 5 nabízí <menu> (nabídka interaktivních prvků, klasicky hypertextových odkazů) hned ve trojím provedení. Výchozím typem je kvůli zpětné kompatibilitě list, který představuje nečíslovaný seznam. Dalším typem je toolbar, název mluví sám za sebe. A třetím, nejzajímavějším typem je context. Typ nabídky je dán atributem type.

Pro přístup ke kontextovému menu, je potřeba na nějaký prvek „navěsit“ atribut contextmenu, jehož hodnotou musí být ID daného <menu type="context">. Na takovém prvku (a na prvcích do něj vnořených!) se pak vyvolá příslušné kontextové menu obvyklým způsobem, třeba stiskem pravého tlačítka myši. Spolu s uživatelským kontextovým menu může být dostupné i stránkové kontextové menu, které prohlížeče tradičně nabízejí. Záleží na prohlížečích, jakým způsobem obě nabídky zpřístupní, mohou například obě nabídky spojit do společného kontextového menu, nebo v rámci uživatelského kontextového menu vytvořit submenu. Paradoxně však tvůrce webových aplikací někdy trápí opačný problém, a sice jak vyvolání kontextového menu potlačit.

Zvýrazňovací prvky

V návrhu HTML 5 je značný prostor věnovaný vymezení sémantických konotací mezi prvky <i>, <em>, <b>, <strong>, <mark>. S jistým nadhledem však lze říci, že účel všech těchto prvků je v podstatě stejný – odlišit určitý úsek od okolního textu a dát tak čtenářům najevo jeho zvláštnost. Ta může spočívat v jeho důležitosti, intonaci, cizorodosti, pozoruhodnosti apod. Důležité pro sémantiku je, aby bylo jasné, co prvky představují. Tohle kritérium ze zvýrazňovacích prvků splňují pouze <em> (zdůraznění) a <strong> (silná důležitost), ostatní prvky jsou mnohovýznamové a specifikace popisuje spoustu rozličných případů, ve kterých je lze uplatnit. Je asi zbytečné dodávat, že většina webmasterů si stejně bude zvýraznění vybírat na základě grafického ztvárnění, často přes WYSIWYG editor. Blázni si zvýraznění vybírají podle toho, co jim připadá víc SEO, a jen nadšenci se řídí, v tomto případě dost pochybnou, sémantikou.

Konec starých časů

Připravovaná norma je pro sémantiku HTML bez velké nadsázky živou vodou. Ne všechno je sémanticky ideální, ale záměrem HTML 5 není prosazovat důsledné vyznačování informací, nýbrž co nejvíce vyjít vstříc programátorům webových aplikací a jejich praktikám. Je tudíž načase škrtnout ve své slovní zásobě pojem HTML dokument a nahradit jej termínem HTML aplikace.

Toto pojednání o sémantice HTML není sumářem změn, které nová norma přináší, ale pouze výběrem toho nejzajímavějšího, navíc návrh HTML 5 ještě zdaleka není v konečné fázi a leccos se v něm ještě může změnit, než bude vydán jako doporučení. Každopádně je již dnes zřejmé, že poté, co se pátá verze naplno prosadí (ještě řadu příštích let bude brán ohled na starší prohlížeče, zejména na Internet Explorer), bude na HTML pohlíženo o dost jinak.

Odkazy a zdroje

• WHATWG – budoucnost webu (2007) – David Majda
• Webové aplikace podle WHATWG (2007) – David Majda
• HTML 5 – Working Draft (anglicky)

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.