Přejít k hlavnímu obsahu

HTML 5 a dědictví minulosti

HTML 5 a dědictví minulosti

Nebývá zvykem psát o HTML 5 v jiném než kladném smyslu. Rozhodně ale neplatí, že by byl tento jazyk zcela bez kazu. HTML 5 není projektem stavěným tak říkajíc na zelené louce, ale navazuje na dosavadní praxi při používání HTML, a nevyhnutelně tak přejímá i všechny problematické aspekty.
PAVEL SALVET

Kolem roku 1991 sepsal pracovník CERN (evropské středisko pro výzkum atomových částic) Tim Berners-Lee návrh hypertextového projektu, z něhož později vznikl HTML. Zásadní, ba průlomové na jazyku HTML bylo to, že se v něm daly používat hypertextové odkazy. To umožňovalo uživatelům snadnější pohyb mezi jednotlivými dokumenty uloženými na internetových serverech. Konečně tak odpadlo procházení adresářových struktur, které bylo o to náročnější, čím více síť rostla a čím bohatší byl obsah serverů k síti připojených. Efektivnost hypertextových odkazů se tak stala klíčovým faktorem podílejícím se na fenomenálním nástupu HTML.

HTML budoucnosti

Až do verze 3.2 obsahoval HTML hlavně tagy pro vyznačení struktury a pro popis informací, tedy sémantické značky, které ze své podstaty neumožňovaly autorům webových stránek určovat v dostatečné míře grafickou podobu HTML dokumentů. Vývojáři prohlížečů proto vyšli vstříc a do HTML zakomponovali množství ryze prezentačních (vzhled určujících) tagů, jako např.

(pro zarovnání obsahu do středu), které byly posléze standardizovány právě verzí 3.2. Tímto způsobem bylo zajištěno vytváření pohledných a vzhledově variabilních stránek, zvláště při využití tabulkového layoutu.
Tento krok měl však i svou odvrácenou tvář. Kvůli zneužívání tabulek k formátovacím účelům a nadměrnému používání prezentačních tagů ztrácely HTML dokumenty svou přehlednost. Rovněž sémantická úroveň šla rapidně dolů, jelikož autoři stránek strukturální a deskriptivní tagy částečně vynechávali, resp. nahrazovali je prezentačními. Problém byl i v tom, že web se čím dál tím více stává multimediální záležitostí, zprostředkovatelem webového obsahu se stávají zařízení nejrůznějšího charakteru (tiskárny, mobilní telefony, hlasové čtečky aj.), a ne všechna mají dispozice k interpretaci všech prezentačních tagů.
Standardizační webová organizace W3C (World Wide Web Consortium) tedy zahájila tažení proti nastolenému trendu a v roce 1997 vydala specifikace pro HTML 4, kde se zaměřila na vylepšení struktury dokumentu; pro vzhled stránek měly nadále sloužit především CSS (Cascading Style Sheets). Nový způsob definování vzhledu se díky svým výrazným výhodám (vzhled celého webu bylo možné definovat v externím souboru, což je přehlednější i úspornější) rychle ujal a s přehledem vytlačil tabulkový layout i většinu prezentačních elementů. Nicméně W3C spřádalo mnohem smělejší plány. V roce 1999 uvedlo nový jazyk – XHTML. Ten měl nahradit HTML, jehož vývoj byl oficiálně prohlášen za ukončený. Tento manévr nebyl samoúčelný, ale byl součástí širší strategie. Konsorcium zamýšlelo sjednotit značkovací jazyky pod jedním jednoduchým datovým formátem, kterým se měl stát XML (eXtensible Markup Language).
Cílem bylo dosáhnout maximální konvertibility a umožnit tak snazší práci s daty. Přechod na XHTML také dával naději na překonání chaosu v syntaxi, kterým je zachvácen HTML, a na návrat k čistě strukturovanému kódu. Jenže vývoj XHTML ustrnul hned na samém začátku. První verze byla pouhým reformulovaným HTML a práce na druhé verzi se ujali lidé, kteří se zjevně cítili být povzneseni nad realitu. XHTML 2 tak, jak byl navrhován, byl necitelně inkompatibilní s předchozí verzí, vůbec se nezabýval praktickými potřebami tvůrců webů, zejména se však nedokázal vypořádat s nástupem a rozvojem webových aplikací! Léta ubíhala a zklamání rostlo.
Za této situace přišel opět na řadu zavržený HTML. S myšlenkou na znovuobnovení jeho vývoje vystoupila skupina WHAT WG (Web Hypertext Application Technology Working Group), sdružující zejména řadu tvůrců webových prohlížečů jako Mozilla Foundation, Opera Software či Apple. Nezůstalo jen u myšlenky, přikročilo se i k dílu, které se úspěšně rozvíjelo. V roce 2007 se projekt přesunul "pod křídla" W3C. S XHTML 2 to dopadlo hůře. Ani po bezmála deseti letech se jej nepodařilo dokončit, také se nenašel nikdo, kdo by jevil ochotu ho implementovat.

