Přejít k navigační liště

Zdroják » Webdesign » Webdesignérův průvodce po HTML5 – nová sémantika

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

Články Webdesign

V minulém díle jsme se podívali na základní principy, na kterých HTML5 stojí. Dneska se podíváme na to, s čím si ho mnoho kodérů spojuje – změny v sémantice, nové tagy a podobné věci. Představíme si šest sémantických tagů, kterými můžeme nahradit DIVy.

HTML5 (mimochodem, bez mezery to píšu schválně, specifikace se tak oficiálně jmenuje. – pozn. aut.) je poměrně výrazný zásah do způsobu, jakým kódujeme naše HTML dokumenty. Nejen že upravuje sémantický význam u některých starších HTML tagů, ale zavádí také nemalý počet značek nových.

Dnes je většina prvků na stránce spojována do logických celků elementem <div>. Ten nenese žádný sémantický význam, a tak s tím nikdo nemůže strojově pořádně pracovat. Slouží tak prakticky jen k rozdělení dokumentu kvůli stylování. Rozumní kodéři sice dávají takovýmto div ům rozumné atributy class, aby bylo jasné, o co jde, ale pro stroje je tento přístup k ničemu, protože se nemohou spolehnout na to, že autor danou třídu tak pojmenoval schválně. (Situaci poměrně úspěšně řeší Mikroformáty, když standardizují jména tříd, ale o tom už jsme vydali seriál Kódujeme sémanticky s Mikroformáty. – Pozn. aut.)

HTML5 vstupuje do hry s mnoha elementy, které mají za úkol sémanticky popsat různé části dokumentu. Ve specifikaci tak najdeme elementy <article>, <nav> a další. Pokud umíte anglicky, je poměrně snadné uhodnout, co reprezentují.

Ale začněme úplně od začátku…

Doctype

Každý správný HTML dokument má na začátku Doctype, kde říká použitou verzi HTML a kde lze najít DTD.” Tak přesně tuhle větu zapomeňte. HTML5 zavádí <!DOCTYPE html>. Prostě od teď používáme HTML, verze ani umístění DTD nikoho nezajímají. Stejně tu informaci (až na validátory) nic nepoužívalo.

Vypadá to jako radikální krok, ale pokud si uvědomíme, že prohlížeče také umí jen jednu verzi HTML, tak se, pravděpodobně nejen z pohledu autora tohoto článku jedná o krok logický.

Ale proč vypadá Doctype zrovna takhle? Proč není třeba ještě kratší? Důvod je jednoduchý – kompatibilita se současnými prohlížeči. 15 znaků je nejmenší možný počet znaků, který v prohlížečích aktivuje mód standardů.

Takže začít používat HTML5 můžete zcela bezbolestně. Stačí prohodit Doctype, vše bude i nadále fungovat.

Úvod do nových značek

Výborně, již používáme HTML5, tak hurá, jdeme použít nějaké nové sémantické elementy.

Tvůrci specifikace měli volbu: buď mohli vytvořit velkou hromadu nových elementů, které by si nikdo nepamatoval (a nepoužíval), ale pokryly by všechny možné případy užití, anebo cestu, kterou v duchu svých zásad nakonec zvolili: podívat se na současný web, jaké elementy tvůrci skutečně potřebují, a ty prostě implementovat. Dle zásady 80/20 z toho nakonec vypadlo zhruba třicet nových elementů a několika starým byl změněn sémantický význam.

Chování prohlížečů k neznámým elementům

Starší prohlížeče pochopitelně nové sémantické elementy neznají. Což nás ale nemusí trápit, protože se na to při návrhu myslelo, a prohlížeče se k elementu, který neznají, chovají jako by to byl obyčejný inline element. Pokud chceme element blokový, tak stačí použít CSS a  display:block.

Příliš krásné, aby to byla pravda? Ano, já vím…

