HTML5 – Wikipedie

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. 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.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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. 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ě:

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:

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

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:

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:

• 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.

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:

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ů)

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

Příklad:

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.

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í.

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

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

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

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í.

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

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).

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.