HTML5

Z Wikipedie, otevřené encyklopedie
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. ří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]

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ř. 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 minmax
  • 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]

  1. HTML5 specification finalized, squabbling over specs continues [online]. Ars Technica, 2014-10-29 [cit. 2014-10-29]. Dostupné online. (anglicky) 
  2. HTML 5 Finalized [online]. OSNews, 2014-10-29 [cit. 2014-10-29]. Dostupné online. (anglicky) 
  3. 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. 
  4. Google waving goodbye to Gears, hello to HTML5 – L.A. Times
  5. ČERNÝ, Michal. DRM se stalo součástí standardu HTML 5.1. Root.cz [online]. 26. 3. 2014. Dostupné online. ISSN 1212-8309. 
  6. http://phys.org/news/2015-08-privacy-analysis-battery-status-api.html - Privacy analysis shows battery status API as tracking tool
  7. 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. 
  8. http://www.w3schools.com/html/html5_webworkers.asp

Související články[editovat | editovat zdroj]

Externí odkazy[editovat | editovat zdroj]