Webdesignérův průvodce po HTML5 – nová sémantika II

HTML 5

Další týden, další porce informací o HTML5. Dnes dokončíme přehled nových elementů, povíme si o několika změnách u některých starých známých a ukážeme si pár zjednodušení, které HTML5 vnáší do běžně používaných věcí.

Seriál: Webdesignérův průvodce po HTML5 (21 dílů)

  1. Webdesignérův průvodce po HTML5 – díl nultý 25.5.2010
  2. Webdesignérův průvodce po HTML5 – nová sémantika 1.6.2010
  3. Webdesignérův průvodce po HTML5 – nová sémantika II 8.6.2010
  4. Webdesignérův průvodce po HTML5 – pohyblivé obrázky 15.6.2010
  5. Webdesignérův průvodce po HTML5 – používáme pohyblivé obrázky 22.6.2010
  6. Webdesignérův průvodce po HTML5 – taháme data od návštěvníka 29.6.2010
  7. HTML5 Audio: rádio ve vašich stránkách 13.7.2010
  8. Webdesignérův průvodce po HTML5: Microdata 20.7.2010
  9. AppCache: webové aplikace i bez připojení 27.7.2010
  10. Webdesignérův průvodce po HTML5: WebStorage 3.8.2010
  11. Webdesignérův průvodce po HTML5: Multithreading s WebWorkers 10.8.2010
  12. Webdesignérův průvodce po HTML5: Databáze v prohlížečích 17.8.2010
  13. Webdesignérův průvodce po HTML5: Shrnutí a rozhrnutí 24.8.2010
  14. HTML5: ukládáme si data k elementům 6.12.2010
  15. Webdesignérův průvodce po HTML5: Táhni a srůstej 5.1.2011
  16. HTML5: První krůčky s FileSystem API 15.2.2011
  17. Mobilizujeme web v HTML5 4.4.2011
  18. Single Page Apps a řešení problémů s historií 1.6.2011
  19. Page Visibility API: Kouká na mě vůbec někdo? 10.8.2011
  20. Práce se soubory v prohlížeči, díl 1 15.8.2011
  21. Práce se soubory v prohlížeči, díl 2 5.9.2011

Na úvod

Začněme tam, kde jsme minule skončili. Probrali jsme strukturální elementy <article>, <aside>, <nav>, <section> a navíc jsme přibrali <header> a <footer>. Začali jsme s nimi schválně, protože tyto nové elementy jsou to, s čím si lidé často HTML5 pojí (ač jsou jen malou částí specifikace).

Pokud jste sledovali komentáře, tak jste si jistě všimli, že Jirka Kosek (který je mj. podepsán pod základními principy tvorby HTML5, které jsme probírali v nultém díle seriálu) psal, že tyto elementy se možná nedostanou se do finální specifikace. A takový komentář určitě zaslouží pár slov na vysvětlenou.

HTML5 se neustále vyvíjí a pochopitelně okolo nových elementů je stále dost kontroverze. Vždyť i HTML5 Super Friends se přimlouvali například za vypuštění elementu <article> v obavě, že webdesigneři nepoznají rozdíly a nové elementy budou pro sémantiku spíše danajský dar (což je stále dost dobře možné, pozn. aut.). Od té doby už uplynula spousta času a elementy zůstaly. Jirka Kosek měl tedy pravděpodobně na mysli nedávné (květen 2010) návrhy na vypuštění několika nových elementů ze specifikace (mj. také <aside>). Rychle se ale objevily naopak hlasy pro zachování těchto elementů. Jak to dopadne, nikdo neví, autor článku by si ale celkem vsadil, že zůstanou.

Proč to vůbec takhle rozebíráme? Protože to dobře demonstruje situaci kolem celého seriálu. Píšeme o něčem, co se neustále vyvíjí. Je možné, že vydáme článek a druhý den se specifikace změní. Tato nejistota by vás však neměla zastavit v testování a používání HTML5. Akorát prosíme – používejte zdravý rozum. Pokud se vám nějaká část současného HTML5 líbí a pomůže vám v práci, použijte ji a netrapte se tím, že zítra se specifikace změní. Vždyť vám to přece pomohlo. A pokud se vám naopak nějaká část nelíbí, tak ji prostě nepoužívejte. Třeba se bude zdát podivná i dalším lidem a ještě s tím autoři specifikace něco provedou. (Proaktivně se můžete také zapojit do diskuse ve veřejném mailing listu W3C a změnu iniciovat.)

