HTML5
![](http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/220px-HTML5_logo_and_wordmark.svg.png)
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. ří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.
Charakteristika
[editovat | editovat zdroj]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čů.[4] Součástí HTML 5.1 se stal DRM.[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]
Novinky
[editovat | editovat zdroj]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 prvku html, např. <html manifest="cache.manifest">
. 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
[editovat | editovat zdroj]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.
Jazyk dokumentu a kódování
[editovat | editovat zdroj]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
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
pomocí jednoduchého řádku
<meta charset="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 pak rtl (right to left).
Struktura HTML dokumentu by pak měla vypadat podobně:
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
Tělo stránky
</body>
</html>
Struktura
[editovat | editovat zdroj]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. 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- 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:
<body>
<header></header>
<nav></nav>
<article>
<section></section>
</article>
<aside></aside>
<footer></footer>
</body>
Funkce
[editovat | editovat zdroj]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- 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<details>
<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
[editovat | editovat zdroj]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. 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>
<source src="video.3gp" type="video/3gpp" media="handheld">
<source src="video.mp4" type="video/mp4">
</video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>
Canvas
[editovat | editovat zdroj]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
[editovat | editovat zdroj]![](http://upload.wikimedia.org/wikipedia/commons/thumb/0/00/HTML5_formul%C3%A1%C5%99e.png/220px-HTML5_formul%C3%A1%C5%99e.png)
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ř. pro vytvoření výjimky.
Nové atributy vstupních políček
[editovat | editovat zdroj]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í 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:
<form action="" method="post">
<input type="datetime" name="" value="">
<input type="date" name="" value="">
<input type="month" name="" value="">
<input type="week" name="" value="">
<input type="time" name="" value="">
<input type="number" name="" value="">
<input type="range" name="" value="">
<input type="email" name="" value="">
<input type="url" name="" value="">
<input type="search" name="" value="">
<input type="color" name="" value="">
</form>
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ř. otevření do nového okna)
- height, width – výška a šířka elementu
- list – viz <datalist>
- 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
[editovat | editovat zdroj]Další funkcí formulářů je nový prvek <datalist>
, který pomocí parametru list prvku <input>
vytváří rozbalovací nabídku.
Příklad:
<input list="prohlizec">
<datalist id="prohlizec">
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist>
Nová API
[editovat | editovat zdroj]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
[editovat | editovat zdroj]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]
Navigator API – Online/Offline
[editovat | editovat zdroj]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]
Vibration API
[editovat | editovat zdroj]Funkce umožňuje spustit na zařízení vibraci (např. při špatně vyplněném formuláři) nebo vytvořit znělku.[7]
Credential Management API
[editovat | editovat zdroj]Funkce umožňuje automatické přihlášení, aniž by uživatel musel v prohlížeči vyplňovat přihlašovací údaje.[7]
Bluetooth API
[editovat | editovat zdroj]Funkce umožňuje komunikovat s okolními zařízeními s aktivním Bluetooth Low Level Energy profilem.[7]
Ambient Light API
[editovat | editovat zdroj]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]
Gamepad API
[editovat | editovat zdroj]Funkce poskytuje plnou podporu herních ovladačů, kterou lze využít například k ovládání herních postav, ale i webu.[7]
Web Worker
[editovat | editovat zdroj]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-Sent Events
[editovat | editovat zdroj]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.
Reference
[editovat | editovat zdroj]- ↑ HTML5 specification finalized, squabbling over specs continues [online]. Ars Technica, 2014-10-29 [cit. 2014-10-29]. Dostupné online.
- ↑ HTML 5 Finalized [online]. OSNews, 2014-10-29 [cit. 2014-10-29]. Dostupné online.
- ↑ FRIEDE, Eric. LCC from October-December 2010 Lists. Theology Cataloging Bulletin. 2011-02-01, roč. 19, čís. 2, s. 9–16. Dostupné online [cit. 2022-04-04]. ISSN 1548-8497. DOI 10.31046/tcb.v19i2.1381.
- ↑ Google waving goodbye to Gears, hello to HTML5 – L.A. Times
- ↑ ČERNÝ, Michal. DRM se stalo součástí standardu HTML 5.1. Root.cz [online]. 26. 3. 2014. Dostupné online. ISSN 1212-8309.
- ↑ http://phys.org/news/2015-08-privacy-analysis-battery-status-api.html - Privacy analysis shows battery status API as tracking tool
- ↑ a b c d e f g HTML5, jak ho možná neznáte. Ackee Blog [online]. Ackee, 2020-4-1 [cit. 2020-6-15]. Dostupné online.
- ↑ http://www.w3schools.com/html/html5_webworkers.asp
Související články
[editovat | editovat zdroj]Externí odkazy
[editovat | editovat zdroj]Obrázky, zvuky či videa k tématu HTML5 na Wikimedia Commons
- (anglicky) Technická specifikace
- (anglicky) Článek o rozdílech mezi HTML5 a HTML4 od konzorcia W3C
- (anglicky) W3C HTML5 Logo – stránky W3C o propagaci HTML5
- (anglicky) HTML5 Rocks
- Seznámení s HTML5