Avantaj HTML5 Vs XHTMLHtml5 oferă un avantaj foarte important față de xhtml tradițional și este că are etichete pentru a defini o structură semantică.
Numim codul html semantic html în care structura are sens pentru motoarele de căutare și, prin urmare, servește pentru poziționarea SEO. Este vorba despre fiecare motor de căutare care poate înțelege ce este fiecare parte a unei pagini web, chiar și eliminând tot conținutul.
XHTML nu are etichete care să permită definirea grupurilor sau blocurilor de elemente cu sens semantic.
HTML5 rezolvă această problemă oferind elemente și etichete care ne permit să definim semantica paginii web, unele dintre ele fiind headeR, subsol, nav, hgroup, secțiune și articol, printre altele.
În continuare vom defini cel mai important în sens semantic:
- antet: Definiți blocul de antet al paginii web și atașați conținutul antetului.
- nav: definește un bloc care reprezintă un meniu, prin urmare motoarele de căutare atunci când găsesc această etichetă știu că este structura de navigare.
- hgroup: definiți și grupați titluri și acordați astfel o importanță diferită fiecărui titlu.
- secțiune și articol: Elementele anterioare care definesc div> straturi și sunt înlocuite cu secțiunile și etichetele articolelor, care au un sens mai semantic atunci când definesc secțiunile și articolele din secțiuni.
- deoparte: definește și grupează elemente tangențiale ale paginii web. Adică, conținut care nu este cel principal, cum ar fi coloanele laterale sau Bara laterală a web-ului
- subsol: definește și grupează elemente în subsolul paginii web.
Utilizarea HTML5 nu implică faptul că XHTML nu mai este utilizat, ele sunt încă foarte bune la organizarea structurii și grupării elementelor paginii web sau la invocarea Jquery, amintiți-vă că HTML5 servește pentru a-i da un sens semantic, dar în cadrul blocului puteți continua pentru a utiliza orice altă etichetă XHTML. Să vedem un exemplu mai jos
Subtitlu
sigla web
Putem vedea că odată cu straturile structura a fost definită și în interiorul antetului antetului și a fost definit un grup h pentru a grupa titlurile, precum și un strat care conține sigla.
Astfel, straturile XHTML ne permit să definim structura paginii web pentru a avea o organizare mai bună pentru programator, apoi XHTML ne ajută să definim blocuri semnificative pentru structură și HTML5 ne permite să creăm blocuri semnificative pentru motoarele de căutare și SEO. Cum este utilizată eticheta secțiunii în HTML5 pentru SEO.
Utilizarea etichetei de secțiune este foarte asemănătoare cu utilizarea unui strat div, cu diferența că secțiunea oferă sensul semantic și toate elementele incluse în secțiune sunt legate de semantica web. Este important să nu folosim secțiunea pentru a grupa elemente în niciun bloc, deoarece trebuie să avem elemente fără sens grupate pentru a atribui stiluri CSS sau un anumit efect de programare.
Dacă motivul pentru crearea unui bloc este să aplici CSS sau să îl folosești din cod cu un script, atunci ar fi mai bine să nu folosești HTML5, deoarece blocul nu are conținut semantic. În acest caz trebuie să creăm un bloc cu stratul div al xhtml. După cum se vede în exemplul de mai sus, sigla nu are sens să folosești HTML5, deoarece CSS este utilizat pentru a afișa imaginea.
Stratul sau secțiunea DIVUn mod de a gândi relevanța fiecărui bloc pentru a determina dacă este un strat div sau o secțiune, dacă sunt vizitatorul paginii web. Acest bloc îmi oferă informații utile? Dacă răspunsul este da, va fi o secțiune, dacă nu un strat.
Când folosim elementul articol, definim un bloc care are simț semantic și conținut pe care motoarele de căutare îl pot accesa. Eticheta articolului nu se referă neapărat la o notă text, poate fi un produs, imagini sau un formular.
Să vedem un exemplu simplu de pagină web și codul acesteia în HTML5:
Honda Civic
La fel ca în cadrul articolului putem pune straturi sau paragrafe sau alte elemente xhtml în unele cazuri, conținutul web ar putea avea un singur articol și în cazul în care pagina are liste sau cataloage ca în cazul anterior al Autos Online putem avea un articol pentru fiecare produs afișat și, de asemenea, propriul antet pentru a da mai multă relevanță titlurilor.
De asemenea, putem aplica stiluri css elementelor HTML5, să vedem un exemplu simplu pentru un blog online cu HTML5 și CSS3.
Titlul 1
Postat pe 06 decembrie 2014 de Sergio - 3 comentarii
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus hatred, ultricies eu pharetra dictum, laoreet id hatred …
Titlul 2
Postat pe 1 decembrie 2014 de Sergio - 20 de comentarii
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus hatred, ultricies eu pharetra dictum, laoreet id hatred …
Acest lucru arată că acestea nu sunt doar elemente semantice, ci pot face parte și din proiectarea și structura paginii web.
Acest element servește la definirea unui bloc secundar în structura paginii web, este conținut sau date pe care dorim să le arătăm vizitatorului, dar nu este un conținut principal.
Putem asocia eticheta aparte cu coloanele laterale sau cunoscută în mod obișnuit ca Sidebar, care va avea conținut secundar din meniul de navigare, linkuri către alte pagini web, formulare de autentificare. Putem crea, de asemenea, un articol în cadrul unui articol, ceea ce înseamnă că ceea ce este în parte este o completare a conținutului articolului, dar nu este o parte directă a conținutului respectiv, de exemplu dacă avem un articol despre unele vânzări și într-un articol publicăm statistici .
În cele din urmă, amintiți-vă obiectivul Layout:
Ce este aspectul unei pagini web?Aspectarea unei pagini web este de a aduce designul grafic în cod html, css localizând fiecare element corespunzător prin cod pe pagina web.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
