Una dintre sarcinile de a crea 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 un document folosind clase și ID-uri unice. Cod construit în întregime pe < div> foarte greu de înțeles și imposibil de citit. Motivul pentru aceasta este lipsa de încărcare logică a etichetei. Acesta a fost principala piatră de poticnire pentru motoarele de căutare.

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

Aspecte pozitive ale 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 un site web de subiectele și conținutul principal.

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

Cu toate acestea, merită remarcat faptul că mulți SEO nu au înțeles esența de bază a modului în care funcționează motoarele de căutare folosind un astfel de marcaj, dar aceasta este o chestiune de timp.

Disponibilitate

Pentru a analiza vizual disponibilitatea noilor metode de layout, să ne uităm la un exemplu de site:

Privind acest site, este destul de ușor să navighezi unde este conținutul principal și unde sunt informațiile de sprijin și, de asemenea, poți vedea clar 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 mărfuri oferite, utilizatorul va avea nevoie de perseverență și răbdare considerabile, pe care nu o are toată lumea.

În astfel de cazuri, calea de ieșire va fi utilizarea de noi etichete. Vor permite 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 căutare, pun un accent serios pe semantica documentului.

Pe scurt despre scopul principal al etichetelor structurale:

secțiune

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

Puteți citi mai multe despre utilizarea acestei etichete pentru a construi structura semantică a unui document în articolul „Construirea unei structuri de document în HTML5 folosind secțiunea”

Pentru o explicație mai clară, să revenim la exemplul împărțirii unui text voluminos în capitole și paragrafe, care pot avea și subsecțiuni și subparagrafe. Să aruncăm o privire la următorul exemplu de cod pentru a securiza materialul:

< 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, acordați atenție prezenței mai multor titluri cu markerul h1 - aceasta este o tehnică specială pe care o vom discuta mai târziu.

Unii utilizatori susțin că < section> - aceasta 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ă accesați < div> . De asemenea, merită să acordați atenție încărcării semantice care se află în bloc - secțiunea nu este utilizată în absența unui titlu natural.

articol

Webmasterii cu experiență numesc această secțiune un caz special de etichetă < section> . Articolul evidențiază o parte „autonomă” (una care poate fi tăiată din pagină ca întreg, fără a-și pierde sensul) parte a paginii, care, la rândul său, constă din elemente interconectate.

Exemplele de părți autonome includ anunțuri de articole pe un blog, blocuri de publicitate, diverse widget-uri (de exemplu, cu vremea).

Cu toate acestea, specificația descrie acest concept destul de abstrus, în urma căruia a apărut 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 pe care ar trebui să-l utilizați < section>, < аrticle> sau < div> . Pe de o parte, tot conținutul este interconectat într-un fel sau altul, dar site-ul poate fi numit o unitate independentă.
• Cum să proiectați mai exact antetul site-ului sau, mai precis, 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 abandonat utilizarea < acronim> .

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

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

Pentru a ajuta constructorii de site-uri începători, ofer câteva caracteristici speciale care pot fi folosite pentru a decide pur și simplu când să utilizeze exact < аrticle> :

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

deoparte

Conceput pentru a separa conținutul paginii principale de conținutul auxiliar.

Adică putem concluziona în ea diferite feluri citate din 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 un site web se află în bara laterală.

antet

Servește pentru a evidenția clar partea de titlu a 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ă cerință nu este necesară în principiu, orice etichete pot fi localizate în antet.

Este demn de remarcat faptul că această etichetă este utilizată în principal 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 antetul unei pagini web. < header> poate fi amplasat în 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. Să ne uităm la 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 reunește titlul părții, totuși, dacă această parte constă numai din titlu, atunci această etichetă nu ar trebui 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

Mișcând din ce în ce mai jos prin structura site-ului, am ajuns treptat la „subsolul nostru”, în care se află unele informații descriptive ale secțiunii sau ale site-ului în general. Aceste informații sunt separate prin etichetă < footer> :

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

Toate drepturile rezervate În această parte a site-ului se obișnuiește să se plaseze informații despre drepturile de autor a acestei resurse < footer> , drepturi de autor, diverse link-uri către resurse de sprijin etc. Acesta este motivul pentru care nu puteți limita utilizarea etichetei exclusiv pe pagina principala < footer> . Ar fi rațional să-l folosești în diferite secțiuni ale resursei. De asemenea, nu vă înșelați că

< article> < header> < h1>trebuie să fie în partea de jos a site-ului. De exemplu, are loc următorul aspect de pagină: < time> 05. 04. 2015 < footer> < div class = "autor" >Informații importante < a href= "#" >Danil Goyda | < a href= "#" >Despre autor Toate publicațiile autorului

[publicația în sine]

nav Utilizarea nav este responsabilă pentru separarea părții de navigare a site-ului de conținutul principal. În interiorul acestui bloc pot exista nu numai link-uri către alte pagini ale site-ului, ci și link-uri ancorate către pagina curentă. De exemplu, să ne uităm la:

< header> < a href= "/" >< img src= "/logo.png" alt= "următorul cod" /> < nav> < ul>Vaden Pro [meniul]

[ căutare]

< nav> < a href= "" >De asemenea, merită să acordați atenție faptului că formează nu doar o listă de link-uri, ci o secțiune independentă cu o structură complexă. Hai sa ne uitam: < section> < h1>Navigare dificilă < ul> < li>< a href= "" >Prima secțiune a site-ului [ ... ] < section> < h1>paragraf < ul> < li>< a href= "" >A doua secțiune a site-ului

Paragraf < nav> Și nu uita asta formează principalul bloc de navigare

pagini web. Elementele suplimentare de navigare pe site, cum ar fi linkurile de subsol sau blocurile care repetă navigarea, nu ar trebui să fie 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.