HTML5
HTML5 je v informatice specifikace jazyka HTML, která je v současnosti ve stádiu návrhu organizací W3C.[1] Podle současného plánu by měla být konečná specifikace HTML 5.0 schválena do konce roku 2014 a verze HTML 5.1 v roce 2016.[2] 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.
Obsah |
Charakteristika[editovat]
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í HTML 5 implementovalo rozšíření pro prohlížeče Google Gears. Google se rozhodl vývoj Gears postupně pozastavit ve prospěch nativní podpory HTML 5 ze strany prohlížečů.[3]
Novinky[editovat]
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 atribut tagu 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í.
Specifikace[editovat]
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]
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 tagu, 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]
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í tagu div a jeho atributů id nebo class, protože v současné verzi HTML 4 žádné speciální tagy na toto rozlišení nejsou.
V HTML 5 jsou proto zavedeny tyto nové tagy, které jsou určeny na strukturování stránek:
<article>– reprezentuje nezávislé textové části stránky, např. komentáře, články,<section>– reprezentuje různé části stránek, např. kapitoly<aside>– reprezentuje poznámku stranou, která souvisí s obsahem, který obklopuje tuto poznámku<header>– reprezentuje hlavičku stránky, může obsahovat například nadpis nebo hlavní nabídku<footer>– reprezentuje patičku stránky, může obsahovat informace o autorovi, autorských právech nebo odkazy na související dokumenty<nav>– reprezentuje část stránky, která je určena k navigaci, nejčastěji menu nebo navigační odkazy<details>– reprezentuje dodatečné informace, které mohou být čtenáři dostupné např. po kliknutí, najetí myši<figure>– reprezentuje obrázek, graf, video, výňatek z písemných pramenů, citaci, ukázku kódu, … – jakýkoli obsah stránky, který doplňuje hlavní stať, ale není její součástí<figcaption>– reprezentuje popisek pro<figure><mark>– reprezentuje zvýrazněný text<hgroup>– reprezentuje skupinu nadpisů (<h1>–<h6>)
Příklad struktury stránky:
<body> <header></header> <nav></nav> <section> <article></article> </section> <footer></footer> </body>
Multimediální obsah, bitmapa[editovat]
V současné verzi 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 tagy:
<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á tag <embed> pro vložení kontejneru s externí aplikaci nebo 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]
Další novinkou je element <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]
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:
- datetime – reprezentuje datum a čas
- date – datum
- month – měsíc
- week – týden
- time – čas
- number – číslo
- range – rozsah číselných hodnot, které se nastaví parametry min a max
- email – pole pro zadání e-mailové adresy včetně ověření, zda je formát správný
- url – URL adresa
- search – vyhledávací políčko
- color – pole s výběrem barvy a převedením do jejího 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>
Odkazy[editovat]
Reference[editovat]
- ↑ Specifikace na stránkách W3C
- ↑ http://dev.w3.org/html5/decision-policy/html5-2014-plan.html W3C: Plan 2014
- ↑ Google waving goodbye to Gears, hello to HTML5 - L.A. Times
