HTML5

Logo HTML5 od W3C

HTML5 je v informatice verze značkovacího jazyka HTML sloužícího pro tvorbu webových stránek. Finální specifikace byla vydána 28. +more října 2014. Proti předchozí verzi HTML4 z roku 1997 přináší podstatné změny, přičemž mezi nejdůležitější patří přímá podpora přehrávání multimédií v prohlížeči a podpora pro aplikace, které fungují i bez připojení k Internetu.

HTML5 obsahuje podrobné modely zpracování pro podporu interoperabilnějších implementací; rozšiřuje, zlepšuje a racionalizuje značkování dostupné pro dokumenty a zavádí značkovací a aplikační programovací rozhraní (API) pro složité webové aplikace. Ze stejných důvodů je HTML5 také kandidátem pro mobilní aplikace pro různé platformy, protože obsahuje funkce navržené s ohledem na zařízení s nízkou spotřebou.

Charakteristika

Specifikace HTML5 je složena z několika víceméně nezávislých částí, například:

* nové HTML značky (tagy) sémanticky definující strukturu stránky, * perzistentní úložiště formou asociativního pole, * relační databáze s podporou transakcí, * podpora offline aplikací.

Některé z navržených funkcí HTML5 implementovalo rozšíření pro prohlížeče Google Gears. Google se rozhodl vývoj Gears postupně pozastavit ve prospěch nativní podpory HTML5 ze strany prohlížečů. +more Součástí HTML 5. 1 se stal DRM. API pod HTML5 umožňuje zjišťovat stav baterie zařízení, což ale může vést k identifikaci zařízení a jeho sledování.

Novinky

HTML verze 5 se od verze 4 liší novými, zkrácenými a rychlejšími zápisy značek. Autoři dávají důraz na jednoduchost a zároveň účinnost. +more HTML5 je též možné vytvořit aplikaci, která funguje v prohlížeči i tehdy, když uživatel nemá internetové připojení, a která ukládá data do lokálního úložiště na uživatelově počítači. Je-li internetové připojení k dispozici, může aplikace synchronizovat data se vzdáleným serverem.

Má-li aplikace fungovat v offline módu, je nutné vytvořit tzv. cache manifest, což je seznam souborů, jež mají být přístupné lokálně. +more Jméno souboru s tímto seznamem se uvede jako vlastnost prvku html, např. . Jako perzistentní úložiště lze využít buď relační databázi, nebo asociativní pole localStorage přístupné přes objekt window. Kromě localStorage existuje navíc objekt sessionStorage, v němž je možné uchovávat data po dobu trvání sezení.

DOCTYPE

První změnou je nová specifikace typu dokumentu, tedy DOCTYPE. Zápis se oproti předchozím verzím hodně zkrátil, už není potřeba udávat dlouhé zápisy o verzi a DTD specifikaci dokumentu, takže dokument HTML5 by měl správně začínat prostým zápisem:

Výhodou je, že všechny dnešní prohlížeče novému zápisu rozumí a stránky zobrazí ve standardním zobrazovacím režimu.

Jazyk dokumentu a kódování

Zadání jazyka dokumentu se na rozdíl od předchozího zápisu ve značce metadat content-language také podstatně zjednodušil na prostou informaci v kořenovém prvku, obvykle .

Údaje o kódování dokumentu se zapisují oproti dřívějšímu delšímu zápisu

pomocí jednoduchého řádku

Kódování samozřejmě může být i jiné. V uvedeném příkladu jsou také údaje o směru psaní textu podle jazyka. +more Ltr znamená zleva doprava (left to right), zprava doleva je to pak rtl (right to left).

Struktura HTML dokumentu by pak měla vypadat podobně:

Titulek stránky

Tělo stránky

Struktura

HTML5 se také zaměřilo na sémantiku webových stránek a převážně na zvýšení přehlednosti zdrojového kódu. Většina stránek je dnes tvořena obvyklými částmi, jako je hlavička, různé sloupce a patička. +more Tyto části jsou odlišeny pomocí prvku div a jeho vlastností id nebo class, protože v současné verzi HTML 4 žádné speciální prvky na toto rozlišení nejsou.

