HTML5

HTML 5 programovací jazyk
Autor	Tim Berners Lee
Datum původu	1989
Nejnovější verze	HTML5
Používání	Programování webových stránek
Psaní na stroji	Hlasitý
Běžná rozšíření	html a htm
Referenční implementace
Operační systém	Windows, macOS, Android, iOS, Linux.
Licence	Open Source
webová stránka	www.w3.org/TR/html5/

HTML je nejpoužívanějším značkovacím jazykem na webu. V podstatě se používá k vytváření a strukturování webových stránek. Od října 2014 byla vydána verze 5, určená k definování funkčních standardů (např. Video / Audio přehrávač) a API multiplatformního programování. Neustále se vyvíjí.

Historie

Vývoj iniciovala pracovní skupina Web Hypertext Application Technology Working Group ( WHATWG ) (založená v roce 2004 vývojáři patřícími pod Apple , Mozilla Foundation a Opera Software ), která si dala za cíl navrhnout specifikace pro vývoj webových aplikací se zaměřením na vylepšení a doplnění HTML a souvisejících technologií.

Zpočátku na rozdíl od World Wide Web Consortium pro pomalost ve vývoji html standardu a pro rozhodnutí W3C orientovat standardizaci na XHTML 2 , které nezaručovalo zpětnou kompatibilitu, stejné W3C poté uznalo tyto důvody jako platné. , oznamující vytvoření speciální skupiny pro standardizaci HTML5 a opuštění XHTML 2.0 .

Od roku 2007 WHATWG v tomto procesu standardizace spolupracuje s W3C a poté se v roce 2012 rozhodlo oddělit se od procesu standardizace W3C , čímž byly efektivně vytvořeny dvě verze HTML5: verze WHATWG je definována jako „HTML Living Standard“ a proto v nepřetržitém vývoji, zatímco W3C bude jedinou verzí odpovídající "snímku" životní úrovně.

První Candidate Recommendation zveřejnila W3C 17. prosince 2012 a první verze standardu byla publikována jako doporučení 28. října 2014.

Verzi HTML 5.1 zveřejnilo W3C jako doporučení 1. listopadu 2016.

Verze HTML 5.2 byla publikována W3C jako doporučení dne 14. prosince 2017

Verzi HTML 5.3 zveřejnilo W3C jako doporučení 28. ledna 2021.

Zastaralé značky

HTML5 zavrhlo následující značky a atributy nalezené v HTML4, protože jejich funkci nyní zpracovává CSS3 :

Zastaralé prvky HTML4 v HTML5

CSS3

HTML5 a CSS3 (evoluce CSS2) tvoří kompletní Turingův jazyk , postačující podmínka pro to, aby byl jazyk považován za programovací jazyk .

SEO

HTML5 je navrženo tak, aby zlepšilo SEO oproti předchozím verzím HTML.

Podpora prohlížeče

Příklad stránky HTML5 v aplikaci Internet Explorer 7 . Zdá se, že není synchronizován, protože prohlížeč nerozpozná specifikace

U zrodu HTML5 byl renderovací engine Webkit (Chrome a Safari) první, který správně interpretoval mnohé z nových kódů, druhým, který se z tohoto pohledu aktualizoval, byl Gecko (Firefox) a nakonec Trindent (Internet Explorer). Po několik let byly webové stránky, které používaly nové dostupné značky HTML, vnímány odlišně v závislosti na prohlížeči používaném uživatelem . Částečně byl tento problém vyřešen technikami, jako je alternativní CSS speciálně pro Internet Explorer , podmíněné komentáře přizpůsobené tomu a JavaScriptové knihovny , jako je Modernizr . Od roku 2019 Microsoft Edge podporuje většinu specifikací HTML5 .

Novinky

Inovace, které HTML5 přináší oproti HTML4 , jsou zaměřeny především na zlepšení oddělení mezi strukturou definovanou značkami, charakteristikami vykreslování (font, barvy atd.), definovanými direktivami stylu , a obsahem webové stránky, definovaným skutečným text. Kromě toho HTML5 poskytuje podporu pro místní ukládání velkého množství dat stažených z webového prohlížeče , aby bylo možné používat webové aplikace (jako jsou poštovní schránky Google nebo jiné podobné služby) i bez připojení k internetu.

