HTML5
HTML5 ( HyperText Markup Language 5 ) je poslední hlavní revizí HTML ( datový formát navržený tak, aby reprezentoval webové stránky ). Tato verze byla dokončena dne28. října 2014. HTML5 určuje dvě syntaxe abstraktního modelu definované v podmínkách DOM : HTML5 a XHTML5 .
Jazyk také zahrnuje:
- aplikační vrstva s mnoha API
- algoritmus , aby bylo možné zpracovat dokumenty s nevyhovující syntaxi .
Práce byla převzata W3C v březnu 2007 poté, co byla zahájena WHATWG . Obě organizace pracují paralelně na stejném dokumentu, aby udržovaly jednu verzi technologie . W3C zavírá přidané funkce22. května 2011, oznamující dokončení specifikace v roce 2014, a vyzývá webové vývojáře, aby od tohoto okamžiku používali HTML 5 . Konec 2016, verze 5.1 je oficiálně uvolní a nabízí několik nových funkcí, které by měly zmírnit práci vývojářů z webových aplikací .
Historický kontext
Změny oproti HTML 4.X a XHTML 1.X
Doctype
Stejně jako stránky HTML nebo XHTML vyžadují dokumenty HTML5 deklaraci Doctype označující standardní metodu vykreslování prohlížeče. V případě HTML 5 musíte <!DOCTYPE html> na začátku libovolného dokumentu HTML zadat „ “. U dokumentů XML je však tato deklarace volitelná, prohlížeč ji ve výchozím nastavení interpretuje ve standardním režimu. Chcete-li použít strukturu XML ( XHTML 5 ), musíte v záhlaví zadat : „ Content-Type: application/xhtml+xml “.
Příklad použití s HTML5
Ukázkový zdrojový kód
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>titre de la page
</title>
<!-- meta -->
<meta name="description" content="">
<meta name="author" content="">
<!-- mon icon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- mon template.css -->
<link rel="stylesheet" href="main.css" media="screen">
</head>
<body>
<header>
<!-- menu du haut -->
<nav>
<ul>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien
</a></li>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien
</a></li>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien
</a></li>
</ul>
</nav>
</header>
<!-- contenu de ma page -->
<div>
<!-- article n°1 -->
<article>
<h1>titre de mon article
</h1>
<p>texte de mon article
</p>
<section>
<h2>sous-titre mon article
</h2>
<p>texte de mon sous-titre
</p>
<figure>
<a href="mon-url"><img src="url-de-mon-image" alt="nom-de-mon-image"></a>
</figure>
</section>
</article>
<!-- article n°2 -->
<article>
<h1>titre de mon article
</h1>
<p>texte de mon article
</p>
<section>
<h2>sous-titre mon article
</h2>
<p>texte de mon sous-titre
</p>
<figure>
<a href="mon-url"><img src="url-de-mon-image" alt="nom-de-mon-image"></a>
</figure>
</section>
</article>
</div>
<footer>
<!-- menu du bas -->
<nav>
<ul>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien
</a></li>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien
</a></li>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien
</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Deklarace Doctype nerozlišuje velká a malá písmena a již neexistuje žádný odkaz na DTD ( definice typu dokumentu nebo definice typu dokumentu, dokument používaný k popisu modelu dokumentu SGML nebo XML).
Kódování
Proces detekce kódování byl také upraven a je prováděn v pořadí, přičemž se kontroluje přítomnost hlavičky HTTP „Content-Type“ a poté se detekuje kusovník na začátku souboru.
Prvky jazyka
XHTML5
U dokumentů XHTML5 musí autor určit kódování v prologu XML, ale také typ obsahu: „ application/xhtml+xml “. Celá stránka musí odpovídat syntaxi XML . Vzhledem k rozšiřitelnosti XML jazyka je možné přidat další tagy (příklad :) <mabalise></mabalise>; takové rozšíření vyžaduje deklaraci odpovídajících jmenných prostorů , jinak bude stránka chybná a prohlížeč ji nebude moci zobrazit. Jedná se o nejpřísnější režim, který vyžaduje téměř dokonalou syntaxi.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title>Exemple
</title>
</head>
<body>
<!-- Contenu de la page respectant la syntaxe XML. -->
</body>
</html>
Nové prvky
-
main : definuje hlavní obsah stránky, musí být na stránce jedinečný.
Ukázkový zdrojový kód
<html lang="fr">
<head>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#contenu-principal">contenu principal
</a></li>
</ul>
</nav>
</header>
<main id="contenu-principal">
<!-- Contenu principal de la page -->
</main>
</body>
</html>
-
section : definuje části dokumentu, jako jsou kapitoly, záhlaví, zápatí.
-
article : nezávislá část webu, jako komentář.
-
aside : přidružené ke značce, která mu předchází.
-
header : určuje úvod nebo skupinu navigačních prvků pro dokument.
-
footer : definuje zápatí článku nebo dokumentu. Obvykle obsahuje jméno autora, datum sepsání dokumentu a / nebo kontaktní údaje.
-
nav : definuje část v navigaci.
-
figure : definuje obrázky, diagramy, fotografie, kód atd.
-
figcaption : legenda pro značku <figure>.
-
audio : k definování zvuku, například hudby nebo jiných zvukových toků ( streamování ).
-
video : umožňuje vložit streamovaný videoobsah .
-
track : umožňuje vložit titulky (ve formátu WebVTT ) k videu zobrazenému se značkou videa.
-
embed : definuje vložený obsah, například zásuvný modul .
-
mark : definuje označený text.
-
meter : umožňuje použít měření se známým minimem a maximem k zobrazení měřidla.
-
progress : nastaví ukazatel průběhu na aktuálně spuštěné úloze.
-
time : nastavuje datum nebo čas nebo obojí. Tato značka byla ukončena vříjna 2011ve prospěch značky datapřed opětovným zavedením.
-
canvas : slouží k zobrazení grafických prvků, k jeho animaci musíte použít skript.
-
command : definuje tlačítko. Tuto značku podporuje pouze Internet Explorer 9 . Proto se nedoporučuje jej používat .
-
details : Určuje další podrobnosti, které lze na vyžádání skrýt nebo zobrazit.
-
keygen : slouží ke generování (zabezpečeného) klíče.
-
output : představuje výsledek výpočtu.
-
ruby, rtA rp : rubín anotací .
Nové atributy
Pro značku :
<a>
-
media : umožňuje určit, pro které médium nebo zařízení je optimalizováno.
-
type : definuje MIME cílové adresy URL.
Pro značku :
<area>
-
hreflang : určuje jazyk adresy URL.
-
media : umožňuje určit, pro které médium nebo zařízení je optimalizováno.
-
rel : označuje vztah mezi aktuálním dokumentem a cílovou adresou URL.
-
type : definuje MIME cílové adresy URL.
Pro značku :
<button>
-
autofocus : označuje, že tlačítko by mělo být při načítání stránky zaostřeno .
-
form : určuje, do které formy tlačítko patří.
-
formaction : určuje, kam se mají odeslat data formuláře při odeslání formuláře. Nahrazuje atribut akce formuláře.
-
formenctype : označuje, jak mají být data formuláře zakódována před odesláním na server. Nahradí atribut enctype formuláře.
-
formmethod : definuje, jak odeslat data formuláře.
-
formnovalidate : je-li k dispozici, označuje, že při odeslání formuláře nemusí být ověřen.
-
formtarget : Určuje, kde se má akce spustit.
Pro značku :
<fieldset>
-
name : definuje název sady polí.
-
disabled : deaktivovat sadu polí.
-
form : definuje formu sady polí.
Pro značku :
<form>
-
autocomplete : automatické doplňování.
-
novalidate : pokud je k dispozici, formulář není při odeslání ověřen.
Pro značku :
<html>
-
manifest : Deklarační URL ( manifest ) souborů pro offline použití.
Pro značku :
<iframe>
-
sandbox : určuje omezení obsahu iframe
-
seamless : označuje, že prvek iframe musí být dokonale integrován do dokumentu.
-
srcdoc : HTML kód dokumentu zobrazený v prvku iframe.
Pro značku :
<input>
-
autocomplete : automatické doplňování.
-
autofocus : nastaví fokus při načítání stránky.
-
form : určuje, do které formy ovládací prvek patří.
-
formaction : nahradí atribut „action“ formuláře. Určuje adresu URL, na kterou se mají odeslat data formuláře.
-
formenctype : nahradí atribut „enctype“ formuláře. Určuje, jak by měl být datový formulář kódován před odesláním na server.
-
formmethod : nahradí atribut „method“ formuláře. Definuje metodu HTTP pro odesílání dat na adresu URL.
-
formnovalidate : nahradí atribut „novalidate“ formuláře. Pokud je k dispozici, vstupní pole by nemělo být při odeslání ověřeno.
-
formtarget : nahradí atribut „target“ formuláře. Označuje cílové okno použité při odeslání formuláře.
-
height : definuje výšku.
-
list : označuje „datalist“ obsahující předdefinované možnosti pro ovládací prvek pro úpravy.
-
max : označuje maximální hodnotu vstupního pole.
-
min : označuje minimální hodnotu vstupního pole.
-
multiple : pokud je k dispozici, může uživatel zadat několik hodnot.
-
pattern : definuje vzor.
-
placeholder : tip, který uživatelům pomůže vyplnit vstupní pole.
-
required : označuje, že pro zadání formuláře je nutné zadat hodnotu vstupního pole.
-
step : označuje interval mezi hodnotami.
- nové typy:
- datetime
- datetime-local
- date
- month
- week
- time
- tel
- number
- range
- email
- url
- search
- color
Pro značku :
<link>
-
sizes : definuje velikost, výšku a šířku.
Pro značku :
<menu>
-
label : štítek viditelný z nabídky.
-
type : definuje typ zobrazované nabídky. Výchozí hodnota je „seznam“.
Pro značku :
<meta>
-
charset : definuje tabulku znaků pro kódování stránky.
Pro značku :
<ol>
-
reversed : pokud je k dispozici, změňte pořadí zobrazení.
Pro značku :
<script>
-
async : definuje, zda má být skript spuštěn asynchronně nebo ne.
Pro značku :
<select>
-
autofocus : aktivuje zaměření na tento prvek.
-
form : definuje jeden nebo více formulářů pro „výběr“.
Pro značku :
<style>
-
scoped : je-li přítomen, styl se použije pouze na rodiče a děti.
Pro značku :
<textarea>
-
autofocus : zaměření prvku textarea.
-
dirname : označuje název textové oblasti.
-
form : definuje jeden nebo více formulářů pro oblast textu.
-
maxlength : maximální počet znaků.
-
placeholder : definuje tip, který má uživateli pomoci.
-
required : označuje, že je nezbytná hodnota ovládacího prvku pro úpravy.
-
wrap : definuje, jak se text zobrazí v textové oblasti.
Stejně jako globální atributy, které platí pro všechny značky:
- contenteditable
- contextmenu
- data-*
- draggable
- hidden
-
on* (obsluhy událostí)
- spellcheck
P2P připojení a distribuce
- HTML 5 je poskytováno se schopností vytvářet spojení mezi uživateli PeerToPeerConnection () a také díky websockům .
Změny značek a atributů
Následující značky jsou odstraněny, protože jejich účinky byly čistě reprezentativní, což je role CSS .
-
basefont,
-
big,
-
center,
-
font,
-
strike,
-
tt,
-
u,
Tyto frame, frameseta značky noframesbyly také odstraněny; již byly zastaralé, protože koncovým uživatelům způsobovaly problémy s přístupností a použitelností.
Odebrány jsou také následující značky:
-
acronym již není zahrnuto, protože způsobovalo velké zmatky;
-
appletje nahrazen object ;
-
isindex, protože jej lze nahradit použitím tvarových řadičů;
-
dirje zastaralý ve prospěch ul.
Nakonec noscriptje k dispozici pouze ve verzi HTML, není zahrnuta ve verzi XML.
Zastaralost atributů
Na štítku a
- znaková sada
- coords
- jméno (upřednostňujte atribut id )
- metody
- rev
- tvar
- urna
Na značce oblasti
Na vložené značce
- jméno (upřednostňujte atribut id )
Na značce formuláře
Na hlavičce
Na html značce
Na značce iframe
Na vstupní značce
Na značce img
- longdesc
- lowsrc
- jméno (upřednostňujte atribut id )
Na značce odkazu
- znaková sada
- metody
- rev
- cílová
- urna
Na metaznačce
Na značce objektu
- archiv
- číslo třídy
- kódovaný
- kódová základna
- codetype
- deklaroval
- pohotovostní
Na volitelném štítku
- jméno (upřednostňujte atribut id )
Na značce param
Na značce skriptu
Na štítku tabulky
- velikost datové stránky
- souhrn
Na štítku td
Na té značce
API
HTML5 zavádí několik nových rozhraní API, která mohou pomoci vytvářet webové aplikace a lze je používat společně, a poskytují nové prvky zavedené pro aplikace, včetně:
- 2D kresba použitá s novou značkou plátna ,
- přehrávat videa a zvuky / hudbu používanou s novými značkami videa a zvuku,
- offline aplikace ,
- vydání v kombinaci s novým atributem nazvaným contenteditable ,
-
drag and drop v kombinaci s takzvaným přetažitelným atributem ,
- Přístup do historie prohlížení a stránky přidat tuto funkci historie prohlížení, aby se zabránilo backspace problémů s tlačítky .
Kromě toho jsou do tohoto standardu integrována API třetích stran, například WebGL od skupiny Khronos Group, což umožňuje přidávání 3D obsahu na stránky.
Kontroverze
Na konci roku 2012 se kampaň vedená několika sdruženími na obranu digitálních svobod, včetně Nadace svobodného softwaru , pokusila upozornit na zahrnutí digitálních zámků (DRM) do standardu HTML5.
Poznámky a odkazy
-
(en) W3C potvrzuje, že HTML5 bude k dispozici pro komentáře v květnu 2011 , www.w3.org, 14. února 2011.
-
„ Jaké nové funkce nabízí HTML 5.1?“ " ,14. srpna 2017
-
(in) Pracovní koncept W3C .
-
(in) Bug 13240 - zvažte výměnu s , w3.org.
-
(in) W3C přidává časový prvek zpět na HTML5 , webmonkey.com, publikováno v listopadu 2011 ..
-
http://www.w3schools.com/tags/att_command_type.asp
-
„ <příkaz>: Prvek příkazu HTML “ na webových dokumentech MDN (přístup 11. července 2020 ) .
-
(en) Informace W3C :
-
(in) HTML 5 snímků, které umožňují připojení peer to peer z JavaScriptu, připojení k cíli práce nebudou čistým TCP. Kompletní specifikace najdete na adrese http://dev.w3.org/html5/websockets/ .
-
(in) Smart Clients: ReverseHTTP & WebSockets .
-
(in) Umožní webové aplikace HTML5 navazovat připojení HTTP peer-to-peer?
-
P2P, audio a video v nabídce HTML 5 .
-
Řekněte W3C: nechceme Hollyweb http://www.defectivebydesign.org/no-drm-in-html5/en
-
Stínění před příchodem DRM v HTML5 http://www.numerama.com/magazine/25802-levee-de-boucliers-contre-l-arrivee-des-drm-au-sein-du- html5.html
Podívejte se také
Bibliografie
- (en) Mark Pilgrim , HTML5: Up and Running , O'Reilly ,srpna 2010, 205 s. ( ISBN 978-0-596-80602-6 )
- (en) Jeremy Keith ( pref. Jeffery Zeldman), HTML5 pro webové designéry , A Book Apart,2012, 87 s. ( ISBN 978-0-9844425-0-8 )
Související články
externí odkazy