Unul dintre scopurile creării versiune noua HTML5 a fost o simplificare a marcajului documentului. Soluția la această problemă a fost crearea de noi etichete care sunt responsabile de structurarea documentului.

Principiul de bază al construirii unui arbore de pagină se bazează pe împărțirea întregii pagini în elemente structurale - blocuri sau secțiuni. Aceste secțiuni includ etichete precum < header> (antetul site-ului), < section>, < aside> , Și < footer> (subsol). Înainte de crearea etichetelor de mai sus, designerii de layout au folosit etichete < div> pentru a structura documentul folosind clase și id-uri unice. Cod construit exclusiv pe < div> foarte greu de înțeles și nu poate fi citit. Motivul pentru aceasta este lipsa de încărcare logică a etichetei. Acesta a fost o piedică majoră pentru motoarele de căutare.

Acest fapt a stimulat apariția etichetelor cu încărcătură semantică, care au devenit așa-numita „hartă” pentru roboți din pădurea densă a codului.

Beneficiile utilizării noilor etichete

Optimizare motor de căutare

Prima și semnificativă parte pozitivă a utilizării HTML5 modernizat este ușurința procesării codului pentru roboți de căutare. În prezent, roboții disting cu ușurință informațiile auxiliare de pe site de subiectul și conținutul principal.

prin urmare motoare de căutare crește eficiența găsirii conținut unicși plagiat.

Cu toate acestea, este de remarcat faptul că mulți SEO nu au înțeles esența principală a principiului funcționării motoarelor de căutare pe un astfel de marcaj, dar aceasta este o chestiune de timp.

Disponibilitate

Pentru o analiză vizuală a disponibilității noilor metode de layout, luați în considerare un exemplu de site:

Privind acest site, este destul de ușor să aflați unde este conținutul principal și unde sunt informațiile de susținere și este, de asemenea, clar vizibil unde se află antetul site-ului, meniurile și subsolul. Cu toate acestea, la utilizare browsere vocale este foarte greu să ajungi la esența site-ului, de exemplu, dacă este un site de magazin. Pentru a ajunge la esența gamei de produse oferite, utilizatorul nu va avea nevoie de perseverență și răbdare puternică, pe care nu o are toată lumea.

În astfel de cazuri, calea de ieșire este utilizarea de noi etichete. Ei permit doar unul comanda vocala trece de la numele site-ului la meniu, conținut principal și elemente auxiliare de navigare a site-ului.

Aceste aspecte pozitive ale HTML5 au influențat interesul neașteptat al creatorilor sisteme alternative de căutare, ei fac o părtinire serioasă asupra semanticii documentului.

Pe scurt despre scopul principal al etichetelor structurale:

secțiune

Această etichetă este responsabilă pentru structurarea blocurilor legate între ele. De asemenea, folosind această comandă, puteți împărți textul în capitole, secțiuni și subsecțiuni. De obicei, există un titlu într-o astfel de etichetă.

Pentru mai multe informații despre utilizarea acestei etichete pentru a construi structura semantică a unui document, consultați articolul „Construirea structurii documentului în HTML5 folosind secțiunea „

Pentru o explicație mai clară, să revenim la exemplul împărțirii unui text mare în capitole și paragrafe, care pot avea și subsecțiuni și subparagrafe. Să ne referim la următorul exemplu de cod pentru materialul de ancorare

< article> < h1>Titlul articolului < p>Introducere... < section> < h1>Titlul subsecțiunii articolului < p>Conținutul subsecțiunii < section> < h1>Titlul celui de-al doilea paragraf al articolului < p>Conținutul subsecțiunii

Apropo, rețineți prezența mai multor titluri cu markerul h1, acesta este un truc special pe care îl vom discuta mai târziu.

Unii utilizatori susțin că < section> nu este altceva decât o înlocuire a etichetei aspectul blocului < div> . Cu toate acestea, această afirmație nu este adevărată. Există o distincție clară între când secțiunea este adecvată și când nu este. De exemplu, atunci când vă legați la un anumit container de stil, trebuie doar să vă referiți la < div> . De asemenea, merită să acordați atenție încărcării semantice care se află în blocul de secțiuni nu este utilizat în absența unui titlu natural.

articol

Webmasterii cu experiență se referă la această secțiune ca un caz special al etichetei. < section> . Articolul evidențiază partea „autonomă” (una care poate fi decupată din pagină ca întreg, fără a-și pierde sensul) partea paginii, care, la rândul ei, constă din elemente interconectate.

Exemplele de părți independente includ anunțurile postate pe blog, blocuri de anunțuri, diverse widget-uri (de exemplu, cu vremea).

Cu toate acestea, specificația descrie acest concept destul de abstrus, în urma căruia a existat o mulțime de controverse cu privire la ce anume să folosești: < section> sau < аrticle> . Principalele dezacorduri cu privire la această problemă includ următoarele puncte:

• pentru a crea containerul principal al paginii web, ar trebui să utilizați < section>, < аrticle> sau < div> . Pe de o parte, tot conținutul este într-un fel legat unul de celălalt, dar site-ul poate fi numit o unitate independentă.
• cum să proiectați mai exact antetul site-ului sau, mai degrabă, ce etichete să folosiți?
• și, în sfârșit, cum să lucrezi cu conținutul principal al site-ului? Trebuie folosit < section> Cu < аrticle> în interior sau utilizați exclusiv unul < аrticle> .