Konkrétně :

• zpřísňují se pravidla pro členění textu do kapitol, odstavců a oddílů;
• jsou zavedeny ovládací prvky pro navigační menu;
• jsou vylepšeny a rozšířeny ovládací prvky elektronických formulářů, tj. nové atributy a typy zadávání formulářů (registrační a kontaktní formuláře);
• jsou zavedeny specifické prvky pro ovládání multimediálního obsahu (tagy <video>a <audio>), s HTML4, které lze začlenit pouze prostřednictvím Adobe Flash .
• řada atributů je rozšířena na všechny značky, zejména ty zaměřené na přístupnost ( WAI-ARIA ), které byly dříve poskytovány pouze pro některé značky;
• Je podporováno plátno , které umožňuje používat JavaScript k vytváření animací ( v době HTML4 možné pouze s Adobe Flash ) a bitmapové grafiky;

Příklad úložiště HTML5. Uživatel může vytvářet poznámky a i když je prohlížeč obnoven, zůstanou uložené .

• zavedení geolokace díky silnému rozšíření mobilních operačních systémů (jako jsou Android a iOS , mezi nejoblíbenější);

• alternativní systém k normálním cookies , nazývaný Web Storage, efektivnější, který umožňuje značnou úsporu šířky pásma;
• standardizace programů JavaScript, tzv. Web Workers a možnost používání některých stránek offline;
• nahrazení dlouhého a složitého doctype jednoduchým <!DOCTYPE html>.

• Nová mikrodata popisující obsah tagů (např. jde-li o jméno, příjmení, adresu, telefonní číslo, email apod.);
• WebSocket API: schopnost vytvořit a udržovat datové spojení mezi prohlížečem a vzdáleným serverem, na kterém lze odesílat zprávy oběma směry;
• Drag and Drop (přetahování a pouštění objektů do kontejneru, například v případě videoher nebo produktů, které mají být umístěny do košíku na stránkách elektronického obchodu );
• SVG a MathML : možnost vkládat vektorovou grafiku a matematické vzorce do HTML, které lze v HTML4 importovat pouze jako obrázky nebo vytvořit v Adobe Flash .

TAG	ROZSAH
Nové strukturální a sémantické prvky
Záhlaví	Porovnání základní stránky HTML4 a stránky 5
Zápatí
Sekce
Nav
Článek (v případě článků na domovské stránce)
Stranou (obsah související s hlavním)
Hgroup	Seskupte značky nadpisu
<figure> a <figcaption>	Titulky k obsahu
Vložit	Vložte interaktivní nebo multimediální obsah
Rubín	Zadejte anotace Ruby
Wbr	Prohlížeč umí vložit nový řádek
<příkaz> a <nabídka>	Definují panely nástrojů nebo kontextové nabídky
<podrobnosti> a <souhrn>	Informační widget pro uživatele
označit	Část textu označená nebo zvýrazněná uživateli
Atributy <time> a pubdate a datetime	24hodinový čas nebo datum v gregoriánském kalendáři
Metr	Skalární míra známého rozsahu nebo zlomkové hodnoty
Pokrok	Stav dokončení úkolu
Obrázek	Kontejner na obrázky
Mikrodata	Pro každý HTML tag lze zadat sémantické atributy
Nové atributy a typy vstupu pro formuláře
autofokus, zástupný symbol a formulář	Autofokus je v tomto případě v červené barvě. Typy vstupů jsou ekvivalentní mezerám, které mají být vyplněny (v tomto případě je to "e-mail"). Zástupný symbol je vzorový text každého prostoru
Typ vstupu: tel
Typ vstupu: vyhledávání
Typ vstupu: url
Typ vstupu: email
Typ vstupu: číslo
Typ vstupu: rozsah
Typ vstupu: barva
Datalist	Automatické doplňování na prvku formuláře
Automatické doplňování	Povolí nebo zakáže prohlížeči vyplnit pole formuláře automaticky
Min, max	Definují minimální a maximální povolenou hodnotu
Násobek	Umožňuje uživateli zadat více hodnot pro stejný vstup
Vzor	Ověřte, zda zadaná hodnota odpovídá určitým pravidlům
Požadované	Povinné je vyplnit mezeru ve formuláři
Krok	Definuje vzdálenost mezi jednou hodnotou a další
keygen	Generátor číselných klíčů ve formuláři
výstup	Vrátí výsledek výpočtu
API pro webové aplikace
Offline webové aplikace (soubor .manifest)	Po první relaci online procházení některé objekty také zůstanou přístupné při absenci síťového připojení.
Indexovaná databáze API	Vytvářejte a manipulujte s databází v prohlížeči
WebStorage API	Můžete je například mít současně otevřené dva sociální nebo e-mailové účty ve stejném prohlížeči a každá navigace na prvním to bude mít za následek odhlášení druhého a naopak
Web Workers API	Umožňují spouštění částí kódu Javascript aniž by to ovlivnilo výkon webové stránky
WebSocket API	Navazují a udržují datové spojení mezi prohlížeči a vzdálený server, na který se posílají zprávy v obou směrech
Drag and Drop	Přetáhněte objekty
Geolokační API	Geolokace
Multimédia
SVG a MathML	Vektorové obrázky a matematické vzorce
Canvas / WebGL	API vhodné pro kreslení čar, kruhů, obdélníků, obrázků a 3D objektů
Video	Vkládání video souborů (dříve to bylo možné pouze s Adobe Flash )
Zvuk	Vložte zvukové soubory

