HTML5

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

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

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

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í

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

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

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

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

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

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

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

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

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.^[7]

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í.^[7]

Vibration API

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

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

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

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í.^[7]

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.^[7]

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ř. vypsána do nějakého elementu).^[8]

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. HTML umožňuje vytvořit instanci SSE a poté reagovat na vytvoření spojení, zaslaný výstup nebo na chybu.