V HTML5 jsou proto zavedeny tyto nové značky, které jsou určeny na strukturování stránek: * <section> - představuje části stránky, např. kapitoly * <article> - představuje nezávislé části stránky, např. +more články nebo komentáře * <main> - představuje hlavní obsah stránky * <aside> - představuje části stránky, které jen nepatrně souvisí se zbytkem stránky, např. poznámky stranou * V návrhu WHATWG: <hgroup> - představuje skupinu nadpisů (<h1> - <h6>) * <header> - představuje hlavičku, může obsahovat například nadpis nebo navigační odkazy * <footer> - představuje patičku, může obsahovat informace o autorovi nebo autorských právech * <nav> - představuje část stránky, která je určena k navigaci * <figure> - představuje samostatný obsah stránky, který doplňuje hlavní stať, ale není její součástí, např. obrázek, graf, video nebo ukázka kódu * <figcaption> - představuje popisek pro <figure>.

Příklad struktury stránky:

Funkce

HTML5 dále přidává několik nových funkcí ke zvýraznění drobných anomálií, dalšímu odlišení struktury nebo práci se skriptovacími jazyky.

V HTML5 jsou dále zavedeny tyto nové prvky: * <mark> - zvýrazňuje text * <progress> - zobrazuje stav dokončení dané úlohy (průběh), např. u stahování nebo načítání * <meter> - zobrazuje velikost, např. +more využití paměti * <time> - označuje datum a čas * V návrhu WHATWG: <data> - označuje obsah strojově-čitelnou hodnotou * <dialog> - představuje dialog * <ruby>, <rt> a <rp> - označuje ruby anotace, např. k arabštině * <bdi> - označuje text psaný v jiném směru než text okolní, např. v arabštině * <wbr> - přidává možnost zalomení textu * <menuitem> - představuje příkaz, který může návštěvník stránky vyvolat z kontextového menu * <details> - představuje dodatečné informace, které mohou být čtenáři dostupné např. po kliknutí nebo najetí myši * <summary> - představuje shrnutí, popisek, nebo legendu pro * <keygen> - ovládá vygenerování páru klíčů k certifikátu * <output> - představuje výstup, např. výsledek početní operace.

Multimediální obsah

Ve starších verzích (HTML v4. 01 a starší) neexistují prostředky, které by úspěšně pracovaly s vkládáním multimédií, proto jsou využívány různé pluginy nebo Flash. +more Tento problém se HTML5 také snaží vyřešit.

Zavádí proto tyto značky: * HTML5 video| - vkládání videa * HTML5 audio| - vkládání audia * <source> - definuje alternativní verze videa nebo audia souboru, z nichž si prohlížeč vybírá ty, které podporuje * - vkládá stopu pro či Zůstává značka pro vložení kontejneru s externí aplikací nebo pro interaktivní obsah.

Příklady:

Canvas

Další novinkou je prvek HTML5 canvas|, který umí interpretovat vektorovou grafikou s možností vkládat obrázky. Lze na něj kreslit prostřednictvím skriptovacích jazyků na straně klienta s použitím kontextových metod, mj. +more pomocí grafických primitiv. Použití jako např. grafy reagující na ovládání uživatele.

Formuláře

Ukázka HTML5 formulářů v Opeře Formuláře dostaly nové dva atributy: * autocomplete - který vybraným vstupním prvkům povoluje automatické dokončování, a * novalidate - který vypíná validaci hodnot vstupních prvků Tyto atributy se mohou doplňovat se stejně nazvanými atributy u jednotlivých vstupních prvků formuláře, např. +more pro vytvoření výjimky.

Nové atributy vstupních políček

Při návrhu formulářů je dnes k dispozici pouze málo možností, se kterými se musí vystačit. HTML5 zachovává značku , ale její parametr type rozšiřuje o následující možnosti:

* tel - zadání telefonního čísla včetně ověření, zda je formát správný * search - vyhledávací pole * url - adresa URL * email - zadání e-mailové adresy včetně ověření, zda je formát správný * datetime - zadání data a času s ohledem na časová pásma * date - zadání data * month - zadání měsíce * week - zadání týdne * time - zadání času * datetime-local - zadání data a času bez ohledu na časová pásma * number - zadání čísla * range - výběr číselné hodnoty z rozsahu, který se nastaví vlastnosti min a max * color - výběr barvy včetně převedení do textového formátu

