HTML5 je v informatice verzeznačkovacího jazykaHTML sloužícího pro tvorbuwebových stránek. Finální specifikace byla vydána 28. října 2014.[1][2] 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.[3] 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.
Specifikace HTML5 je složena z několika víceméně nezávislých částí, například:
Některé z navržených funkcí HTML5 implementovalo rozšíření pro prohlížečeGoogle Gears. Google se rozhodl vývoj Gears postupně pozastavit ve prospěch nativní podpory HTML5 ze strany prohlížečů.[4] Součástí HTML 5.1 se stalDRM.[5]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í.[6]
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. 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ě. Jméno souboru s tímto seznamem se uvede jako vlastnost prvkuhtml, např. <html manifest="cache.manifest">. Jako perzistentní úložiště lze využít buď relační databázi, nebo asociativní polelocalStorage přístupné přes objektwindow. KromělocalStorage existuje navíc objektsessionStorage, v němž je možné uchovávat data po dobu trvání sezení.
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:
<!DOCTYPE html>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.
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<html>.
Údaje o kódování dokumentu se zapisují oproti dřívějšímu delšímu zápisu
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
pomocí jednoduchého řádku
<metacharset="UTF-8">
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.Ltr znamená zleva doprava (left to right), zprava doleva je to pakrtl (right to left).
Struktura HTML dokumentu by pak měla vypadat podobně:
<!DOCTYPE html><htmllang="cs"dir="ltr"><head><metacharset="UTF-8"><title>Titulek stránky</title></head><body> Tělo stránky</body></html>
HTML5 se také zaměřilo nasémantiku webových stránek a převážně na zvýšení přehlednostizdrojové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. 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ř. č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<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:
<body><header></header><nav></nav><article><section></section></article><aside></aside><footer></footer></body>
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ř. využití paměti<time> – označuje datum a čas<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<details><keygen> – ovládá vygenerování páru klíčů k certifikátu<output> – představuje výstup, např. výsledek početní operaceVe 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. Tento problém se HTML5 také snaží vyřešit.
Zavádí proto tyto značky:
<video> – vkládání videa<audio> – vkládání audia<source> – definuje alternativní verze videa nebo audia souboru, z nichž si prohlížeč vybírá ty, které podporuje<track> – vkládá stopu pro<video> či<audio>Zůstává značka<embed> pro vložení kontejneru s externí aplikací nebo pro interaktivní obsah.
Příklady:
<video><sourcesrc="video.3gp"type="video/3gpp"media="handheld"><sourcesrc="video.mp4"type="video/mp4"></video><audio><sourcesrc="music.oga"type="audio/ogg"><sourcesrc="music.mp3"type="audio/mpeg"></audio>
Další novinkou je prvek<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. pomocígrafických primitiv. Použití jako např. grafy reagující na ovládání uživatele.
Formuláře dostaly nové dva atributy:
Tyto atributy se mohou doplňovat se stejně nazvanými atributy u jednotlivých vstupních prvků formuláře, např. pro vytvoření výjimky.
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<input>, ale její parametrtype rozšiřuje o následující možnosti:
Zápis:
<formaction=""method="post"><inputtype="datetime"name=""value=""><inputtype="date"name=""value=""><inputtype="month"name=""value=""><inputtype="week"name=""value=""><inputtype="time"name=""value=""><inputtype="number"name=""value=""><inputtype="range"name=""value=""><inputtype="email"name=""value=""><inputtype="url"name=""value=""><inputtype="search"name=""value=""><inputtype="color"name=""value=""></form>
Mezi další nové atributy vstupních polí patří:
Další funkcí formulářů je nový prvek<datalist>, který pomocí parametrulist prvku<input> vytváří rozbalovací nabídku.
Příklad:
<inputlist="prohlizec"><datalistid="prohlizec"><optionvalue="Safari"><optionvalue="Internet Explorer"><optionvalue="Opera"><optionvalue="Firefox"></datalist>
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í.
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.[7]
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í.[7]
Funkce umožňuje spustit na zařízení vibraci (např. při špatně vyplněném formuláři) nebo vytvořit znělku.[7]
Funkce umožňuje automatické přihlášení, aniž by uživatel musel v prohlížeči vyplňovat přihlašovací údaje.[7]
Funkce umožňuje komunikovat s okolními zařízeními s aktivním Bluetooth Low Level Energy profilem.[7]
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í.[7]
Funkce poskytuje plnou podporu herních ovladačů, kterou lze využít například k ovládání herních postav, ale i webu.[7]
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ř. vypsána do nějakého elementu).[8]
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. HTML umožňuje vytvořit instanci SSE a poté reagovat na vytvoření spojení, zaslaný výstup nebo na chybu.
{{Cite web}} označená jako k „pouze dočasnému použití“.{{Cite web}} označená jako k „pouze dočasnému použití“.
Obrázky, zvuky či videa k tématuHTML5 na Wikimedia Commons