Přeskočit na obsah

HTML5

Z Wikipedie, otevřené encyklopedie
Logo HTML5 od W3C

HTML5 je nová verze specifikace značkovacího jazyka HTML, která přináší podstatné změny v technologiích webových stránek. HTML5 umožňuje kromě jiného přehrávat multimédia přímo ve webovém prohlížeči a vytvářet v něm aplikace, které fungují i bez připojení k internetu. V současnosti je vývoj HTML5 ve stádiu Candidate Recommendation.[1] Podle aktuálního plánu by měla být konečná specifikace HTML 5.0 schválena v posledním čtvrtletí roku 2014, její nástupnická verze HTML 5.1 v posledním čtvrtletí roku 2016.[2]

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čů.[3] Součástí HTML 5.1 se stal DRM.[4]

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í jazyku 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. Dá se 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

Ukázka HTML5 formulářů v Opeře

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>

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>

Reference

  1. ↑ Specifikace na stránkách W3C
  2. ↑ W3C: Plan 2014
  3. ↑ Google waving goodbye to Gears, hello to HTML5 - L.A. Times
  4. ↑ ČERNÝ, Michal. DRM se stalo součástí standardu HTML 5.1. Root.cz [online]. 26. 3. 2014. Dostupné online. ISSN 1212-8309. 

Související články

Externí odkazy

Citováno z „https://cs.wikipedia.org/w/index.php?title=HTML5&oldid=11791274“