Internet Explorer (potažmo jádro Trident) v libovolné verzi se sice k neznámým elementům chová jako k inline elementům, ale aplikovat na ně styl už nemůžete. Průšvih. Ale naštěstí my webdesigneři jsme kluci šikovní a víme, že JavaScriptové volání document.createElement("naselement"); zajistí, že i v IE už můžeme element <naselement> stylovat. (Nejsem si jist, kdo byl ten nejšikovnější a přišel s touto technikou. Do obecného podvědomí ji uvedl tvůrce jQuery John Resig.  – Pozn. aut.)

Pokud jste líní psát několikrát document.createElement (jako já), tak Remy Sharp vytvořil HTML5 enabling script. Prostě vložte následující kód do hlavičky vašich stránek:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Případně to, pokud používáte Modernizr, neřešte, Modernizr to vyřeší za vás. (Mimochodem, na Modernizr – viz zprávička –  se určitě podívejte, bude se nám hodit v průběhu celého seriálu čím dál víc. Pozn. aut.)

Nemohu si dovolit riskovat

Mnoho z nás si ovšem nemůže dovolit riskovat, že náš nejdůležitější klient si vypne ve svém IE JavaScript a stránky se mu rozpadnou. To je pochopitelná obava, a ještě pár let se nad tímhle budou muset webdesigneři zamýšlet. Mám pro vás jeden praktický tip – používejte nadále elementy <div>, ale inspirujte se při volbách jmen tříd (a ID) názvy HTML5 elementů. Až za nějaký ten rok uzraje čas a vy budete moci bezstarostně přepnout na HTML5 elementy, tak dáte prostě find&replace.

Prvních šest nových HTML5 elementů

Sekce

Ještě než se pustíme do představení prvních HTML5 elementů, je třeba si představit koncept sekcí (anglicky sectioning content, pokud někdo vymyslíte rozumný překlad, budu vám vděčný. Pozn. aut.).

Některé elementy v HTML5 (konkrétně <article>, <aside>, <nav>, <section>) totiž mají speciální význam – rozdělují obsah stránky na sekce. Každá taková sekce pak může mít svůj <header> a <footer>, HTML5 také zavádí, že může mít i svůj vlastní nadpis <h1>. Specifikace pak říká, že by se důležitost nadpisu měla přepočítat dle toho, jak hluboko je v sekcích zanořen. Ale na to zatím pozor, implementované to nikde není a může to narušit přístupnost vašich stránek.

Elementy

Následujících šest elementů by na vašich stránkách mohlo nahradit převážné množství elementů <div>. Dejte si ale pozor – zatímco <div> sémantický význam nemá a můžeme si ho tedy dávat kam chceme jen proto, abychom mohli stránku nastylovat dle grafického návrhu, tak následující elementy sémantický význam mají, a mají tedy i konkrétní užití. Tentokrát tedy metodu find&replace nepoužívejme.

Pozn. aut.: Část vysvětlení elementů jsem 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.

<section>

Označuje obecný dokument nebo část aplikace. V podstatě je to nějaký obsah, který byste mohli v databázi ukládat jako jeden individuální záznam. Neměl by se používat (až na pár drobných výjimek), pokud pro něj neexistuje přirozený nadpis.

Pár tipů:

  • Nepoužívejte jej jako něco, na co vážete styly či skripty. K tomu slouží  div.
  • <section> je velmi obecný element. Vždy zvažte, zda nemůžete použít nějaký jiný, specifičtější. (Povíme si o nich za chvilku.)
  • Pokud by dávalo význam obalovaný obsah dávat do RSS, tak použijte raději <article> (např. pro články na blogu či komentáře). V praxi tedy zjistíte, že <section> nepoužijete zdaleka tak často, jak si myslíte. A pokud ano, tak něco děláte špatně.

Příklad použití:

<section>
<h1>Nějaký nadpis (jakékoli úrovně)</h1>
<p>obsah</p>
</section>

Dále čtěte

<article>