Zpětná kompatibilita

"Mohli jsme se ještě několik desetiletí mazat s kompatibilitou obtloustlými a těžko použitelnými standardy a házet uživatelům kosti v podobě nových naleštěných funkcí, přišpendlených na zapáchající tělo mrtvoly, a my jsme řekli ano," frustrovaně poznamenal jeden z účastníků internetové diskuse. Narážel tím nepochybně na fakt, že HTML 5 přináší kvantitativní (přidává nové tagy a funkce), nikoliv kvalitativní vylepšení. Fundamentálně se tedy nejedná o změnu, nýbrž o doplnění a rozvoj jazyka. Hlavním přínosem je specifikování javascriptových rozhraní, jako např. Drag and Drop API, Canvas apod. To jistě udělá velkou radost programátorům webových aplikací, ale ke zkvalitnění HTML až tolik nepřispěje. HTML by přitom v jednom ohledu zásadní změnu potřeboval. Dlouhodobě mu totiž schází respektovaná a dodržovaná koncepce. Dosavadní praxí je, že každý si do něj přidává, co chce, a upravuje si jej podle svých potřeb.
Každá vývojová peripetie ale HTML nepříznivě ovlivnila, což si můžeme snadno ověřit porovnáním zdrojových kódů HTML dokumentů z různých období. To vše bylo nutné zohlednit i v návrhu HTML 5. Kvůli zpětné kompatibilitě v něm najdeme vedle nových a důležitých věcí také všechny reminiscence z minula; samozřejmě nemohou chybět prezentační tagy, benevolentní syntaxe ani XHTML. Trochu to připomíná dort, který upekli pejsek s kočičkou. Zažívací potíže z HTML 5 však nikomu, možná s výjimkou parserů, nehrozí, jen se budeme muset smířit s kompatibilitou obtloustlým standardem.
Udržení zpětné kompatibility je ale bohužel něčím, čemu se nedá vyhnout. Bylo nezbytné novou verzi HTML koncipovat tak, aby kontinuálně navazovala na to, co se předtím používalo. Jedině díky tomu totiž mohou prohlížeče implementovat HTML 5 po částech. Jinak by to u tak obsáhlé normy ani nešlo, neboť implementace celé specifikace je práce na mnoho let, navíc ani samotná tato norma ještě není zcela hotova. Jednou z ožehavých věcí, se kterou bylo potřeba se vypořádat, byl například nesoulad mezi platnými normami a současnými implementacemi. Vývojáři prohlížečů totiž standardy příliš úzkostlivě nedodržovali, a tak se stalo, že webové stránky jsou někdy v prohlížečích interpretovány jinak, než by měly být.
Rozpor mezi normami a implementacemi v prohlížečích byl tak velký, že si vynutil důkladné zkoumání toho, jak prohlížeče HTML kód skutečně interpretují, jak ho parsují, jak zpracovávají chyby, jak sestavují objektový model. Toto vše zmapovat, popsat a nakonec promítnout do návrhu HTML 5 nebylo jednoduché i proto, že mezi implementacemi jednotlivých prohlížečů jsou častokrát velké rozdíly a jejich chování není nikde pořádně zdokumentováno.

Syntaxe