Zápis:

Mezi další nové atributy vstupních polí patří: * autocomplete - povolí automatické doplňování * autofocus - automaticky vybere prvek * form - určení, do kterého formuláře/ů se při odeslání hodnota prvku vloží * formaction - mění akci formuláře (např. pro type=submit) * formenctype - mění kódování formuláře * formmethod - mění metodu formuláře * formnovalidate - vypíná validaci * formtarget - mění cíl formuláře (např. +more otevření do nového okna) * height, width - výška a šířka elementu * list - viz * min, max - minimální a maximální hodnota (např. pro type=number) * multiple - možnost vícenásobného výběru souborů (pro type=file) * pattern - maska povoleného vstupu (regulární výraz) * placeholder - tato hodnota se zobrazuje u nevyplněného prvku * required - vyžadováno * step - krok posunu při scrollování či posouvání (u numerických typů).

Datalist

Další funkcí formulářů je nový prvek , který pomocí parametru list prvku vytváří rozbalovací nabídku.

Příklad:

Nová API

Kromě výše zmíněných funkcí HTML5 nově nabízí také možnost využít následující rozhraní pro programování aplikací.

Page Visibility API

Funkce umožňuje monitorovat, zda je stránka právě viditelná a daný element se uživateli zobrazuje či nikoliv, a na změnu viditelnosti reagovat a přizpůsobit se aktivitě uživatele.

Navigator API - Online/Offline

Funkce umožňuje zjistit, zda je uživatel připojen k síti (nikoliv k internetu). Odpověď true tedy nezaručuje, že je uživatel připojen k internetu, ale status false zaručuje, že uživatel připojen není.

Vibration API

Funkce umožňuje spustit na zařízení vibraci (např. při špatně vyplněném formuláři) nebo vytvořit znělku.

Credential Management API

Funkce umožňuje automatické přihlášení, aniž by uživatel musel v prohlížeči vyplňovat přihlašovací údaje.

Bluetooth API

Funkce umožňuje komunikovat s okolními zařízeními s aktivním Bluetooth Low Level Energy profilem.

Ambient Light API

Funkce umožňuje zjistit, jaké jsou světelné podmínky v okolí užívaného zařízení, a případně jim přizpůsobit uživatelské prostředí.

Gamepad API

Funkce poskytuje plnou podporu herních ovladačů, kterou lze využít například k ovládání herních postav, ale i webu.

Web Worker

Jako Web Worker se označuje skript, který lze spustit na pozadí stránky a jehož činnost nijak neomezuje běžné prohlížení a interakci na dané stránce. HTML5 umožňuje skriptově vytvářet a ukončovat Web Workera pomocí instance Worker a ta zase dokáže posílat klientské stránce data, která mohou být zpracována (např. +more vypsána do nějakého elementu).

Server-Sent Events

Server-Side Events (SSE) jsou události zasílané z klientské stránky serveru. Do jisté míry zastupují AJAX, s tím rozdílem, že odpověď serveru se odesílá automaticky. +more HTML umožňuje vytvořit instanci SSE a poté reagovat na vytvoření spojení, zaslaný výstup nebo na chybu.

Reference

Související články

HTML * HTML5 audio * HTML5 canvas * HTML5 mikrodata * HTML5 video

Externí odkazy

[url=http://www. w3. +moreorg/TR/html5/]Technická specifikace[/url] * [url=http://www. w3. org/TR/html5-diff/]Článek o rozdílech mezi HTML5 a HTML4 od konzorcia W3C[/url] * [url=http://www. w3. org/html/logo/]W3C HTML5 Logo[/url] - stránky W3C o propagaci HTML5 * [url=http://www. html5rocks. com/en/]HTML5 Rocks[/url] * [url=http://interval. cz/clanky/seznameni-s-html-5/]Seznámení s HTML5[/url].

Kategorie:HTML Kategorie:Nově vznikající standardy Kategorie:Standardy W3C Kategorie:Značkovací jazyky