Označuje část stránky, která je samostatný a nezávislý (na zbytku stránky) obsah. Tento obsah by tedy mělo být teoreticky možné vyjmout ze stránky a zobrazit třeba v RSS čtečce. Typicky tedy <article> obaluje články a komentáře.

<article> běžně také obsahuje hlavičku a patičku, ale samozřejmě nemusí. Do <article> také můžete libovolně vnořovat tagy <article>, <section>  atd.

Častá je záměna tagů <section> a <article>. V podstatě je význam takový, že <article> je jen konkrétněji zaměřený tag <section>. Důležité u něj je právě to, že stojí sám, a k pochopení jeho obsahu nepotřebujete okolní věci na stránce.

Pár tipů kdy použít <article> a kdy <section>

  • Měl by obsah smysl, kdyby byl zobrazen v RSS čtečce? Pokud ano, použijte  <article>
  • Je pochopení obsahu závislé na něčem dalším na stránce? Pokud ano, použijte  <section>
  • Nemá váš obsah žádný sémantický význam? Použijte <div>.

Příklad použití

<article>
    <h1>Webdesignérův průvodce HTML5</h1>
    <p>Tohle je pravděpodobně nějaký chytrý text článku, který vás nepochybně zaujme.</p>
    <p>Zcela překvapivě má i druhý odstavec, což jej dělá ještě více zajímavým.</p>
</article>

Dále čtěte

<aside>

Označuje takový obsah, který je nějakým způsobem spojen s hlavním obsahem stránky, ale který nemusí nutně být jeho součástí. Například tedy odkazy na zdroje k článku (v takovém případě se tag <aside> vyskytuje uvnitř elementu <article>). Také jej lze použít samostatně, poté označuje obsah, který se nějak pojí s celou stránkou, je to tedy takový boční panel.

Tip

  • nezapomínejte, že <aside> vůbec nic neříká o tom, jak se má daný element zobrazovat. Nemusí tedy vůbec být po straně stránky.

Příklad použití

<article>
    <header>
        <h1>Webdesignérův průvodce HTML5</h1>
    </header>
    <p>Chytrý článek o tom, jak začít používat HTML5.</p>
    <aside>
        <dl>
            <dt>HTML5</dt>
            <dd>značkovací jazyk, nástupce HTML 4</dd>
        </dl>
    </aside>
</article>

Dále čtěte

<header>

Označuje skupinu úvodních či navigačních prvků pro danou sekci. Typicky obsahuje nadpis sekce (h1-h6), ale může také obsahovat např. obsah, vyhledávání či logo – prostě funguje jako klasická hlavička stránky.

Příklad použití

<header>
    <p>Právě čtete</p>
    <h1>Webdesignérův průvodce HTML5.</h1>
    <p>Doufám, že jste řádně oslavili ručníkový den.</p>
</header>

Dále čtěte

<footer>

Obdoba <header>. Označuje, jak jinak, patičku své sekce. Typicky tedy obsahuje informace o autorovi, odkazy na zdroje či copyright. Také může ale označovat patičku celé stránky, takže se hodí i pro moderní obří patičky.

Příklad použití

<article>
   Skvělý text článku.
   <footer>
   Geniální autor (tedy vy), všechna možná i nemožná práva vyhrazena.
   </footer>
</article>

Dále čtěte

<nav>

Označuje hlavní navigaci. Nic víc, nic míň. (Pamětníci zamáčknou slzu při vzpomínce na element <menu> , který dělal prakticky to samé. Radši se však neptejte, co dělá v HTML5. Ale o tom příště. Pozn. aut.)

Ovšem co všechno vlastně je ta hlavní navigace?

Kdy použít <nav>

  • Rozhodně pro primární navigaci webu – tedy nějaké konzistentní menu, které provádí uživatele skrz webové stránky.
  • Pokud máte delší článek a někde máte jeho obsah, lze také použít <nav>. Jedná se přeci o primární navigaci pro danou sekci webu.
  • <nav> by se dal teoreticky použít i pro drobečkovou navigaci a stránkování. Ale záleží na vašem uvážení, časem v odborné komunitě určitě vykrystalizuje názor, zda je to tak dobře, či špatně.