Charakteristickým rysem syntaxe HTML je benevolence. Pro kodéra možná příjemná, může si psaní kódu usnadnit různými zkratkami, nebo přímo porušováním pravidel. Prohlížeč si naopak musí to, co v kódu chybí, sám doplnit. Parsování kódu je tím složitější a sestavování dokumentu o to pomalejší.
Dalším charakteristickým rysem syntaxe HTML je nejednoznačnost. Můžeme si to vysvětlit na příkladu elementu s chybějícím koncovým tagem. Zde existují dvě možnosti: buď se jedná o prázdný element (bez obsahu), kam koncový tag nepatří, nebo o neuzavřený element. Aby to prohlížeč správně vyhodnotil a případně si koncový tag doplnil, musí daný element znát. Pokud narazí na neznámý úvodní tag (může jít např. o nový tag, který ještě není podporován, nebo o nestandardní rozšíření jiného prohlížeče), pak nemá šanci podle syntaxe zjistit, zda se jedná o prázdný element, nebo o neuzavřený element.
Typickým příkladem problémů při vývoji HTML může být například deklarace "Doctype". Autoři webových stránek ji pouze opisují, aniž by měli možnost ji nějak smysluplně využít. Mnozí z nich jí ani nerozumí. V HTML 5 se tato deklarace podstatně zkrátí. Teoreticky by bylo lepší deklaraci "Doctype" rovnou odstranit, prakticky by to však bylo dost nešťastné. Z "Doctype", určeného k deklarování DTD, si totiž prohlížeče udělaly přepínač renderovacích režimů. Neuvedení "Doctype" na začátku HTML kódu způsobí, že stránka bude renderována (vykreslena) v tzv. quirk modu. A tak zůstala deklarace "Doctype" v HTML 5 raději ponechána.

Sémantika

Sémantická úroveň současných webových stránek je výrazně neuspokojivá. Převládajícím tagem je sémanticky neutrální

. Nízká diverzita používaných tagů je způsobena tím, že autoři mají dosti chabý výběr. Některé tagy jsou v praxi skoro neupotřebitelné, např. (výstupní data programu) nebo (vstupní data z klávesnice), jiné naopak scházejí. Hodně výstižně tento problém shrnul Dušan Janovský (autor webu JakPsatWeb.cz) již při kritice sémantiky HTML 4:
"Rozvoj HTML tagů jako významových značek ustrnul brzo po rozjezdu WWW, takže dnes sice v HTML máme šest tagů pro nadpisy, osm tagů pro seznamy a tři tagy pro citace, ale nemáme tag pro patičku, navigaci, blok odkazů, není značka pro poznámku pod čarou, viditelné shrnutí článku, viditelný popisek obrázku, nemáme tag pro datum, autora ani pro další druhy informací, které se do HTML jaksi ‚nevešly'. Pro skutečný sémantický popis moderní webové stránky by ale údaje o tom, co je třeba patička, co je reklama, co hlavní text a co je nesouvisející informace, byly zásadně důležité."
V HTML 5 se tento stav mírně zlepšuje. Několik zbytečných tagů bylo vypuštěno (např. již zmíněný
) a mnoho užitečných tagů a atributů přibylo. Kromě toho došlo k reformulaci zbylých prezentačních tagů, byly jim přiděleny významy. Nutno ovšem podotknout, že jejich reformulace se pravděpodobně mine účinkem. Pamatovat si definice významu všech tagů je obtížné, pro rozpoznání významu tagu je tedy zásadní název tagu. Jelikož názvy původně prezentačních tagů se nemění, budou patrně i nadále vnímány jako prezentační.
Na úrovni sémantiky ale záleží! Elektronické dokumenty mají oproti těm tištěným tu výhodu, že je lze snadno, rychle a prakticky bez nákladů zpracovávat. Zpracování dokumentů zahrnuje i analýzu jejich obsahu. Prospěšnost kvalitní analýzy obsahu jistě netřeba dlouze vysvětlovat nikomu, kdo aspoň občas používá vyhledávač. Vyhledávače fungují na principu hodnocení relevance obsahu stránek k zadaným výrazům. Tomuto hodnocení vydatně napomáhá právě sémantika. Zkvalitnění sémantiky by proto znamenalo i kvalitativní vzestup vyhledávacích služeb. Ovšem aby vyhledávače mohly dokonale analyzovat informace na webových stránkách, musely by tyto informace být perfektně sémanticky popsány, aby i strojům bylo zřejmé, co který kus textu představuje. Koncept, který měl vést k sémanticky zvládnuté formě webových stránek, modulární XHTML, sice nedopadl šťastně, což ale neznamená, že je tento koncept špatný. Myšlenka několika základních modulů (snad by stačil i jeden) s několika málo desítkami obecně používaných tagů, k nimž by se daly připojit podle potřeby další moduly, je docela rozumná, vždy však záleží na realizaci. Aby takový koncept v praxi fungoval, musí být splněny tři důležité podmínky:
a) Spektrum tagů musí být dostatečně široké, aby postihlo všechny zásadní typy informací.
b) Musí existovat ochota webových vývojářů na daný koncept přistoupit.
c) Podpora v prohlížečích.
Výhodou modularizace značkovacího jazyka by bylo přehledné uspořádání tagů do jednotlivých modulů, přičemž každý kodér by se seznámil jen s těmi moduly, jejichž tagy potřebuje, nemusel by se učit stovky tagů.

