Elementele de bază ale aspectului semantic pe html5

Buna ziua tuturor! Așa că a început olimpiada mult așteptată. Îi doresc tuturor participanților mare succes și noroc și bineînțeles că sunt foarte rău pentru Rusia, pentru că Eu însumi sunt rus. Și acum la subiectul postului. În acest articol, să vorbim despre aspectul modern al HTML5, avantajele și importanța acestuia în general. Încă nu am putut trece la html5, m-am gândit că era doar nou, nu toate suporturile pentru browsere, în special IE 7-8. Dar nu a fost așa.

Deci, să aruncăm o privire asupra html5 în pași și să începem de la începutul documentului - Doctype. Doctype în html5 este scris mult mai simplu, astfel încât să vă puteți aminti cu ușurință.

Denumirea de codificare este prescrisă după cum urmează

Simți diferența? Codul a devenit mult mai ușor și este, de asemenea, foarte ușor de reținut. De asemenea, când conectați scripturi și stiluri, nu este necesar să specificați tipul acum.

Apoi definim limba:

Acest script poate fi de asemenea descărcat de pe serverul Google.

În continuare, enumerăm principalele elemente structurale:

Citiți și: Font-Face: conectarea fonturilor non-standard

Trebuie remarcat faptul că noile elemente html5 sunt de natură inline, adică pentru afișarea corectă, trebuie să le faceți blocuri.

Pe baza celor de mai sus, puteți schița un layout de pagină mic pe html5

După cum puteți vedea, html5 are un avantaj distinct față de html4, atât în ​​termeni de marcare, cât și în termeni de CEO. Să vorbim despre CEO-ul de mai jos.

În plus față de etichetele principale, se folosesc adesea și următoarele etichete:
placeholder (placeholder = "Text") - afișează o inscripție în câmpul de introducere și atunci când scrieți, acesta dispare automat. Acest atribut a apărut în html5, acum nu mai există scripturi suplimentare pentru afișarea textului în câmp, de exemplu, în câmpul de căutare.

- selectarea unui cuvânt sau a unei fraze importante. Observați culoarea de fundal galben.

- afișează o înregistrare audio pe site cu un player de browser standard

HTML5 și SEO

Una dintre caracteristicile cheie ale HTML5 și, în opinia mea, cea mai importantă este separarea de către robotul de căutare a tuturor blocurilor prin semnificația lor, adică segmentarea paginilor web. În html4 era imposibil să faci asta, pentru că Eticheta standard div nu adaugă semnificație semantică elementului care se află în interiorul acestei etichete. Cu ajutorul elementelor noi, antetul, articolul, deoparte, subsolul se schimbă. Ie Aproximativ vorbind, ei "spun" roboților de căutare ce elemente să le acorde importanță și pe care să le ignore. De exemplu, un bot de căutare va înțelege cu ușurință informațiile între etichete

este un drept de autor și informații similare pentru vizitator.

Citește și: Firebug - un instrument indispensabil pentru fiecare dezvoltator web

Elemente care afectează indexarea în motoarele de căutare

Eticheta articolului este una dintre cele mai importante atunci când segmentați paginile site-ului dvs. Această etichetă indică în mod explicit pentru motoarele de căutare unde se află conținutul principal al site-ului. Și știm cu toții că conținutul este în primul rând ceea ce vizitatorii vin la site-ul. Se presupune că PS va acorda o atenție maximă conținutului dintre etichete

, aruncarea sau împiedicarea celorlalte elemente.

Elementul secțiunii împarte toate marcările în secțiuni diferite. Ce dă? Roboții de căutare sunt bine orientați pe o pagină web, care este bine structurată. Dacă utilizați eticheta corect

, atunci puteți construi cu ușurință ierarhia de informații a documentului și, la rândul său, îmbunătățește indexarea site-ului în ansamblu.

Cu ajutorul etichetei antet, roboții de căutare pot găsi cu ușurință logo-ul, numele site-ului, sloganul, navigarea principală (meniul principal) de pe site.

Această etichetă definește structura de navigare de pe site.

Spre deosebire de HTML4 în HTML5, link-urile au atribute mai semnificative.

Iată atributele principale ale legăturilor din HTML5:

legături externe care indică resurse externe

ajutor - link-uri pentru a ajuta la pagini

Restul atributelor pot fi vizualizate aici.

Iată o prezentare generală generală a marcajului HTML5. În ceea ce mă privește, am trecut mult timp la aspect folosind HTML5 și majoritatea șabloanelor de pe site-urile mele au fost deja traduse în HTML5, așa doar mâinile nu ajung la acest blog.

Asta e tot. Toate pentru moment. Ne vedem în posturile următoare.

Ați trecut deja la HTML5?

Zaur Magomedov

La mine puteți:

Ordonare comandă Comandați un site pe bază de cheie

Articole similare