HTML5
HTML5 ( HyperText Markup Language 5 ) este ultima revizuire majoră a HTML ( un format de date conceput pentru a reprezenta pagini web ). Această versiune a fost finalizată pe28 octombrie 2014. HTML5 specifică două sintaxe ale unui model abstract definit în termeni DOM : HTML5 și XHTML5 .
Limba include, de asemenea:
Lucrarea a fost preluată de W3C în martie 2007, după ce a fost inițiată de WHATWG . Cele două organizații lucrează în paralel la același document pentru a menține o singură versiune a tehnologiei . W3C închide adăugarea de caracteristici22 mai 2011, anunțând o finalizare a specificației în 2014 și încurajează dezvoltatorii web să utilizeze HTML 5 începând cu acest moment. Sfârșitul anului 2016, versiunea 5.1 este lansată oficial și oferă mai multe funcții noi care ar trebui să ușureze munca dezvoltatorilor de aplicații Web .
Context istoric
Modificări de la HTML 4.X și XHTML 1.X
Doctype
La fel ca paginile HTML sau XHTML , documentele HTML5 necesită o declarație Doctype care să indice metoda standard de redare a browserului. În cazul HTML 5 , trebuie să specificați " <!DOCTYPE html> " la începutul oricărui document HTML. Cu toate acestea, pentru documentele XML , această declarație este opțională, browserul interpretând-o în mod standard în mod implicit. Pentru a utiliza structura XML ( XHTML 5 ), trebuie să specificați în antet : " Content-Type: application/xhtml+xml ".
Exemplu de utilizare cu HTML5
Exemplu de cod sursă
<!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>
Declarația Doctype nu ține cont de majuscule și minuscule și nu mai există nicio referire la un DTD ( Document Type Definition sau Document Type Definition , document utilizat pentru a descrie un model de document SGML sau XML).
Codificare
Procesul de detectare a codificării a fost, de asemenea, modificat și se desfășoară în ordine, verificând prezența unui antet HTTP „Content-Type” și apoi detectând BOM la începutul fișierului.
Elemente de limbaj
XHTML5
Pentru documentele XHTML5, autorul trebuie să precizeze codificarea în prologul XML, dar și tipul de conținut: " application/xhtml+xml ". Întreaga pagină trebuie să fie conformă cu sintaxa XML . Datorită naturii extensibile a limbajului XML, este posibil să adăugați alte etichete (exemplu :) <mabalise></mabalise>; o astfel de extensie necesită declararea spațiilor de nume corespunzătoare, altfel pagina va fi eronată și browserul ar putea să nu o poată afișa. Este cel mai strict mod care impune o sintaxă aproape perfectă.
<?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>
Elemente noi
-
main : definește conținutul principal al paginii, trebuie să fie unic pe pagină.
Exemplu de cod sursă
<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 : definește secțiunile documentului, cum ar fi capitole, anteturi, subsoluri.
-
article : parte independentă a site-ului, ca un comentariu.
-
aside : asociat cu eticheta care o precedă.
-
header : specifică o introducere sau un grup de elemente de navigare pentru document.
-
footer : definește subsolul unui articol sau unui document. De obicei conține numele autorului, data la care a fost scris documentul și / sau datele de contact.
-
nav : definește o secțiune din navigare.
-
figure : definește imagini, diagrame, fotografii, cod etc.
-
figcaption : legendă pentru eticheta <figure>.
-
audio : pentru a defini un sunet, cum ar fi muzică sau alte fluxuri audio ( streaming ).
-
video : vă permite să inserați conținut video în flux .
-
track : vă permite să inserați un subtitlu (în format WebVTT ) într-un videoclip afișat cu eticheta video.
-
embed : definește conținutul încorporat, cum ar fi un plug-in .
-
mark : definește un text marcat.
-
meter : vă permite să utilizați măsurătorile cu un minim și un maxim cunoscut, pentru a afișa un indicator.
-
progress : setează o bară de progres pe lucrarea curentă.
-
time : setați o dată sau o oră sau ambele. Această etichetă a fost întreruptă înoctombrie 2011în favoarea etichetei dataînainte de a fi reintrodus.
-
canvas : folosit pentru a afișa elemente grafice, trebuie să utilizați un script pentru al anima.
-
command : definește un buton. Această etichetă este acceptată numai de Internet Explorer 9 . Prin urmare, nu se recomandă utilizarea acestuia .
-
details : Specifică detalii suplimentare care pot fi ascunse sau afișate la cerere.
-
keygen : folosit pentru a genera o cheie (sigură).
-
output : reprezintă rezultatul unui calcul.
-
ruby, rtși rp : adnotări de rubin .
Atribute noi
Pentru etichetă :
<a>
-
media : vă permite să specificați pentru ce suport media sau dispozitiv este optimizat.
-
type : definește MIME-ul adresei URL țintă.
Pentru etichetă :
<area>
-
hreflang : specifică limba adresei URL.
-
media : vă permite să specificați pentru ce suport media sau dispozitiv este optimizat.
-
rel : indică relația dintre documentul curent și adresa URL țintă.
-
type : definește MIME -ul adresei URL țintă.
Pentru etichetă :
<button>
-
autofocus : indică faptul că butonul ar trebui să fie focalizat în timp ce pagina se încarcă.
-
form : specifică cărui formă îi aparține butonul.
-
formaction : specifică unde să trimită datele formularului atunci când este trimis un formular. Înlocuiește atributul de acțiune al formularului.
-
formenctype : indică modul în care datele de formular trebuie codificate înainte de a fi trimise către un server. Înlocuiește atributul enctype al formularului.
-
formmethod : definește modul de trimitere a formularului de date.
-
formnovalidate : dacă este prezent, indică faptul că formularul nu trebuie validat atunci când este trimis.
-
formtarget : specifică unde să deschidă / să execute acțiunea.
Pentru etichetă :
<fieldset>
-
name : definește numele setului de câmpuri.
-
disabled : dezactivați setul de câmpuri.
-
form : definește forma setului de câmpuri.
Pentru etichetă :
<form>
-
autocomplete : completare automată.
-
novalidate : dacă este prezent, formularul nu este validat la depunere.
Pentru etichetă :
<html>
-
manifest : Declarație URL ( manifest ) a fișierelor pentru utilizare offline.
Pentru etichetă :
<iframe>
-
sandbox : specifică restricțiile privind conținutul iframe-ului
-
seamless : indică faptul că iframe-ul trebuie să fie perfect integrat în document.
-
srcdoc : codul HTML al documentului afișat în iframe.
Pentru etichetă :
<input>
-
autocomplete : completare automată.
-
autofocus : setează focalizarea la încărcarea paginii.
-
form : specifică cărui formă îi aparține controlul.
-
formaction : înlocuiește atributul „acțiune” al formularului. Specifică adresa URL la care să trimiteți datele formularului.
-
formenctype : înlocuiește atributul „enctype” al formularului. Indică modul în care formularul de date trebuie codificat înainte de a fi trimis la server.
-
formmethod : înlocuiește atributul „metodă” al formularului. Definește metoda HTTP pentru trimiterea datelor către adresa URL.
-
formnovalidate : înlocuiește atributul „novalidate” al formularului. Dacă este prezent, câmpul de intrare nu trebuie validat atunci când este trimis.
-
formtarget : înlocuiește atributul „țintă” al formularului. Indică fereastra țintă utilizată la trimiterea formularului.
-
height : definește înălțimea.
-
list : desemnează un „datalist” care conține opțiuni predefinite pentru controlul de editare.
-
max : indică valoarea maximă a câmpului de intrare.
-
min : indică valoarea minimă a câmpului de intrare.
-
multiple : dacă este prezent, utilizatorul poate introduce mai multe valori.
-
pattern : definește un model.
-
placeholder : un sfat pentru a ajuta utilizatorii să completeze câmpul de introducere.
-
required : indică faptul că valoarea câmpului de intrare este necesară pentru a trimite formularul.
-
step : indică intervalul dintre valori.
- noi tipuri:
- datetime
- datetime-local
- date
- month
- week
- time
- tel
- number
- range
- email
- url
- search
- color
Pentru etichetă :
<link>
-
sizes : definește dimensiunea, înălțimea și lățimea.
Pentru etichetă :
<menu>
-
label : etichetă vizibilă din meniu.
-
type : definește tipul de meniu de afișat. Valoarea implicită este „listă”.
Pentru etichetă :
<meta>
-
charset : definește tabelul de caractere pentru codificarea paginii.
Pentru etichetă :
<ol>
-
reversed : dacă este prezent, modificați ordinea de afișare.
Pentru etichetă :
<script>
-
async : definește dacă scriptul trebuie executat sau nu asincron.
Pentru etichetă :
<select>
-
autofocus : activați focalizarea pe acest element.
-
form : definește una sau mai multe forme pentru „selectați”.
Pentru etichetă :
<style>
-
scoped : dacă este prezent, stilul se aplică numai părintelui și copiilor.
Pentru etichetă :
<textarea>
-
autofocus : focalizează elementul textarea.
-
dirname : indică numele zonei text.
-
form : definește una sau mai multe forme pentru textarea.
-
maxlength : numărul maxim de caractere.
-
placeholder : definește un sfat pentru a ajuta utilizatorul.
-
required : indică faptul că valoarea controlului de editare este necesară.
-
wrap : definește modul în care textul este afișat în zona text.
La fel și atributele globale care se aplică tuturor etichetelor:
- contenteditable
- contextmenu
- data-*
- draggable
- hidden
-
on* (gestionari de evenimente)
- spellcheck
Conexiune și distribuție P2P
- HTML 5 este oferit cu posibilitatea de a face conexiuni între utilizatorii PeerToPeerConnection () și, de asemenea, datorită websocket-urilor .
Modificări în etichete și atribute
Următoarele etichete sunt eliminate deoarece efectele lor au fost pur reprezentative, care este rolul CSS .
-
basefont,
-
big,
-
center,
-
font,
-
strike,
-
tt,
-
u,
Cele frame, framesetși tag - uri noframesau fost , de asemenea , eliminate; erau deja învechite, deoarece creau probleme de accesibilitate și utilizare pentru utilizatorul final.
Următoarele etichete sunt, de asemenea, eliminate:
-
acronym nu mai este inclus deoarece a creat multă confuzie;
-
appletse înlocuiește cu object ;
-
isindex, deoarece poate fi înlocuit cu utilizarea controlerelor de formă;
-
direste învechit în favoarea ul.
În cele din urmă, noscripteste furnizat numai în versiunea HTML, nu este inclus în versiunea XML.
Învechirea atributelor
Pe eticheta a
- set de caractere
- coords
- nume (preferați atributul id )
- metode
- rev
- formă
- urnă
Pe eticheta de zonă
Pe eticheta de încorporare
- nume (preferați atributul id )
Pe eticheta formularului
Pe eticheta capului
Pe eticheta html
Pe eticheta iframe
Pe eticheta de intrare
Pe eticheta img
- longdesc
- lowsrc
- nume (preferați atributul id )
Pe eticheta de link
- set de caractere
- metode
- rev
- ţintă
- urnă
Pe metaetichetă
Pe eticheta obiect
- Arhiva
- ID-ul clasei
- codificat
- codebase
- codetip
- declarat
- așteptare
Pe eticheta de opțiune
- nume (preferați atributul id )
Pe eticheta param
Pe eticheta scriptului
Pe eticheta de masă
- dimensiunea paginilor de date
- rezumat
Pe eticheta td
Pe th tag - ul
API
HTML5 introduce mai multe API-uri noi care pot ajuta la construirea aplicațiilor web și pot fi utilizate împreună, oferind elemente noi introduse pentru aplicații, inclusiv:
- Desen 2D utilizat cu noua etichetă de pânză ,
- redați videoclipuri și sunete / muzică utilizate cu noile etichete video și audio,
- aplicații offline ,
- ediție în combinație cu noul atribut numit contenteditable ,
-
drag and drop în combinație cu așa-numitul atribut draggable ,
- acces la istoricul de navigare și pagini pentru a adăuga această funcție istoricul de navigare, pentru a preveni backspace probleme buton .
În plus, API-urile terților sunt integrate în acest standard, cum ar fi WebGL de la Khronos Group, permițând adăugarea de conținut 3D la pagini.
Controverse
Spre sfârșitul anului 2012, o campanie condusă de mai multe asociații pentru apărarea libertăților digitale, inclusiv Free Software Foundation , a încercat să atragă atenția asupra includerii blocărilor digitale (DRM) în standardul HTML5.
Note și referințe
-
(ro) W3C confirmă faptul că HTML5 va fi disponibil în mai 2011 pentru comentarii , www.w3.org, 14 februarie 2011.
-
„ Ce funcții noi oferă HTML 5.1?” " ,14 august 2017
-
(în) Proiect de lucru W3C .
-
(în) Bug 13240 - Luați în considerare înlocuirea cu , w3.org.
-
(în) W3C adaugă element de timp înapoi la HTML5 , webmonkey.com, publicat în noiembrie 2011 ..
-
http://www.w3schools.com/tags/att_command_type.asp
-
„ <comandă>: elementul de comandă HTML ” , pe MDN Web Docs (accesat la 11 iulie 2020 ) .
-
(ro) Informații W3C :
-
(in) HTML 5 fotografii pentru a permite conexiuni peer to peer din javascript, conexiunile obiectivului tezei nu vor fi TCP brute. Specificația completă poate fi găsită la http://dev.w3.org/html5/websockets/ .
-
(în) Clienți inteligenți: ReverseHTTP și WebSockets .
-
(în) Va permite aplicațiile web HTML5 să facă conexiuni HTTP peer-to-peer?
-
P2P, audio și video din meniul HTML 5 .
-
Spuneți-i W3C: nu dorim un Hollyweb http://www.defectivebydesign.org/no-drm-in-html5/en
-
Protecția împotriva sosirii DRM în HTML5 http://www.numerama.com/magazine/25802-levee-de-boucliers-contre-l-arrivee-des-drm-au-sein-du- html5.html
Vezi și tu
Bibliografie
- (ro) Mark Pilgrim , HTML5: Up and Running , O'Reilly ,august 2010, 205 p. ( ISBN 978-0-596-80602-6 )
- (ro) Jeremy Keith ( pref. Jeffery Zeldman), HTML5 pentru web designeri , A Book Apart,2012, 87 p. ( ISBN 978-0-9844425-0-8 )
Articole similare
linkuri externe