Příklad použití

    <nav>
        <ul>
            <li><a href=“/home”>Domů</a></li>
            <li><a href="/about">O nás</a></li>
        </ul>
    </nav>

Dále čtěte

Zase příště

Dnes jsme si pověděli, jak začít kódovat v HTML5, jak prohlížeče pracují s novými elementy a představili si šest základních. Příště se podíváme  na spoustu dalších elementů, které HTML5 přináší.

Mezitím nezapomeňte nastudovat výše zmíněný Modernizr, a pokud vám zbude čas, tak si můžete přečíst historii toho, jak jsme vlastně k HTML5 došli (skvělé čtení v angličtině, ostatně celé Dive Into HTML5 od Marka Pilgrima stojí za přečtení).

Perexový obrázek pro tento seriál vytvořil Tibor Vizi. Děkujeme.

Komentáře

Subscribe
Upozornit na
guest
36 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Michal Kára

Když se dívám, jak abstraktně jsou tyto elementy definovány, tak se obávám, že je stihne stejný osud, jako podobné abstraktní elementy předchozích verzí HTML…

Jiří Kosek

Ono v tuhle chvíli není vůbec jisté, zda ve finální verzi HTML5 zůstanou. Takže je ten osud postihne možná i oficiálně.

Bauglir

Toho bych se v případě elementů jako section, article, nav, header, footer apod. nebál. WebDesigneří se na (IMHO) ně těší :), Uvidíme, co element aside…

tim

obavam sa, ze pre webdizajnerov tieto znacky nemaju vobec zmysel.
ma to zmysel pre tvorcov web-browserov, vyhladavacov, rss-citaciek a podobnych nastrojov, ktore sa snazia spracovat obsah stranky podla vyznamu (semantika).

Bauglir

Jenže webdesigneři, nežijí ve vzduchoprázdnu, nýbrž obklopeni vyhledávači, rss čtečkami a podobnými nástroji.
Navíc nevím, jak vám, ale já rozhodně budu používat (a už používám) radši <header> než <div id=„header“> :), nejsem sémantický fanatik, ale mě nová sémantika potěšila a s vašim přístupem, bychom si vystačili jenom s jediným elementem, který bychom stylovali… to by byl teprve bordel :)

Rado

Ked sa pozriete na koncepciu OO-CSS hned vam nove strukturne znacky v HTML 5 budu davat lepsi zmysel ;)
Majme priklad laveho stlpca na stranke. Su v nom informacie napriklad ako navigacia, rychle vyhladavanie s nejakou poznamkou a napriklad odkazy na odbery informacii z danej stranky.
Chybny pristup je tento lavy blok spravit ako ASIDE. Obsahovo nie vsetky casti (v tomto pripade ziadne) nie su spojene s grom stranky.
Zostava nam teda vyuzitie SECTION alebo DIV. Section je v tomto pripade nevyhovujuce z hladicka vyznamu, pretoze vsetky tri casti laveho menu nemaju rovnaku alebo pribuznu obsahovu hodnotu.
Tak teda pouzijem ako spravne riesenie znacku DIV a do nej nasledne vytvorim 3 vnorene znacky SECTION, pretoze mi uzatvaraju obsah podla vyznamu.


Dalsim specifikom je napriklad NAV. Ian Hickson to zhrnul v jednoduchosti do vety „The blunt answer is “use whenever you would have used class=nav.“
Takze bez vycitkov svedomia pouzivat na primarne navigacie, sekundarne, drobkove navigacie a strankovanie.
Vsetky spomenute navigacie sluzia na orientaciu a pohyb v dokumente (webovej stranky) ktora je rozclenena na niekolko mensich casti, bez ktoreho by sme sa k danym oblastiam nedostali vobec (napriklad strankovanie) alebo s urcitou neakceptovatelnou obtiazou (drobkova navigacia)