WAI ARIA

WAI-ARIA ( Web Accessibility Initiative - Accessible Rich Internet Applications ) je soubor dokumentů publikovaných konsorciem W3C ( World Wide Web Consortium ), které specifikují, jak zvýšit dostupnost dynamického obsahu a komponent uživatelského rozhraní vyvinutých pomocí AJAX , HTML , JavaScript a další související technologie. HTML5 přidalo nová pravidla WAI ARIA .

Orientace zařízení

Příklad orientace zařízení a pohybu zařízení

Událost deviceorientationje vyvolána, když jsou k dispozici nová data ze senzoru orientace o aktuální orientaci zařízení vzhledem k rámu zemských souřadnic . Tato data sbírá magnetometr uvnitř zařízení. V praxi se při otáčení zařízení, na kterém je zobrazena webová stránka, objekt, který obsahuje toto API, otáčí podle osy x, y nebo z zařízení .

Základní kód:

okno . addEventListener ( 'orientace na zařízení' ,  funkce ( událost )  { 
  var  a  =  událost . alpha ; 
  var  b  =  událost . beta ; 
  var  g  =  událost . gamma ; 
},  false );

Pohyb

Pohybové události jsou zpracovávány stejným způsobem jako orientační události, s tím rozdílem, že mají svůj vlastní název události: devicemotion .

Příklad:

okno . addEventListener ( "devicemotion" ,  handleMotion ,  true );

S ohledem na deviceorientationinformace poskytované v objektu DeviceMotionEventse stávají parametry funkce HandleMotion .

Událost pohybu obsahuje čtyři vlastnosti:

• DeviceMotionEvent.acceleration
• DeviceMotionEvent.accelerationIncludingGravity
• DeviceMotionEvent.rotationRate
• DeviceMotionEvent.interval

Hodnoty pohybu

Objekty DeviceMotionEventposkytují informace o rychlosti změn polohy a orientace zařízení. Úpravy jsou prováděny ve třech osách .

Pro accelerationa accelerationIncludingGravitytyto osy odpovídají:

• x: Představuje osu ze západu na východ
• y: Představuje osu z jihu na sever
• z: Představuje osu kolmou k zemi

Pro rotationRateinformace odpovídají:

• alpha: Představuje rychlost otáčení podél osy kolmé k zařízení.
• beta: Představuje rychlost otáčení podél osy, která jde zleva doprava od zařízení.
• gamma: Představuje rychlost otáčení podél osy, která jde ze spodní části zařízení nahoru.