Další zajímavé a užitečné elementy z HTML5

Nebudeme zde v seriálu rozebírat všechny nové elementy v HTML5 (minimálně do doby, než budou opravdu kodifikované), dovolíme si vybrat pouze ty, které nás nějak zaujaly. Pokud vás zajímají všechny, můžete se podívat na HTML: The Markup Language. A pokud jsme zapomněli váš oblíbený, určitě jej zmiňte v komentářích. Na případné dotazy a dohady je pak místo na fóru.

Pozn. aut.: Část vysvětlení elementů jsem znovu převzal z HTML5Doctor.com, odkaz na konkrétní článek, stejně jako na specifikaci, najdete vždy u konce vysvětlení konkrétního elementu.

<hgroup>

Označuje skupinu souvisejících nadpisů. Pokud bychom pak dělali outline (například pomocí HTML5 outliner) stránky, tak by se v něm objevil jen ten nejdůležitější nadpis z celé skupiny. <hgroup> tak má použití hlavně u článků s podnadpisy.

Tipy

  • Pokud máte jen jeden nadpis <h1><h6>, tak <hgroup> nepotřebujete.
  • Naopak pokud máte nadpis a podnadpis (oboje <h1><h6>), tak je slučte dohromady pomocí  <hgroup>.

Příklad použití

<hgroup>
    <h1>HTML5</h1>
    <h2>aneb chaos v hlavách webdesignérů</h2>
</hgroup>

Dále čtěte

<time>

Označuje buď údaj o čase nebo přesné datum na Gregoriánském kalendáři, volitelně s údajem o čase a časovém pásmu.

Pamatujete na náš seriál o Mikroformátech a problémy s abbr design pattern? Element <time> nedělá nic jiného, než řeší všechny ty problémy a nabízí jasně specifikovaný formát času a data pro stroje a zároveň nám ponechává volnost nabídnout návštěvníkům webu jakýkoli formát data a času chceme.

Příklady

<time datetime="2009-11-13">13 listopadu 2009</time>
<time datetime="010-11-13T020:00+01:00">Narozeninová párty v Praze</time>

Použití

Jasně se nabízí využití v kombinaci s Mikroformáty/RDFa/Mi­crodata například pro označení toho, kdy se koná jaká akce. V kombinaci s Mikroformátem hCard by to mohlo vypadat například takto:

<div class="vevent">
    <a class="url" href=">http://www.web2con.com/">http://www.web2con.com/</a>
    <span class="summary">Web 2.0 Conference</span>:
    <time class="dtstart" datetime="2007-10-05">October 5</time> -
    <time class="dtend" datetime="2007-10-20">19</time>,
    at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>

Pubdate

Další možné použití je v kombinaci s novým atributem „pubdate“ (typu boolean). Ten označuje publikování nejbližšího nadřazeného elementu <article>. V takovém případě je samozřejmě vyžadováno, aby element <time> obsahoval datum. Atribut „pubdate“ nesmí být použit ve chvíli, kdy neexistuje žádný nadřazený element <article>.

Například to může vypadat takto:

<p>Tento článek byl publikován <time datetime="2010-06-08" pubdate>8 června 2010</time>.</p>

Dále čtěte

<figure> a <figcaption>

Definice by zněla asi tak, že <figure> označuje doplňkový obsah k hlavnímu obsahu, který je teoreticky možno vyjmout bez ovlivnění významu hlavního obsahu. Tento obsah může mít popisek ( <figcaption>).

Řečeno jednoduše pomocí příkladu – je to obrázek v článku, který může mít volitelně popisek ( <figcaption>). Další použití by mohlo být třeba u článku s ukázkou zdrojového kódu.

Problém, jak tento často se vyskytující obsah označit, měl v průběhu tvorby specifikace mnoho řešení a vedly se okolo toho bouřlivé debaty. Nedávno se to trošku ustálilo právě na tomto řešení, ale nikde není zaručeno, že se to zase rychle nezmění.

Příklad

<figure>
    <img src="/hixie.jpg" alt="Hixie je napaden bandou HTML5 Super Friends">
    <figcaption>Záběr z nového akčního filmu o vzniku HTML5</figcaption>
</figure>

Čtěte dále

<embed>