Milo

Přeložil bych jako rozdělení obsahu, nebo vrstvení obsahu.

xxx

Nebo třeba „metoda dělení podle obsahu“.

Preklad

Ja by som to prelozil ako: segmentovanie obsahu

v6ak

Umí vyhledávače již toto zpracovat?

Maxell

Vyhledávače s tím zatím nic dělat nebudou, důvody rozepsal Yuhů na http://seo.nawebu.cz/201003/0013.html.

honza.trtik

Hezky uvod do novych elementu html5. Jen bych se mozna vyvaroval nazyvat element aside v kontextu cele stranky bocnim panelem. Neketere kodery by to mohlo vest k tomu, ze budou pouzivat aside pro cele postranni sloupce, jako je napriklad ten napravo na teto strance. >>>>>>>>>
To podle me ovsem neni spravne pouziti, aside by mel obsahovat informace vztahujici se nebo doplnujici sekci (ktera element aside obsahuje) a u kterych nezavisi na umisteni techto informaci. V kontextu cele stranky, napriklad vypisu clanku z nejake kategorie, si dokazu predstavit, ze aside obsahuje popis teto kategorie + napr. nejctenejsi clanky…
V souvislosti s problematikou rozdeleni obsahu (sectioning) a mixovani elementu section a h1-h6 bych jen doplnil nastroj ouliner, ktery vam umozni videt, jak (mozna) rozdeleni stranky vidi napr. vyhledavaci roboty.

František Kučera

„Specifikace pak říká, že by se důležitost nadpisu měla přepočítat dle toho, jak hluboko je v sekcích zanořen.“
Tohle se mi líbí na Docbooku – tam prostě používám pořád jen section, title a para:

<section>
  <title>Nadpis 1. úrovně</title>
  <para>…</para>
  <section>
    <title>Nadpis 2. úrovně</title>
    <para>…</para>
  </section>
  <para>…</para>
</section>

a nějaké H1, H2, H3… nemusím řešit – to se samo odvodí z úrovně zanoření kapitoly. HTML5 by něco takového taky mělo umět, ale škoda, že je to zase jen polovičaté a nesystémové řešení – používat H1 pro nadpis třeba páté úrovně je mi proti srsti a počítat si ty H1-H5 ručně (a při každém přeskupení textu přečíslovávat) je taky otrava.

pas

Není to kvůli nějaké zpětné kompatibilitě? Jakože používejte už jen H1, překousněte jeho nelogický název, a na H2-Hn už kašlete…

Rado

Je to presne kvoli kompatibilite. Vnorene nadpisy bol vymysel XHMTL 2 avsak kedze sme tu uz mali H1 tak sa vyuzil.

František Kučera

„zpětná kompatibilita“ je těžká koule na noze HTML. Obzvlášť s tím zahozením verzování v DOCTYPu bude interpretace H1 (a nejen jich) opravdovou lahůdkou.

Rado

Suhlasim, ze si HTML nesie prilis velku gulu z minulosti a s historickymi skusenostami by v dnesnej dobe vymysleli asi nieco lepsie, alebo by sa vyhli niektorym preslapom. No vtedy to bolo prelomove.
To verzovanie HTML pomocou DOCTYPE je kontroverzna tema. Na jednu stranu pripustam, ze ak pride HTML6, ktore urcite zavedie chovanie niektorych existujucich znaciek trochu inak, tak sa nevyhnu nejakemu rozlisovaciemu elementu.
Na druhu stranu, ak ludia okolo HTML5 ocakavaju rok 2022 kedy bude uplne „dokoncene“ tak mozno ziadne HTML 6 nebude a pride uplne nieco ine a verzovanie uz nebude treba.

Aleš Roubíček

Tenhle je taky dobrej. ;)

Rado

budme radi, ze ludia maju zmysel pre humor :)