intervalpředstavuje časový interval v milisekundách, ve kterém jsou data získávána ze zařízení.

HTML5test

Testovací stránka HTML5 zobrazená v prohlížeči Chrome

HTML5test je webová aplikace pro hodnocení přesnosti webového prohlížeče při implementaci webových standardů HTML5 a webové SQL databáze (vyvinuté konsorciem World Wide Web Consortium ) a také standardu WebGL (vyvinutého Mozilla Foundation a Khronos Group ) .

Testovací sadu vyvinul nizozemský webový programátor Niels Leenheer a byla vydána v březnu 2010. Pro testování webového prohlížeče musí uživatel navštívit domovskou stránku webu na adrese . Aplikace vrací celočíselné skóre z až 555 bodů. Celkový počet bodů se během vývoje softwaru několikrát změnil; Leenheer následně zavedl bodovací systém jako součást zásadního přepracování testu představeného v listopadu 2013 . html5test.com

HTML5test hodnotí podporu prohlížeče pro webové úložiště, geolokační API W3C, HTML5 specifické prvky HTML (včetně prvku Canvas ) a další funkce . Nehodnotí shodu prohlížeče s jinými webovými standardy, jako jsou kaskádové styly , ECMAScript , Scalable Vector Graphics nebo Document Object Model . Testování shody pro tyto standardy je v kompetenci Acid3 , automatizovaného testu publikovaného Ianem Hicksonem v roce 2008 . Stejně tak Acid3 nehodnotí soulad prohlížeče s HTML5. Rozsah testu HTML5test a rozsah testu Acid3 se vzájemně vylučují.

Příklady

• 

  Responzivní a interaktivní tabulka v HTML5 a CSS3, která se přizpůsobí zařízení

• 

  Příklady interaktivních grafů, interaktivních map a aplikací pro kreslení HTML5

• 

  Příklad interaktivního 3D WebGL

Bibliografie

• Jeffrey Zeldman, Ethan Marcotte, Developing sites with web standards , Milan, Apogeo, 2010, ISBN  978-88-503-2964-9 .
• Mark Pilgrim, HTML5: Operational Guide , Milan, New Techniques Hops, 2010, ISBN  978-88-481-2504-8 .
• Gabriele Gigliotti, HTML5: Developing the Web of Tomorrow Today , Milán, Apogeo, 2012, ISBN  978-88-503-3116-1 .

Související položky

• webová stránka
• Internet
• Celosvětová Síť
• World Wide Web konsorcium
• Pracovní skupina Web Hypertext Application Technology
• HTML
• HTML5 test

Další projekty

Jiné projekty

• Wikimedia Commons

• Wikimedia Commons obsahuje obrázky nebo jiné soubory v HTML5

Externí odkazy

• ( EN ) Webové stránky WHATWG , na whatwg.org .
• ( EN ) Stránky W3C HTML Working Group , na w3.org .
• ( EN ) W3C, Candidate Recommendation of HTML5 – 17. prosince 2012
• HTML5 Guide – HTML.it Poznejte a okamžitě aplikujte inovace představené ve specifikaci HTML5, od nových sémantických značek po JavaScript API
• ( EN ) Ponořte se do Html5, napsané Markem Pilgrimem, licencováno pod CC-BY-3.0 – ve vývoji
• ( EN ) Zjistěte, zda váš prohlížeč podporuje HTML5 , na html5test.com .
• HTML5 , Google a metadata na blog.tsw.it. Získáno 24. května 2010 (archivováno z originálu 30. května 2010) .
• HTML5 Today, časopis s příklady, novinkami a návody k HTML5 a CSS3 , na html5today.it . Získáno 10. února 2011 (z originálu archivováno 23. října 2010) .
• ( EN ) HTML5 Showcase , na html5-showcase.com .
• Co je HTML5 Archivováno 13. února 2011 v internetovém archivu . Podrobný článek s podrobnostmi o všech hlavních novinkách a funkcích