Určitě znáte element <embed>, který se často používá pro vkládání pluginů (typicky Flash) do stránek. Ale víte, že <embed> není součástí ani HTML 4.01 ani XHTML 1? HTML5 tento nedostatek jednoduše opravuje. Netřeba rozvádět.

Spec  – the embed element

<video>, <audio> a <canvas>

Když mluvíme o nových elementech, nelze tyto tři opominout. Ale protože jsou skutečně velmi zajímavé, budeme jim věnovat samostatné články, o <video>  a <audio> si povíme již příští týden, <canvas> přijde někdy potom (ostatně články o základech Canvasu a jeho používání už na Zdrojáku v minulosti vyšly).

Změny v sémantice existujících tagů


Foto: laffy4k. Publikováno pod licencí CC-BY

Autoři HTML5 elementy jen nepřidávali, ale také občas měnili význam těch stávajících. Pojďme se podívat na některé důležité či zajímavé změny.

<i>, <b>, <em>, <strong>

Pamatujete, jak se říkalo, že <i> a <b> nejsou sémantické elementy a neměly by se používat? Tak to zase zapomeňte, HTML5 redefinuje <i> a <b> a dává jim sémantický význam.

Podívejme se na jednotlivé elementy v porovnání mezi sebou:

<i>  – část textu, která by měla být čtena jinak, než okolní text. Například tedy cizí slova.

<b>  – část textu, která je stylisticky odlišná od zbytku textu. Například tedy klíčová slova a typograficky tučný text.

<em>  – část textu, na kterou byste při čtení dali důraz.

<strong>  – část textu, která je prostě důležitá.

Čtěte dále

<small>

Element, který dříve označoval text, který prohlížeče vykreslovaly menším písmem, nyní dostal také nový význam a označuje poznámky k textu. Obvykle se používá pro různé legální poznámky, jako třeba odkazy na licence obrázků, použitých fontů aj. Pozor – jedná s o inline element, nepoužívejte jej tedy místo <p>  apod.

Příklad

<p><small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small></p>

Čtěte dále

<hr>

Označuje tématickou pauzu v textu. V podstatě to znamená konec jedné sekce a začátek jiné, tedy to samé jako </section> <section>. Používat <hr> se tedy doporučuje hlavně pro oddělení tématických pauz v textu, jako například části básně či jednotlivé scény v románu.

<cite>

Nově označuje titulek díla, ze kterého je citováno. Pro zájemce proč a jak, doporučujeme článek The Cite Element In HTML 4.01 and HTML5.

<a>

Nebojte, HTML5 nikterak nemění význam ani funkci odkazů. Nově nám ale umožňuje obalit elementem <a> celé odstavce, sekce a jiné blokové elementy. Takže například takováto konstrukce je nyní již korektní. Hurá!

<a href="http://zdrojak.root.cz">
    <section>
        <h1>Webdesignérův průvodce HTML5</h1>
        <p>Vychází již třetí díl seriálu a vypadá to, že se povede udržet týdenní periodicitu.</p>
    </section>
</a>

<script>

U elementu <script> proběhlo několik změn. Nově nemusíme uvádět type="text/javascript", přibyl atribut „async“, který má zajišťovat asynchronní zpracování skriptu a atribut „defer“, který naopak pozdrží vykonávání až na okamžik, kdy byl dokument zparsován. Atribut „type“ můžete přestat uvádět již dnes, s ostatním to bude chtít počkat na podporu v prohlížečích.

Spec – script

<link rel=„stylesheet“ …>

Další drobné zjednodušení, které přináší HTML5, spočívá v tom, že rel stylesheet má nyní defaultní hodnotu type="text/css", takže ji není třeba zadávat. Prohlížeče to již dnes umí, takže atribut type můžete vyhodit ze svého HTML ještě dnes.

Zavržené elementy: <big>, <tt>

HTML5 neobsahuje dnes stejně již prakticky nepoužívané prezentační elementy <big><tt>.

<meta charset>

V našich krajích určitě všichni víme co to je kódování, všichni jsme s ním měli problémy a můžeme vyprávět veselé historky z vyvíjení, kde kódování hraje hlavní roli. A pokud celý život neposíláte kódování v HTTP hlavičce dokumentu, tak určitě znáte následující zápis v HTML4.01:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Pěkná věc, jedna z těch, kterou člověk pokaždé zkopíruje a inepamatuje si, kam ty zatracené uvozovky napsat. A tak nám někteří začátečníci (ale nejen oni) dělají třeba tohle:

<META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1>

Vidíte rozdíl? Chudák webdesigner zapomněl na uvozovky! A najednou to vypadá, jako bychom tu měli samostatný atribut charset. Jak z toho má prohlížeč zjistit kódování? Nebo by ho snad měl tipnout? Tvůrci prohlížečů usoudili, že raději implementují charset jako samostatný atribut, aby tuhle častou chybu ošetřili.

A hurá – tvůrci HTML5 to vědí, a tak nám zkrátili celý ten zdlouhavý zápis na jednoduchý:

<meta charset="utf-8">

Není to nádhera? A nejlepší na tom je, že to z výše uvedených důvodů funguje již dnes. Pokud nevěříte, tak se podívejte na testy.

Závěrem

Tak si to shrňme. Spousta nových elementů (a to jsme ještě pořádně nemluvili o atributech, ale to si nechme na někdy jindy, už takhle je tenhle článek příliš dlouhý), změny u některých starých (hlavně návrat <b> a <i> některé jistě zaskočí) a mnoho drobných zjednodušení, které nám umožní napsat rychle základy dokumentu a pak dlouze přemýšlet nad tím, jaká část má jaký sémantický význam. Autorovi článku se to takhle docela zamlouvá. Co vám?

Příště přijde řada na <audio> a hlavně <video>. Povíme si, o čem se vedou spory, jaká je podpora a ukážeme si možnosti, jak uživatelům prohlížečů podporujících <video> ukázat video v něm a zbytku přehrát video ve flashovém přehrávači.

(Skoro se stalo hezkou tradicí, že na závěr článku jsem vždy zmínil nějaké zajímavé odkazy k dalšímu studiu. Dneska žádné nemám, a tak doufám, že místo toho si vyzkoušíte napsat nějaký webík v HTML5. Pozn. aut.)

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 37

Přehled komentářů

Radek Hulán Tato nejistota by vás však neměla zastavit v testování a používání HTML5
Martin Michálek Re: Tato nejistota by vás však neměla zastavit v testování a používání HTML5
Radek Hulán Re: Tato nejistota by vás však neměla zastavit v testování a používání HTML5
Martin Michálek Re: Tato nejistota by vás však neměla zastavit v testování a používání HTML5
Jan Sládek Re: Tato nejistota by vás však neměla zastavit v testování a používání HTML5
bauglir Re: Tato nejistota by vás však neměla zastavit v testování a používání HTML5
Martin Malý Re: Tato nejistota by vás však neměla zastavit v testování a používání HTML5
bauglir Re: Tato nejistota by vás však neměla zastavit v testování a používání HTML5
Martin Malý Re: Tato nejistota by vás však neměla zastavit v testování a používání HTML5
bauglir Re: Tato nejistota by vás však neměla zastavit v testování a používání HTML5
František Kučera Raději minimalismus pokud jde o formáty
bauglir Re: Raději minimalismus pokud jde o formáty
Jan Kodera Re: Tato nejistota by vás však neměla zastavit v testování a používání HTML5
František Kučera Re: Tato nejistota by vás však neměla zastavit v testování a používání HTML5
tomaash Ano, ale proč to ?
Martin Michálek Re: Ano, ale proč to ?
Jan Sládek Re: Ano, ale proč to ?
bauglir Re: Ano, ale proč to ?
Martin Michálek Re: Ano, ale proč to ?
bauglir Re: Ano, ale proč to ?
juraj to html5 nie je až taký zázrak
bauglir Re: to html5 nie je až taký zázrak
juraj Re: to html5 nie je až taký zázrak
bauglir Re: to html5 nie je až taký zázrak
Makovec Re: to html5 nie je až taký zázrak
bauglir Re: to html5 nie je až taký zázrak
František Kučera Re: to html5 nie je až taký zázrak
bauglir Re: to html5 nie je až taký zázrak
František Kučera Re: to html5 nie je až taký zázrak
bauglir Re: to html5 nie je až taký zázrak
peter Re: to html5 nie je až taký zázrak
bauglir Re: to html5 nie je až taký zázrak
František Kučera Re: to html5 nie je až taký zázrak
peter Re: to html5 nie je až taký zázrak
bauglir Re: to html5 nie je až taký zázrak
ic async a defer
frankiex sémantika?
Zdroj: https://www.zdrojak.cz/?p=3249