HTML5 este cea mai recentă versiune de HTML, în scopul de a simplifica dezvoltarea de aplicatii web. Sintaxa HTML5 este mult mai ușoară în comparație cu HTML4, și oferă multe caracteristici noi. Acest articol oferă o introducere în HTML5.

Cum să utilizați HTML5?

Offline aplicații cache

Aplicațiile HTML5 pot fi pornite pentru a rula offline. HTML5 oferă funcția de stocare offline, numit un cache al cererii pentru stocarea de fișiere. Deci, dacă utilizatorul este offline, browser-ul încă mai are acces la fișierele necesare. Acesta poate fi HTML, CSS, Javascript, sau orice alte resurse necesare pentru a vizualiza pagina de web.

Drag and Drop

HTML5 oferă o funcție incorporată Drag and Drop, care permite dezvoltarea de aplicații interactive. Cu Drag & Drop aveți posibilitatea să mutați orice element în locul potrivit.

Geolocation

Geolocation API în HTML5, permite să partajați locația dvs. cu site-uri de încredere. Confidențialitatea este importantă în funcția de geolocalizare. Browserele nu au nevoie să trimită informații despre locație la site-uri Web, fără permisiunea expresă a utilizatorului. De exemplu, dacă un utilizator accesează o pagină web, în care, de asemenea,este prezentă funcția de geolocalizare folosind browser-ul Firefox. Browser-ul va cere permisiunea, dacă utilizatorul dorește să împărtășească locația lui. Dacă utilizatorul consimte, Firefox va aduna informații despre punctele de acces fără fir în apropiere și adresa IP a computerului vizitatorilor și va trimite aceste informații în Google Location Services, care este un serviciu de geolocalizare Firefox implicit.

Audio și video

În prezent, există facilități HTML necesare pentru punerea în aplicare a fișierelor multimedia. De aceea, fișierele media se includ în HTML folosind diferite plugin-uri . De exemplu, Flash este utilizat pe scară largă pentru a încorpora video și fișiere audio. Cu toate acestea, acest lucru poate fi foarte ușor de făcut în HTML5 cu ajutorul elementelor audio și video, fără utilizarea de plugin-uri.

Formulare de introducere

HTML5 introduce mai multe elemente noi de intrare, cum ar fi pop-up calendare, selectoare de culori și multe altele. Cu aceste funcții de intrare se poate crea o forma foarte eficienta, cu un control mai bun al intrării și verificării.

Sintaxa simplificată

Doctype:

Declarația DOCTYPE este primul lucru, ce trebuie de făcut într-un document HTML. Ea indică browser-ui web versiunea limbajui de marcare a paginii.
Exemplu: Versiunea HTML 4.01 Transitional DOCTYPE este definit ca:

Iar versiunea XHTML 1.0 Transitional DOCTYPE este definită ca:

În HTML5, declarația DOCTYPE este mult mai ușoară, și arată astfel:

Codificarea caracterelor:

Pentru a afișa documentul HTML, programul ar trebui să selecteze o codificare. Codificarea caracterelor indică browser-ului ce set de caractere să utilizeze la conversia biților în caractere.
Exemplu: Codificarea caracterelor UTF-8 în HTML 4.01:

Pentru XHTML:

Sintaxa de codificare a caracterelor este foarte simplă în HTML 5, și anume:

Astfel, cel mai simplu documentul HTML5 ar fi:

Tag-ul script

Tag-ul script este folosit pentru a defini partea de client, cum ar fi JavaScript. În HTML 4 este necesar de folosit atributul type, dar nu este necesar în HTML5.
De exemplu, în HTML4, tag-ul script este folosit astfel:

Iar în HTML 5:

În tag-ul script în HTML5 este introdus un nou atribut opțional «async», care indică browser-ului să execute script-ul asincron cu restul paginii, astfel încât script-ul va fi executat până când pagina încă se încarcă. Acest lucru se scrie astfel:

sau

Tag-ul link

Tag-ul link defineste o relație dintre documente și resursele externe. Această etichetă este frecvent utilizată pentru a include fișiere CSS.
De exemplu:

În HTML5, atributul type este opțional pentru tag-ul link, similar și pentru tag-ul script.
De exemplu:

Elemente noi în HTML5

În HTML5 s-au adăugat unele etichete foarte interesante și utile pentru structurarea aspectului și dezvoltarea mai ușoară. Aici sunt unele dintre cele mai importante tag-uri:

Tag-ul header

Tag-ul header conține titlul paginii web, care este, de obicei, în partea de sus a paginii care conține logo-ul și alte informații, cum ar fi un slogan, și meniuri, etc. În loc de a folosi:

puteți scrie pur și simplu

Tag-ul nav

Tag-ul nav este folosit pentru a naviga prin meniu. De exemplu, în loc de

aveți posibilitatea să utilizați

pentru navigare.

Tag-ul arcticle

Tag-ul arcticle prezintă conținutul independent și separate. Un exemplu de utilizare a tag-ul poate fi un post pe blog, articol de știri, postare pe forum, comentariul utilizatorului, etc.

Tag-ul section

Tag-ul section este folosit pentru a separa diferite secțiuni ale paginii. Tag-ul grupează conținutul care, de obicei, vine după antet sau înaintea subsolului. Dacă este necesar, secțiunile pot fi imbricate între ele.

Tag-ul aside

Tag-ul aside definește o secțiunea de pagină cu conținut care este tangențial legat de conținutul din jurul lui. Tag-ul poate fi folosit pentru panourile laterale sau orice alt conținut care poate fi analizat separat de conținutul principal al paginii.

Tag-ul figure

Tag-ul figure este folosit pentru comentarii la ilustrații, diagrame, fotografii, și la listele de cod, etc.Tag-ul figcaption este utilizat ca titlu pentru tag-ul figure.

Tag-ul footer

Este folosit pentru a reprezenta secțiunea subsol și este, de obicei, situat în partea de jos a paginii. Footer conține de obicei informații precum numele autorului, privind drepturile de autor, link-uri către termenii de utilizare și politica de confidențialitate, etc. Informațiile de contact în footer trebuie să fie scrisă în tag-ul address.

Elementele exluse

În afară de cele noi, există unele elemente care nu mai sunt acceptate în HTML5. Aici sunt unele dintre elementele șterse:

După cum a-ți văzut, elemente cum ar fi cadrele - frame, frameset și noframes au fost eliminate din HTML5.

Tag-ul Font
Elementul font se utiliza pentru a determina fontul, dimensiunea și culoarea textului.

Tag-ul strike

Elementul strike a fost necesar pentru a determina textul tăiat cu o linie. În schimb, utilizați acum

Tag-urile u, center, big, applet și acroniym

Eticheta

utilizată pentru a determina textul subliniat.

ajustă textul și conținutul în centru.

folosit pentru a mari textul.

utilizată pentru a determina applet-ul încorporat. HTML5 suportă tag-ul object în loc.

Exemplu, de cod complet pentru o pagină simplă în HTML5:

Cod CSS, în fișierul style.css:

Rezumând, putem spune cu siguranță că viitorul este, în principiu, în orice caz,este pentru HTML5. Având în vedere faptul că Apple și deja Microsoft au abandonat utilizarea Flash-ilor, este logic de înțeles că HTML5 este cel mai bun, pentru ziua de azi.