Směr vývoje

Zatímco jinde se prosazuje princip rozdělení datového modelu, uživatelského rozhraní a řídicí logiky do tří nezávislých komponent tak, aby modifikace některé z nich měla minimální vliv na ostatní, tendence vývoje HTML jde přesně opačným směrem. Z původně jednoduchého textového formátu se stala postupem času sofistikovaná technologie pro tvorbu interaktivních webových aplikací, která integruje všechny výše zmíněné komponenty. Samostatný HTML soubor tak může představovat stejně tak statický dokument jako interaktivní client-side aplikaci nebo obrázek či animaci. V HTML 5 se vzájemná provázanost jednotlivých složek, zejména datové a řídicí, prohlubuje. Některé nové tagy a atributy byly přímo navrženy jako součást určitých API, např. nebo draggable. Rovněž se rozrostl počet atributů sloužících jako ovladače událostí (ondrag, onpause, onstorage atd.).
I když z výše uvedeného nepřímo vyplývá, že integrace všech komponent do jedné velké komplikované technologie není žádoucí, nemusí to tak ve skutečnosti být. Důsledné rozdělení jednotlivých složek je výhodné u velkých aplikací a velké aplikace nejsou primárně řešeny na úrovni HTML a klientských skriptů, i když tendence přesouvat výpočetní výkon webových aplikací na klienta je stále zřetelnější. HTML kód je obvykle výstupem technologií nasazených na straně serveru, a schopnost prezentovat v podstatě jakýkoliv typ výstupu může být proto užitečná. Je také třeba podotknout, že každá technologie je jen nástroj, a záleží na lidech, jak dovedně tento nástroj dokáží využívat.
AUTOR@CHIP.CZ
Zdroj: http://www.w3.org/TR/html5/


Základní pojmy
HTML dokument (tj. soubor formátu HTML) je složen z elementů. Ty tvoří strukturu dokumentu. Elementy jsou ve zdrojovém kódu HTML dokumentu vyznačeny tzv. tagy. Jejich psaní se řídí určitou gramatikou, té se říká syntaxe. Tagů je mnoho a mají různé významy a funkce, navíc jsou doplněny atributy (vlastnostmi), které ovlivňují chování elementu nebo zpřesňují či rozšiřují jeho sémantiku (= významový aspekt).


Netypický HTML kód



