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

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

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