xx
1. 6. 2010 20:14 smazal Martin Malý, důvod: Názor porušoval pravidla diskusí – obsahoval zbytečné vulgarismy.
Petr Šimčík

To bude zase masakr, už to vidím jako živý :)
5% webů dělaných profesionály to bude mít použité v pořádku, tak jak se má,
20% webů dělaných „profesionály“ to bude mít využité blbě, ale jenom trochu
a ostatní …

vani

Kdyz vidim jakou ma HTML5 mizernou podporu v IE tak si rikam, ze s implementaci neni treba nekolik let spechat :(
http://www.findmebyip.com/litmus/#target-selector

Rado

IE9.js a jQuery Tools Form riesia dostatocnu medzeru. Ostatne veci zial nie su lahkym orieskom.

Tomáš Kapler

nepleťte si CSS3 a HTML5, naprosto spolu nesouvisí, prohlížeč může umět komplet HTML5 a vůbec CSS3
HTML5 se dá bez problémů používat už dnes, resp. jsou 2 problémy
a) špatné zobrazení v IE bez javascriptu (počet lidí s IE s vypnutým javascriptem se limitně blíží nule, ergo prakticky žádný problém)
b) nesprávné pochopení některých značek vyhledavači – např. to že budu mít všude H1 ovšem pokaždé v jiném kontextu pochopí vyhledavače tak, že všechny nadpisy mají stejnou váhu. Tohle se dá obejít tak, že prostě v aside budu používat i nadále H2 atd., dokument pak i lépe vypadá s vypnutými styly
pak tu jsou ještě drobnosti typu že např. je možné s HTML 5 dát naprosto kterémukoliv elementu HREF (a tag A je vlastně obsolete, protože je to samé co „span href“), což ovšem nechápou ani vyhledavače, ani prohlížeče, takže bohužel zatím je třeba stále používat A

František Kučera

Ad „nesprávné pochopení některých značek vyhledavači – např. to že budu mít všude H1 ovšem pokaždé v jiném kontextu pochopí vyhledavače tak, že všechny nadpisy mají stejnou váhu.“

jj, ale není to chyba vyhledávačů, jako spíš zpraseného návrhu – na tom je vidět, jak je snaha o „zpětnou kompatibilitu“ kontraproduktivní – chtělo by to obecnou značku pro nadpis, která by se dala jednoznačně odlišit od starých h1 a spol – prostě něco, jako má ten Docbook (viz příklad výše).

Pak bude vyhledávač (nebo jakýkoli jiný software) vědět, jak se má k nadpisům chovat – když narazí na h1, tak je to nadpis první úrovně – vždycky. Když narazí na něco jako <title>, tak ví, že si má jeho váhu dopočítat podle úrovně zanoření. Jednoduché a jednoznačné.

Ad „že např. je možné s HTML 5 dát naprosto kterémukoliv elementu HREF (a tag A je vlastně obsolete, protože je to samé co „span href“), což ovšem nechápou ani vyhledavače, ani prohlížeče, takže bohužel zatím je třeba stále používat A“

Zase další objevená Amerika ze strany HTML5 :-) Máme tu XLink, který dokonce funguje a dá se použít v libovolném XML: http://vps.frantovo.cz/disk/xml-odkazy/pokus.xml (minimálně ve Firefoxu).

BTW: zajímavý zdroják – http://www.wowarmory.com

Rado

V tych tabulkach su aj casti HTML5
a) suhlasim je to takmer nulove percento, ludia s vypnutym javascriptom je docela blaznovstvo
b) vyhladavace ? neviem ako je na tom Bing, ale Google s tymto nema problem.
Ano da sa to riesit viacerymi sposobmi, napriklad pouzit H2 namiesto H1 a stratit tak vyhodu konzistencie.
Co sa tyka atributu HREF tak ju v globalnych atributoch jak chcem nechcem vobec nenachadzam. Toto bola vec ohladom XHTML 2 ak si dobre pamatam.

v6ak

