Detailní přehled novinek HTML5 najdete v dokumentu HTML 5 differences from HTML 4, jehož nová verze se objevila před několika dny. My se v článku soustředíme na ty nejdůležitější nové značky.

Strukturování dokumentu

Stávající HTML příliš možností k vyznačení struktury dokumentu neobsahovalo. Kde začíná stěžejní obsah stránky? A kde je navigace? Co je jen záhlaví a co patička? Nic z toho nešlo sémanticky vyznačit. Pokud jste chtěli uživateli pomoci, nezbývalo než vytvořit odkazy typu „Přeskoč na obsah“, „Přeskoč na navigaci“.

HTML5 několik takových značek nabízí. Jedná se o:

• section
• article
• aside
• header
• footer
• nav

Jejich význam je nejspíš patrný již z názvu, snad jen dodáme, že aside vyznačuje boční panel (tedy obsah, který je poněkud méně vázán k hlavnímu obsahu stránky), značka nav pak vyznačuje navigaci na webu.

Přínos budou mít jak pro vývojáře (snazší vyznání v dokumentu), ale hlavně pro stroje, ať už se jedná o prohlížeče nebo o roboty vyhledávačů (které tak snadno identifikují, kde je umístěn hlavní obsah stránky, které odkazy ve stránce jsou navigační atd.).

Mediální značky

HTML5 obsahuje tři značky zaměřené na média:

• canvas
• video
• audio

Canvas

Značka canvas je jakési plátno, do kterého můžete generovat (kreslit) vlastní obsah. Nabízí se pro řadu použití, může zobrazovat vygenerovaný statický obrázek, interaktivní obrázek (graf reagující na ovládání uživatele) nebo třeba upravený výstup videa. Více se o této značce dočtete tady na Zdrojáku v článcích označených štítkem canvas.

Video

Vkládali jste někdy do stránky video? Pak jste se mohli setkat např. s takovýmhle kódem:

<embed type="application/x-shockwave-flash"
  src="/static/cz/shared/app/MediaCenter.swf"
  quality="high"
  wmode="transparent"
  allowfullscreen="true"
  flashvars="media_id=431380&bit=1225473403624233743826&color=#000000&autostart=true"
  width="440"
  height="288"> 

Anebo také s kódem úplně jiným. Obecně téměř platí, že co jiný web, to jiný způsob vkládání videa. Čert aby se v tom vyznal. A nejenom čert – pro takový internetový vyhledávač to je stejný problém. Pokud by chtěl indexovat všechna videa na webu (což by jistě chtěl), nemá jak (zkuste najít způsob, jak z kódu uvedeného výše spolehlivě zjistit, že se jedná o vložení videa, a jaká je adresa onoho videa – nejde to).

Video na webu je doménou posledních několika let, není divu, že s ním nikdo při tvorbě HTML4 nepočítal. HTML5 proto zavádí novou značku, jejíž syntaxe je následující:

<video src="soubor.ogg"></video> 

Oč by byla práce s videem na webu snazší, kdyby se na podobně značce výrobci prohlížečů dohodli už dávno.

Audio

Ze stejného důvodu HTML5 zavádí i značku pro přehrávání zvuku audio. Její použití je analogické. Jak audio, tak video nabízí jednotné rozhraní pro práci s videm (audiem), ale jeho detailní popis by vydal na samostatný článek.

Rozhovory

Dalším často opakovaným prvkem na webu jsou rozhovory (minimálně na zpravodajských webech typu Zdroják). HTML5 pro ně zavádí novou značku dialog, v rámci které recykluje značky z definičního seznamu. Ukázka použití:

<dialog>
 <dt>Romeo</dt>
 <dd>Má drahá Julie, jak se ti daří?</dd>
 <dt>Julie</dt>
 <dd>Romeo, ach můj Romeo, to jsem ráda, že jsi opět online.</dd>
 <dt>Romeo</dt>
 <dd>Vůbec si nedovedu představit, jak by náš vztah mohl po mém
     vyhoštění z města pokračovat, kdyby nebyl internet.</dd>
</dialog> 

Svazující značka figure

Značka figure spolu svazuje mediální a textový obsah. Může se jednat o obrázek a jeho popis, nebo o video a jeho popis (podobně i o další značky, ať již nový canvas nebo klasické embed a  object).

Podobný vztah jsme dosud vyznačit nemohli. Pro obrázek existoval pouze jeho alternativní popis (atribut alt), ale ten má specifický případ použití. Příklad použití značky figure:

<figure>
 <img src="obr.png">
 <legend>Mapa Středozemě</legend>
</figure> 

V příkladu si všimněte jedné zajímavosti. U obrázku není použit atribut alt. To proto, že by v tomto konkrétním případě byl zcela zbytečný, alternativní obsah místo obrázku jsme totiž uživatelům nabídli, jen jiným způsobem. Jedná se o jeden z mála případů, kdy vynechání atributu alt specifikace povoluje.

Závěr

Uvedli jsme si jen ty nejdůležitější nové značky, které přinese HTML5 (ve skutečnosti je těch nových značek mnohem víc). Některé z výše uvedených značek můžete při troše opatrnosti používat na webu již dnes (např. canvas). Ale obecně ovšem platí, že byste se jim zatím měli raději vyhnout, pokud si nejste jisti, co jejich použití udělá v tom kterém prohlížeči. Na podporu řady z nich si ještě chvíli počkáme.

Další informace

• Přehled HTML značek
• Rozdíly mezi HTML4 a HTML5
• Připravovaná specifikace HTML5

Obrázek v perexu pochází z Flickeru uživatele justinsomnia.