Standardul HTML5 a fost finalizat și lansat în 2014 și este ceea ce ar fi trebuit să fie HTML când a fost lansată prima versiune în toți acei ani în urmă. HTML 2.0 a fost primul adevărat „standard”, publicat până în 1995. Doi ani mai târziu, HTML 3 a fost publicat. Alți doi ani mai târziu, HTML 4.01 a fost introdus și a fost calul de lucru al internetului de atunci.
Primul „proiect de lucru” al HTML5 a fost introdus încă din 2008, cu un suport surprinzător de larg pentru browser în acel moment. HTML5 pe care îl cunoaștem astăzi este foarte diferit de HTML-ul trecutului și aici vom discuta despre ce s-a schimbat cel mai recent standard odată cu lansarea sa. De la lansarea HTML5, acesta a fost acceptat pe scară largă și toate caracteristicile și capacitățile sale sunt acum acceptate de toate browserele majore. Există încă câteva sughițe aici și acolo, dar HTML5 în general s-a asimilat bine cu experiența online modernă.
În calitate de dezvoltator web, ați putea fi fie un vechi profesionist care a stăpânit standardele mai vechi, fie un începător urmărind în mod curios dezvoltarea de noi standarde la margine. Oricum, trebuie să începeți tranziția la HTML5.
HTML Vs HTML5 Infografic
Primul pas către trecerea la HTML5 sau învățare este să înțelegeți diferența dintre standardul mai vechi și cel mai recent. Iată câteva diferențe cheie între HTML și HTML5:
-
HTML5 este un limbaj viu
HTML5 este un limbaj viu, o lucrare în desfășurare. Este uimitor să vezi ce poate face HTML5, dar este important să știi că HTML5 nu este o versiune complet standardizată precum HTML4, care are mai mult de zece ani și are un standard setat, neschimbător.
Dacă intrați în HTML5, va trebui să efectuați câteva actualizări. Atributele și elementele sunt adăugate și modificate regulat în fiecare an. Acest lucru depinde, de asemenea, de cât de mult utilizați elemente bogate, dar este cu siguranță unul dintre riscurile pe care le implicați atunci când utilizați un limbaj fluid, în schimbare, precum HTML5.
-
HTML5 este mai simplu
Deși HTML5 are riscuri precum actualizări constante, în general este ușor să ții pasul cu modificările și actualizările din cauza unei sintaxe mai simple în comparație cu HTML4. De exemplu, aveți o declarație foarte simplă la începutul paginii pentru a o seta ca o pagină HTML5:
Declarația Doctype simplă este una dintre simplificările făcute în sintaxa HTML, care este compatibilă cu toate versiunile de la HTML4 și până la XHTML1. Cu toate acestea, HTML5 nu este compatibil cu SGML.
Cursuri recomandate
- Antrenament gratuit de programare Python
- Curs gratuit de certificare de testare software
- Cursuri gratuite de programare Java
- Curs complet PERL
-
Noul element
HTML5 vine cu o serie de elemente noi și elimină alte câteva (pe care le vom acoperi într-un timp), dar unul dintre elementele sale cheie adăugate este, ceea ce a avut un impact extrem de mare asupra utilizării Adobe Flash în site-urile web. Deși Flash este încă utilizat de mai multe site-uri web, HTML5 a fost adoptat de mulți și o mulțime de oameni cred că va face ca Flash să fie învechit în cele din urmă. Numai timpul va decide asta; până atunci, elementul cascadă HTML5 s-a dovedit a fi o alternativă bună la Flash.
Elementul poate fi folosit pentru a desena grafică cu diverse forme și culori prin scripturi, de obicei JavaScript. Elementul este pur și simplu un container pentru grafică; trebuie să utilizați un script pentru a defini grafica. În mod implicit, o pânză este o zonă dreptunghiulară fără conținut sau margini. Piața este așa:
Este important să specificați un atribut id, precum și lățimea și înălțimea pentru definirea dimensiunii pânzei. Puteți adăuga un atribut de stil pentru a defini chenarele.
Puteți utiliza și JavaScript, precum următorul exemplu:
var c = document.getElementById („myCanvas”);
var ctx = c.getContext („2d”);
ctx.fillStyle = "# FF0000";
ctx.fillRect (0, 0, 150, 75);
-
Noile și elementele
Un alt plus important cu care vine HTML5 sunt elementele noi și care indică o nouă anatomie web. Cu aceste noi etichete, nu mai este necesară identificarea celor două elemente cu o etichetă.
Specificațiile definesc elementul antet ca reprezentând un grup de ajutoare „de navigare” sau „introductive”. Ca atare, elementul poate fi utilizat pentru a defini o introducere într-o secțiune a unei pagini sau pe întreaga pagină în sine. Iată un fragment de cod care folosește elementul antet.
Titlu
De autor Arhivat în Web 2.0
Corpul textului
Specificațiile HTML5 se referă la elementul picior ca reprezentând „un subsol pentru cel mai apropiat conținut al secțiunii strămoșilor sau elementul rădăcină al secțiunii” și conține, în general, informații despre secțiune, cum ar fi numele autorului, date despre drepturile de autor, link-uri la documente etc.
În mod logic, subsolul este plasat în partea de jos a paginii web. Dar poate fi plasat și la sfârșitul unei secțiuni de pagini. Iată un exemplu de codificare care folosește elementul de subsol:
Titlul conținutului
De autor Arhivat în Web 2.0
Corpul textului.
Etichete: prompt de comandă, busolă, CSS, Sass, terminal
10 aprecieri
Aici, subsolul conține etichete de postare și postarea „Facebook îi place”.
-
Elementele și
Acum, dacă ai parcurge exemplele de mai sus, ai fi observat alte câteva elemente noi, cum ar fi. Acest element, împreună cu elementul, vă permite să marcați anumite secțiuni ale aspectului dvs. și sunt extrem de avantajoase pentru optimizarea motorului de căutare. Elementul articol este specificat ca reprezentând o componentă de sine stătătoare a unei pagini web care poate fi reutilizabil sau distribuibil independent. Acesta ar putea fi un ziar, postare pe forum, articol în revistă, intrare pe blog sau orice altceva.
Elementul articol are, în general, propriul său titlu într-un element de antet și poate chiar un subsol, așa cum ați văzut în exemplul de mai sus. Puteți pur și simplu să vă gândiți la element ca la o intrare pe blog sau o bucată de conținut independentă; partea complicată este identificarea a ceea ce este independent. Mai simplu spus, o bucată de conținut independentă este una care are sens de la sine.
O modalitate bună de a ști dacă o bucată de conținut este independentă este întrebând dacă are sens într-un flux RSS. Articolele de blog și paginile statice au sens, iar unele site-uri au fluxuri de comentarii. Dar un paragraf din articol nu ar avea niciun sens separat de restul conținutului. Iată un fragment de cod cu etichete de subsol și publicare.
Titlul conținutului
Publicat: 2016-02-24
Corpul textului
Licență Creative Commons Attribution-ShareAlike
Elementul de secțiune, conform specificațiilor W3C, reprezentând o „secțiune generică” a unei aplicații sau a unui document. Ar putea fi confundat cu eticheta, așa că să ștergem confuzia în acest moment. Eticheta de secțiune este utilizată atunci când conținutul din ea trebuie să fie grupat separat de restul paginii cu o singură temă și când ar trebui să fie văzut ca o intrare în conturul paginii. Cu toate acestea, elementul div este specificat ca un „container generic”, ceea ce înseamnă că nu este separat de pagina principală, în afară de propriile sale titluri, limbă și atribute de clasă.
-
Noi și Elemente
Noile și elementele HTML5 fac parte din specificațiile Elementelor Interactive, dar sunt printre cele mai puțin discutate elemente de către dezvoltatori. Având în vedere faptul că web-ul s-a transformat în documente paginate și documente mai puțin conectate, aceste elemente sunt un plus bun pentru o mai mare interactivitate web.
Elementul nu trebuie confundat cu elementul, care este definit ca o etichetă de navigare HTML care reprezintă blocul de navigare pe pagină. De obicei, conține legături pentru utilizatori să sară prin secțiuni din pagină sau către o altă pagină. Pe de altă parte, eticheta de meniu reprezintă comenzi de meniu pentru simplitate în aplicații desktop și mobile. Iată un exemplu al elementului în acțiune:
Salut Lume
Între timp, elementul este un alt mod de a aranja imagini și text. Este utilizat împreună cu elementul pentru marcarea ilustrațiilor, diagramelor și fotografiilor. În continuare, este prezentat un fragment scurt de cod care conține ambele elemente în acțiune.
-
Noi și Elemente
Acestea sunt două completări majore la standardul HTML5. Eticheta audio, precum eticheta video, permite dezvoltatorilor să încorporeze muzică și audio pe site-ul lor web. Spre deosebire de standardul anterior, nu sunteți limitat la adăugarea de muzică midi, deși există încă unele limitări privind tipul de fișiere folosite. Majoritatea browserelor legate de Webkit acceptă fișiere MP3 obișnuite, dar altele acceptă doar formatul OGG. Vestea bună este că există tone de convertoare de fișiere și puteți furniza pur și simplu două versiuni ale fișierului audio; versiunea potrivită va fi preluată automat.
Puteți utiliza eticheta audio ca orice alt element. Iată un exemplu de fragment:
Eticheta audio are, de asemenea, o serie de atribute pentru controale suplimentare, inclusiv atribute de evenimente, iar evenimentele includ evenimente de fereastră, evenimente de formă, evenimente media și evenimente de mouse. Elementul video are, de asemenea, o serie de atribute de conținut, inclusiv SRC, atribute globale, buclă, control, preîncărcare și poster. Atributele SRC, buclă, redare automată și controale sunt destul de explicative și sunt identice pentru toate elementele media, în timp ce atributele globale sunt comune pentru toate elementele. Acestea includ meniul dir, ascuns, contextual și multe altele.
Există câteva alte atribute multimedia și elemente care vin cu HTML5, cum ar fi elementul de pistă care furnizează piese text pentru elementul video.
-
Noi forme
HTML5 vine acum cu formă și elemente. Dacă nu intenționați să utilizați mai multe tabele din pagină, puteți elimina și atributul și aruncați o privire asupra modificărilor făcute înainte de a merge mai departe.
-
Nu mai multe și elemente
Aceasta înseamnă că toate atributele care permit dezvoltatorilor să creeze o tabelă nuanțată perfect definită, precum bordura, bgcolorul, alinierea, înălțimea, regulile și multe altele. Toate aceste atribute sunt înlocuite de CSS.
-
Nu mai mult și
Acest lucru este excelent pentru cei care au lucrat în primele zile ale HTML-ului. Atributele frameet, frame și noframes au fost eliminate în întregime, împreună cu altele precum clipuri, basefont și multe altele. Va trebui să gestionați fără a utiliza tabele pentru aspect. Tabelele fac parte din HTML5, dar nu sunt destinate pixelilor mai mult. Specificațiile spun că tabelele nu ar trebui utilizate pentru ajutoarele de layout și pentru a controla aspectul paginii.
Concluzie
După cum puteți vedea clar, există o mulțime de modificări ale HTML5 și trebuie să îl utilizați cu grijă și precauție. De asemenea, trebuie să vă actualizați cunoștințele în limbă, deoarece acestea se schimbă în timp și primiți mai multe actualizări. Trebuie să opriți utilizarea elementelor pe care HTML5 le-a eliminat de la sine și să utilizați noile elemente HTML5 care vor rămâne cu siguranță, cum ar fi etichetele antet sau subsol.
Ceea ce ați văzut mai sus este versiunea simplificată a câtorva modificări efectuate de HTML5 odată cu lansarea sa. Dar să fim sinceri aici; nu este nimic simplu sau lent în modul în care este adoptat HTML5, iar noul standard adaugă o mulțime de funcții care sunt cruciale pentru o experiență modernă a utilizatorului. Trebuie să ții pasul cu noul limbaj și să înveți și unele CSS, care au un rol mai mare decât înainte.
Lucrul bun despre aceste schimbări este că, deși sunt mari, sunt în bine și acest lucru este înțeles de toți factorii interesați aici. Navigatorii vor fi mai puternici pe măsură ce se îndreaptă către nor, cu capacitatea de a se descurca mai mult de unul singur. Cu lucruri precum Ajax și cu încorporare video și audio și așa mai departe, va fi mult mai ușor să codați într-o metodă simplă și să permiteți browserului să își asume sarcina grea. De exemplu, noi elemente de structură, cum ar fi figura, subsolul, rezumatul și secțiunea sunt toate referite la structura documentului, iar redarea este lăsată în browser.
Articole similare:-
Iată câteva articole care vă vor ajuta să obțineți mai multe detalii despre HTML și HTML5, așa că treceți doar prin link.
- HTML și XML
- HTML5 vs Flash Top 9 diferențe (cu infografie)
- HTML vs XHTML
- HTML5 vs Flash
- Diferențe uimitoare HTML5 față de JavaScript
- 10 sfaturi utile despre programarea Python (trucuri)