<link rel="alternate" type="application/rss+xml" title="RSS CHIP Online" href="/rss/feed.php" /> </head><br /><p /Važte si piva křesťané. Až dojde, zlý čas nastane./<br /></html></span><br />Tento HTML kód má sice jisté zvláštnosti – a) u meta tagu chybí uzavírací závorka; b) textový obsah elementů je vepsán mezi lomítka; c) odpadl element body –, ale je bez vady, což může potvrdit i validátor. Prohlížeče ovšem zobrazí prázdnou stránku.<br /><br /><br /><span class="content_class4">Flexibilita virtuální klávesnice</span><br />I mírné vylepšení sémantiky se dá skvěle využít. Dobrým příkladem může být vyplňování nových typů vstupních polí z HTML 5 pomocí virtuální klávesnice. Předností virtuální klávesnice je to, že se na ní zobrazí právě ty klávesy, které jsou aktuálně potřeba. Velice hezky to dokumentoval Jonathan Snook na těchto snímcích.</p> <p> </p> </div> </div> </section> </div> <!-- END OUTPUT from 'themes/chip/templates/page/page--dvd.html.twig' --> </div> <!-- END OUTPUT from 'themes/chip/templates/content/off-canvas-page-wrapper.html.twig' --> </main> <!-- END OUTPUT from 'themes/chip/templates/layout/region.html.twig' --> <footer class="bg-gray-100 text-gray-900 lg:px-6"> <div class="relative bg-gray-0 max-w-[640px] lg:max-w-[1000px] mx-auto w-full py-8 px-6 z-40"> <hr class="relative border-0 h-px bg-gray-200 mb-12 "> <div class="flex gap-10 flex-col lg:flex-row gap-y-4"> <article class="flex flex-col lg:flex-row gap-x-10 gap-y-4 lg:gap-y-0 shrink-0"> <div class="w-fit "> <img src="/vzhled/chip/chip_files/burdaInternational-logo.png" alt="Burda International"> <p class="hidden text-xs lg:block">© 2024 BurdaMedia Extra s.r.o.</p> </div> <div class="flex gap-12"> <ul class="w-fit"> <li> <a href="https://www.chip.cz/predplatne">Předplatné časopisu Chip</a> </li> <li> <a href="https://burda.cz/cs/kariera/volna-mista" target="_blank">Volná místa </a> </li> <li> <a href="https://burda.cz/cs/inzerce/casopisy-pro-muze/chip" target="_blank">Reklama</a> </li> <li> <a href="https://burda.cz/cs/pro-ctenare/podminky-soutezi-a-predplatneho" target="_blank">Obchodní podmínky</a> </li> <li> <a href="https://casopis.chip.cz/dvd/#" id="private_settings">Nastavení soukromí</a> </li> <li> <a href="https://burda.cz/cs/zasady-ochrany-soukromi" target="_blank">Ochrana soukromí</a> </li> <li> <a href="https://burda.cz/cs/content/cookies-zasady" target="_blank">Cookies zásady</a> </li> <li> <a href="https://www.chip.cz/kontakt">Redakce a kontakty</a> </li> <li> <a href="https://burda.cz/cs/vydavatelstvi/kontakt#inzerce" target="_blank"> Inzerce</a> </li> <li> <a href="https://www.chip.cz/rss.xml" data-drupal-link-system-path="rss.xml">RSS</a> </li> <!-- END OUTPUT from 'themes/chip/templates/navigation/menu.html.twig' --> <!-- END OUTPUT from 'themes/chip/templates/block/block--system-menu-block.html.twig' --> <!-- END OUTPUT from 'themes/chip/templates/layout/region.html.twig' --> </ul> </div> </article> <form class="text-gray-500 space-y-3" name="contact_mail_form" action="https://www.chip.cz/submit-newsletter" method="post"> <h2 class="font-bold text-gray-800 text-md">Zajímavosti ze světa IT v e-mailu</h2> <div class="flex flex-col gap-y-2 lg:gap-0 lg:flex-row"> <input class="text-gray-500 rounded-l-lg rounded-r-lg lg:rounded-r-none lg:w-full h-10 border-y border-l border-r lg:border-r-0 outline-none border-gray-300 pl-3.5 focus:border-gray-500" type="email" id="email" name="email" placeholder="Vaše e-mailová adresa" required=""> <button class="uppercase bg-red-400 hover:bg-red-600 py-2 px-8 rounded lg:rounded-r lg:rounded-l-none text-sm text-gray-0 font-semibold w-full lg:w-fit" type="submit">odebírat</button> </div> <p class="text-sm mt-3">Přihlášením k newsletteru souhlasíte s <a href="https://burda.cz/cs/pro-ctenare/podminky-soutezi-a-predplatneho" target="_blank" class="link underline">Obchodními podmínkami společnosti BurdaMedia Extra s.r.o.</a> a potvrzujete, že jste se seznámili se <a href="https://burda.cz/zos/Zasady-ochrany-soukromi.pdf" target="_blank" class="link underline">Zásadami ochrany soukromí Burda</a> - BurdaMedia Extra s.r.o. bude s Vašimi údaji pracovat zejména k organizaci a vyhodnocení akce a zasílání novinek.</p> <label class="flex items-start"> <input class="mr-1 relative w-6 h-6 appearance-none rounded border-2 border-gray-300 checked:border-gray-800 checked:bg-gray-800 after:content-['✓'] after:text-gray-0 after:absolute after:text-sm after:left-1/2 after:-translate-x-1/2 after:z-10 shrink-0" type="checkbox" name="terms"> <p class="text-sm -mt-1"> Chcete navíc dostávat i další zajímavé a exkluzivní informace od našich partnerů? Pokud souhlasíte se zpracováním údajů k tomuto účelu podle <a class="link underline" href="https://burda.cz/zos/Zasady-ochrany-soukromi.pdf" target="_blank">Zásad ochrany soukromí Burda</a>, zaškrtněte toto pole. </p> </label> </form> <p class="block text-xs lg:hidden text-center">© 2003—2022 BurdaMedia Extra s.r.o.</p> </div> </div> </footer> <!-- NEMAZAT --> <script src="/vzhled/chip/src/js/js_5fCoLx7kxf1VA75-rU0Nqq9VQtm5bOBarxBuILcbTPo.js"></script> </div></template></section></div> </body></html>