Nové značky HTML5

Nedávno byla uvolněna nová pracovní verze specifikace HTML5. Mezi novinkami, které přináší, najdeme i nové značky. Pojďme si představit ty nejdůležitější z nich, konkrétně section, article, aside, header, footer, nav, canvas, video, audio, dialog a figure.

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é embedobject).

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

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

Líbí se vám nové značky HTML5?

Martin Hassman založil a vede magazín Zdroják. Absolvoval VŠCHT Praha. Byl u založení projektu CZilla (dnes už nepamatujete, nevadí). Stavěl mosty a metal cestu pro HTML5 (to tu ještě máme). V GUG.cz organizoval akce pro vývojáře (a jestli neumřeli, kódují si dodnes…).

Komentáře: 95

Přehled komentářů

churchyard Tag video
Timy Re: Tag video
jos Re: Tag video
Martin Hassman Re: Tag video
František Kučera OBJECT
Martin Hassman Re: OBJECT
petr_p Re: OBJECT
Martin Hassman Re: OBJECT
pas Re: OBJECT
Ifo Re: OBJECT
František Kučera Re: OBJECT
Martin Hassman Re: OBJECT
František Kučera Re: OBJECT
Martin Hassman Re: OBJECT
pas Re: OBJECT
Martin Hassman Re: OBJECT
pas Re: OBJECT
Martin Hassman Re: OBJECT
pas Re: OBJECT
Martin Hassman Re: OBJECT
František Kučera Re: OBJECT
pas Re: OBJECT
František Kučera Re: OBJECT
Martin Hassman Re: OBJECT
pas Re: OBJECT
Martin Hassman Re: OBJECT
pas Re: OBJECT
pas Re: OBJECT
Martin Hassman Re: OBJECT
pas Re: OBJECT
MD dialog
Martin Hassman Re: dialog
MD Re: dialog
Martin Hassman Re: dialog
MD Re: dialog
trta Re: dialog
Martin Hassman Re: dialog
František Kučera Re: dialog
paranoiq Re: dialog
František Kučera XML
Radovan Re: XML
Martin Hassman Re: dialog
petr_p Re: dialog
Martin Hassman Re: dialog
František Kučera Re: dialog
Martin Hassman Re: dialog
František Kučera Re: dialog
Martin Hassman Re: dialog
petr_p Re: dialog
karf Re: dialog
petr_p Re: dialog
Peter Kahoun Re: dialog
Blc Kdy to bude finální?
Martin Hassman Re: Kdy to bude finální?
okman Re: Kdy to bude finální?
Martin Hassman Re: Kdy to bude finální?
xurpha Re: Kdy to bude finální?
ivoszz Re: Kdy to bude finální?
tomaash drobna poznamka
Celer Re: drobna poznamka
Martin Hassman Re: drobna poznamka
Anonym xhtml
František Kučera Re: xhtml
pa3k Re: xhtml
František Kučera Re: xhtml
stoural Re: xhtml
stoural Re: xhtml
Jakub D. Re: xhtml
MD Re: xhtml
pa3k Re: xhtml
Jirka Kosek Re: xhtml
Leinad Re: xhtml
Martin Hassman Re: xhtml
Anonym Re: xhtml
Martin Hassman Re: xhtml
Matěj video
Martin Hassman Re: video
pas Re: video
Martin Hassman Re: video
smilelover Semantika?
Martin Hassman Re: Semantika?
František Kučera Re: Semantika?
František Kučera Re: Semantika?
petr_p Re: Semantika?
Martin Hassman Re: Semantika?
Martin Michálek Re: Semantika?
Martin Hassman Re: Semantika?
smilelover Re: Semantika?
Martin Hassman Re: Semantika?
La Coste RE: Nové značky HTML5
Martin Michálek autorská práva
Martin Hassman Re: autorská práva
Martin Michálek Re: autorská práva
harvie YouTube, tag video, titulky, javascript api, atd...
harvie Mobilní youtube
Zdroj: https://www.zdrojak.cz/?p=3000