HTML5

Z Wikipedie, otevřené encyklopedie
Skočit na: Navigace, Hledání
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 Last Call Working Draft.[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[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čů.[3] Součástí HTML 5.1 se stal DRM.[4]

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

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[editovat | editovat zdroj]

  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[editovat | editovat zdroj]

Externí odkazy[editovat | editovat zdroj]

Logo Wikimedia Commons
Wikimedia Commons nabízí obrázky, zvuky či videa k tématu