Această confuzie amintește de vremurile în care au apărut dispute similare cu privire la utilizarea etichetelor. < acronim> Și < abbr> . La acea vreme, problema a fost rezolvată destul de simplu, dar radical: au refuzat să folosească < acronim> .

Și în legătură cu toate acestea, apare o întrebare complet logică și legitimă: de ce folosirea < аrticle> , dacă poți să-l abandonezi și să lucrezi numai cu < section> ? În cele din urmă, modernizarea HTML5 a fost menită să ușureze munca webmasterilor.

Cel mai probabil în acest caz renunța < аrticle> nu va fi corectă, deoarece am obține un marcaj în stil bloc absolut identic care era în versiunea anterioara HTML. Decizie această problemă ar fi o îmbunătățire < section> în așa fel încât să se facă distincții clare între conținutul principal al site-ului și informațiile suport.

Pentru a ajuta constructorii de site-uri începători, vă ofer câteva caracteristici speciale prin care puteți decide destul de ușor când trebuie să utilizați < аrticle> :

1. Abordarea principală este de valoare pentru utilizator, îi atrage atenția, adică conținutul principal al paginii.
2. Dacă ar fi rațional să adăugați atributele pubdat sau citate.
3. În cazul autonomiei complete a fragmentului de cod pe care îl luăm în considerare.

deoparte

Creat pentru a separa conținutul principal al paginii de auxiliar.

Adică putem concluziona diferite feluri citate în text meniuri suplimentare, bannere publicitareși alte informații care nu au legătură cu conținutul principal al paginii.

Cel mai adesea, astfel de informații de pe site se află în bara laterală.

antet

Servește pentru a evidenția clar antetul paginii. Conține titlurile atât ale întregului document, cât și ale părților sale individuale. Cel mai adesea în această secțiune puteți găsi etichete precum < hgroup> Și < h1>-< h6> . Cu toate acestea, această prescripție nu este necesară, în principiu, orice etichete pot fi amplasate în antet.

Este de remarcat faptul că, în primul rând, această etichetă este utilizată la crearea unui antet, așa cum este indicat în exemplu:

< header> < a href= "/" >< img src= "/logo.png" alt= Vaden Pro/>

[meniul]

Cu toate acestea, nu ar trebui să limitați această etichetă la un antet pentru o pagină web. < header> se poate pune in interior < section>, < article>, < aside> si in special cazuri excepționale V < nav> . Cu această abordare, eticheta < header> este un element copil și corespunde titlului acestei părți separate. Luați în considerare un exemplu când < header> folosit in interior < article> :

< article> < header> < h1>Text important < time> 21. 02. 10 [Textul publicației]

Este demn de remarcat faptul că antetul adună împreună titlul părții, totuși, dacă această parte constă numai din nume, atunci această etichetă nu trebuie utilizată:

< article> < header> < h1>Text important [Textul publicației]

Acest utilizare irațională antet, următoarea intrare de cod ar fi mai corectă din punct de vedere semantic:

< article> < h1>Text important[Textul publicației]

subsol

Coborând structura site-ului, ne-am apropiat treptat de „subsolul”, care conține câteva informații descriptive ale unei secțiuni sau ale unui site în general. Aceste informații sunt separate printr-o etichetă < footer> :

< footer> < p id= "copyright" >&copie; 2014 Vaden Pro < p>Toate drepturile rezervate

În această parte a site-ului este obișnuit să aveți informații despre drepturile de autor această resursă, drepturi de autor, diverse link-uri către resurse auxiliare și multe altele. De aceea nu puteți limita utilizarea etichetei < footer> exclusiv pe pagina principala. va fi rațional să-l folosești în diverse secțiuni ale resursei. De asemenea, nu vă lăsați păcăliți < footer> trebuie să fie chiar în partea de jos a site-ului. De exemplu, aspectul paginii arată astfel:

< article> < header> < h1>Informații importante < time> 05. 04. 2015 < footer> < div class = "autor" >Danil Goyda < a href= "#" >Despre autor | < a href= "#" >Toate publicațiile autorului [postează în sine]

nav

Utilizarea nav este responsabilă pentru separarea părții de navigare a site-ului de conținutul principal. Acest bloc poate conține nu numai link-uri către alte pagini ale site-ului, ci și link-uri de ancorare pe pagina curentă. De exemplu, să ne uităm la următorul cod:

< header> < a href= "/" >< img src= "/logo.png" alt= "VadenPro" /> < nav> < ul>[meniul] [ căutare]

De asemenea, merită să fiți atenți la ceea ce formează nu doar o listă de link-uri, ci o secțiune independentă cu o structură complexă. Ne uitam:

< nav> < a href= "" >Navigare dificilă < section> < h1>Prima secțiune a site-ului < ul> < li>< a href= "" >paragraf [ ... ] < section> < h1>A doua secțiune a site-ului < ul> < li>< a href= "" >Paragraf

Și nu uita asta < nav> formează principalul bloc de navigare pagini web. elementele suplimentare de navigare pe site, cum ar fi linkurile auxiliare din subsol sau blocurile care repetă navigarea, nu trebuie evidențiate cu această etichetă.

Elemente semantice HTML5 descrieți în mod clar sensul sau scopul lor atât pentru browsere, cât și pentru dezvoltatorii web.
Înainte de apariția standardului HTML5, toate markupurile paginii erau efectuate în principal folosind elemente.