Mám pocit, že jsem někde viděl, že globální href mělo být původně zahrnuto, ale výrobci prohlížečů byli proti.
A už i vím, kde jsem to asi poprvé viděl: http://html456.blogspot.com/2008/08/proc-v-html5-neni-univerzalni-odkaz.html

Bauglir

Přesně tak, „href“ coby globální atribut byl odmítnut vendory. Pro linkování zůstává stále element „a“, HTML5 mu ale mění model, teď může obsah i blokový obsah.

noname

aha, tak vidíte, pár měsíců nesleduji vývoj HTML5 a zas je všechno jinak.
Opravdu je A teď takový zvlášní hybrid, který se zobrazuje inline, ale může obsahovat blokové prvky? Tedy něco jako [div style=„displa­y:inline-block“] ? zajímavé.
imho je škoda, že ta podpora href všude neprošla, není rozdíl mezi [a href] a [span href] jako bezvýznamovém elementu a ubylo by zbytečných [li][a href] a podobných zbytečných konstrukcí. Teď když můžu s CSS3 používat třeba vícenásobný background atd. tak bych zas ušetřil pár toho zbytečného balastu

bauglir

1/ není to „něco jako inline-block“, HTML5 už nedělí elementy na blokové a čádkové
2/ porovnáváte neporovnatelné, CSS3 přidává novou funkcionalitu, která do teď nebyla; kotva na rozdíl od toho jenom změnila flow type, byla tu od počátku. Tuším, že vendoři tam viděli nějaké problémy s implementaci na některých elementech a s vnořováním odkazů do odkazů apod.

František Kučera

„Přesně tak, „href“ coby globální atribut byl odmítnut vendory.“
Oproti tomu ale takový XLink už implementovaný mají – např. v SVG.
Minimálně v těchto prohlížečích funguje: Firefox, Safari, Opera, Chrome.
Odmítnutí globálního hrefu celkem chápu – XLink je lepší a systémovější řešení.

Martin Michálek

nesprávné pochopení některých značek vyhledavači – např. to že budu mít všude H1 ovšem pokaždé v jiném kontextu pochopí vyhledavače tak, že všechny nadpisy mají stejnou váhu.

Tomáši, odkud čerpáte? Struktura, kdy více nadpisů první úrovně má v rámci dokumentu stejnou váhu odpovídá starším verzím HTML. V HTML5 záleží v jaké sekci element H1 leží a více elementů H1 na stránce není chyba, ale víceméně nutnost.

Lidsky to rozebírá právě Mark Pilgrim – http://diveintohtml5.org/semantics.html#header-element

Hodně by mě překvapilo, kdyby vlastní vyhledávač společnosti Google, která HTML5 otevřeně podporuje, správné parsování dokumentů v něm vyznačkovaných neuměl.

Jak jsou na tom vyhledávače s parsováním HTML5 by mě ostatně zajímalo obecně, ale asi to neumím s Google. :-)

je možné s HTML 5 dát naprosto kterémukoliv elementu HREF

V aktuální verzi HTML5 href mezi společnými atributy není.

Martin Michálek

To, že nové elementy HTML5 jsou v prohlížečích přednastaveny jako inline mě hrozně překvapilo, kdy jsem novou sémantiku poprvé zkoušel.

Hlavně u Sectioning (např. article) a Heading content (např. header) mě to vůbec nesedí.

Nezná někdo z přítomných důvod?

PeterKahoun

Není to spíš tím, že implementovány nejsou a zachází se s němi tedy jako s elementy neznámého typu?

Martin Michálek

Aha, žil jsem v přesvědčení, že všechny moderní prohlížeče kromě IE ty elementy znají a Modernizr je v IE přidává do DOM.

Kdyby někoho přesně zajímalo:

Javascripty jako Modernizr se v případě IE používají proto, že IE neumí neznámé prvky stylovat a také je nestandardně vkládá do DOM. Více Mark Pilgrim: http://diveintohtml5.org/semantics.html#unknown-elements

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.