Structura conținutului HTML: ghid complet pentru construirea de pagini solide

Acasă » Piton » Structura conținutului HTML: ghid complet pentru construirea de pagini solide

Învățarea structurii conținutului în HTML face diferența dintre o pagină care pur și simplu „afișează ceva pe ecran” și o pagină ușor de navigat, accesibilă și optimizată pentru SEO. Când HTML-ul este organizat cu o ierarhie clară, browserele, motoarele de căutare și tehnologiile de asistență înțeleg instantaneu ce înseamnă fiecare secțiune și cum se potrivește totul împreună.

În loc să te gândești la HTML doar ca la o modalitate de a plasa etichete pe o pagină, este util să-l vezi ca pe planul documentului tău. Cu o structură solidă, definiți unde se află conținutul principal, cum sunt corelate titlurile, ce este navigarea, ce sunt informațiile secundare și care părți descriu documentul în sine în antet. În acest ghid, vom aprofunda structura conținutului în HTML: de la scheletul global al unei pagini, la titluri, semantică, accesibilitate și câteva modele concrete de aspect pentru pagini din lumea reală.

1. Scheletul global al unui document HTML

Fiecare document HTML începe cu aceeași structură de nivel înalt: doctype, html, head și body. Poate părea banal, dar fiecare element joacă un rol crucial în modul în care browserul analizează și redă conținutul și în modul în care motoarele de căutare interpretează pagina.

Prima linie este declarația doctype, scrisă ca în HTML5. Această instrucțiune nu produce un rezultat vizibil; îi spune browserului să utilizeze modul standard în loc de modul quirks, evitând comportamentele de randare moștenite care pot deteriora complet aspectul sau CSS-ul.

Imediat după doctype vine elementul rădăcină , care încadrează întregul document. Aproape totul — atât metadatele documentului, cât și pagina vizibilă — se află în interior … Tot aici declarați și limbajul uman al documentului cu atributul lang, de exemplu pentru engleză sau pentru spaniola din Spania.

Declararea limbii cu ajutorul funcției `lang` este esențială pentru accesibilitate, SEO și instrumente de traducere. Cititoarele de ecran îl folosesc pentru a alege regulile corecte de pronunție, motoarele de căutare și traducătorii automați îl folosesc pentru a înțelege limba principală, iar CSS poate chiar să vizeze stilizarea specifică limbii folosind selectori precum [lang|=”fr”] sau :lang(en).

În interiorul elementului html rădăcină aveți întotdeauna doi copii direcți: şi . Antetul conține toate metadatele și resursele necesare pentru interpretarea și prezentarea paginii (codificare, titlu, CSS, pictograme, URL-uri canonice etc.), în timp ce corpul conține conținutul pe care utilizatorii îl văd și cu care interacționează efectiv în fereastra browserului.

2. Ce aparține (și de ce contează)

Secțiunea principală este invizibilă pentru vizitatorii văzători, dar este absolut esențială pentru modul în care site-ul tău se comportă, performa și se clasează. Informațiile pe care le plasați aici ghidează motoarele de căutare, platformele sociale, browserele și dispozitivele cu privire la modul de gestionare și prezentare a paginii dvs.

Unul dintre primele lucruri din interior ar trebui să fie declarația de codificare a caracterelor folosind . UTF-8 este standardul pentru HTML5, acceptă practic orice caracter și emoji și asigură interpretarea corectă a titlurilor, textului, CSS-ului și JavaScript-ului, indiferent de limba sau simbolurile pe care le utilizați.

Fiecare pagină trebuie să definească, de asemenea, un element unic și descriptiv element. Conținutul din interior … apare în fila browserului, în marcaje, în istoricul browserului și, cel mai important, ca titlu principal pe care se poate da clic în paginile cu rezultatele motorului de căutare, cu excepția cazului în care este suprascris de anumite metaetichete. Din punct de vedere SEO, acesta este unul dintre cele mai valoroase fragmente de text din documentul dvs.

Un alt element meta aproape obligatoriu în layout-urile moderne este declarația viewport-ului. Folosind Le spui browserelor mobile să redimensioneze aspectul la lățimea dispozitivului, în loc să micșoreze designul unui desktop la un ecran minuscul, ceea ce este vital pentru designul responsiv și pentru trecerea auditurilor de bază pentru dispozitive mobile și accesibilitate.

Dincolo de setul de caractere, titlu și viewport, în antet se definesc majoritatea metadatelor, stilurilor și linkurilor cheie. Acestea includ meta descrieri orientate spre SEO, fișiere CSS, pictograme de site, versiuni în limbi alternative, URL-uri canonice, manifeste web, preconexiuni și multe altele. Toate aceste elemente contribuie indirect la modul în care este înțeleasă structura conținutului dvs. și la cât de utilizabil este site-ul dvs.

Metadate esențiale și resurse structurale

CSS este în mod normal conectat în interior folosind . Foile de stil externe păstrează prezentarea separată de structură, pot fi stocate în cache pe mai multe pagini pentru o performanță mai bună și ajută la menținerea unei singure surse de adevăr pentru sistemul dvs. de design.

De asemenea, puteți include CSS într-un block within , or even import additional stylesheets from there. De exemplu, dezvoltatorii folosesc uneori @import în interiorul unei etichete de stil pentru a plasa o foaie de stil într-un anumit strat în cascadă sau pentru a declara proprietăți personalizate CSS (variabile) la nivelul :root înainte de a le referenția pe întregul site.

Cel/Cea/Cei/Cele Elementul servește mai multor scopuri decât simple foi de stil. Prin modificarea atributului rel, puteți indica un favicon cu rel="icon", puteți defini versiuni lingvistice alternative cu rel="alternate" și hreflang, puteți specifica o adresă URL canonică cu rel="canonical" sau puteți face referire la manifestele aplicației și la alte relații pe care browserele și crawlerele ar trebui să le cunoască.

Definirea pictogramelor cu asigură că marca dvs. este recunoscută în fila browserului și în marcaje. Puteți specifica diferite dimensiuni sau tipuri (cum ar fi PNG sau SVG) și chiar puteți oferi pictograme speciale pentru platforme precum iOS cu rel="apple-touch-icon" sau pictograme mască pentru filele fixate în Safari.

Linkurile alternative sunt cruciale pentru configurațiile multilingve sau de sindicalizare a conținutului. Când folosești De exemplu, le spuneți motoarelor de căutare că există o versiune franceză a aceleiași pagini și ce combinație de limbă/regiune vizează. În mod similar, linkurile alternative pot indica fluxuri RSS sau variante PDF dacă specificați un tip adecvat.

URL-uri canonice, scripturi și cele rareori utilizate

Linkurile canonice cu rel="canonical" ajută la rezolvarea situațiilor de conținut duplicat, indicând adresa URL care este sursa autorizată. Dacă același articol există pe mai multe căi sau este publicat în mod reciproc pe alte domenii, URL-ul canonic consolidează semnalele de clasare și evită motorul de căutare să ghicească ce versiune să indexeze.

JavaScript este atașat folosind element, which can either embed inline code or reference an external file through the src attribute. Deoarece JavaScript blochează randarea în mod implicit, mulți dezvoltatori plasează etichete de script la sfârșitul corpului sau utilizează atributele defer sau async, astfel încât conținutul HTML să se poată reda înainte de executarea scripturilor.

Atributul defer îi spune browserului să descarce scriptul fără a bloca randarea și să îl execute după ce codul HTML este complet analizat. În schimb, async evită și blocarea în timpul descărcării, dar rulează scriptul imediat ce este gata, întrerupând potențial fluxul de analiză, ceea ce poate fi o problemă atunci când scriptul depinde de elemente DOM definite ulterior în document.

Cel/Cea/Cei/Cele Elementul , care apare doar în head, definește o adresă URL de bază și o țintă implicită pentru toate linkurile relative. Prin setare Practic, îi spui browserului că fiecare adresă URL relativă de pe pagină ar trebui rezolvată de la acea rădăcină și, opțional, deschisă într-un context specific de navigare, cum ar fi o fereastră nouă sau cadrul de nivel superior.

Deşi poate fi puternic, are efecte secundare, în special pentru ancorele din pagină și căile de resurse relative. Doar un element de bază este permis per document, acesta trebuie să apară înaintea oricăror adrese URL relative și transformă ancore simple în cereri URL complete cu fragmente atașate la href-ul de bază.

3. Stratul de conținut vizibil: și aranjament semantic

Tot ceea ce utilizatorii văd și cu care interacționează se află în interiorul element. Aici îți structurezi conținutul cu elemente semantice care descriu rolul fiecărei părți a paginii: navigare, conținut principal, articole, bare laterale, subsoluri și multe altele.

HTML5 a introdus un set de elemente de aspect semantic care au înlocuit elementele generice containere în multe situații. Elemente precum , , , , , şi descrie sensul în loc de simpla aparență, ceea ce ajută tehnologiile de asistență și motoarele de căutare să construiască o hartă mentală a paginii tale.

conține de obicei conținut introductiv sau navigare pentru pagină sau pentru o anumită secțiune. Aceasta poate include un logo, un titlu al site-ului, un meniu principal sau un titlu principal. Puteți avea un antet la nivel de pagină în partea de sus a corpului și anteturi suplimentare în interiorul secțiunilor sau articolelor atunci când aveți nevoie de subintroduceri.

este dedicat blocurilor de navigare și este de obicei utilizat pentru meniuri majore sau grupuri de linkuri importante. Poți plasa meniul principal de navigare într-un antet, dar meniul de navigare poate apărea și în altă parte, de exemplu într-o bară laterală sau în subsol, atâta timp cât este folosit pentru navigare și nu pentru colecții generice de linkuri fără legătură.

marchează conținutul unic, central al paginii și ar trebui să apară o singură dată per document. În interiorul paginii principale, de obicei, îți vei organiza conținutul folosind pentru blocuri tematice, pentru articole independente, cum ar fi postări de blog sau știri și pentru informații conexe, dar secundare, cum ar fi note laterale, reclame sau navigare complementară.

Secțiuni, articole, note secundare și subsoluri

reprezintă un bloc de conținut distinct din punct de vedere tematic, de obicei cu propriul titlu. Acesta poate fi un capitol dintr-un articol lung, un bloc „Caracteristici” pe pagina unui produs sau o parte a paginii principale, cum ar fi „Testimoniale” sau „Prețuri”. Secțiunile ajută la împărțirea documentelor complexe în blocuri logice.

este utilizat pentru conținut autonom care poate funcționa independent în afara contextului înconjurător. Exemplele includ postări pe blog, intrări în documentație, comentarii ale utilizatorilor, știri sau mesaje pe forum. Un articol include adesea propriul antet (cu titlu, autor și dată) și subsol (cu etichete, linkuri de partajare sau metadate).

este rezervat pentru conținutul tangențial legat de fluxul principal, cum ar fi barele laterale, citatele de tip „pull quote”, linkurile corelate sau blocurile publicitare. Deoarece scopul său este suplimentar, cititoarele de ecran și alte instrumente îl pot trata în consecință, iar utilizatorii pot distinge mai ușor narațiunea principală de elementele suplimentare secundare.

apare la sfârșitul unei secțiuni sau în partea de jos a întregii pagini. Un subsol la nivel de pagină conține de obicei notificări privind drepturile de autor, informații de contact, navigare secundară, linkuri legale sau credite de site, în timp ce un subsol la nivel de articol poate conține biografii ale autorilor, categorii, date de actualizare sau postări conexe.

Flexibilitatea acestor elemente înseamnă că le poți combina și imbrica pentru a se potrivi designului tău, dar respectarea sensului lor intenționat menține HTML-ul portabil și ușor de înțeles. De exemplu, poți plasa în mod legitim „nav” în antet sau în altă parte în corp, dar nu ar trebui să folosești „nav” pentru seturi aleatorii de linkuri care nu fac parte din navigare sau să folosești „main” de mai multe ori pe pagină.

4. Ierarhia titlurilor și structura textuală

Titlurile reprezintă coloana vertebrală a structurii conținutului, definind ierarhia subiectelor și subsubiectelor din întregul document. HTML oferă șase niveluri de titluri, de la (cel mai important) până la (cel mai puțin important), iar modul în care le organizați afectează atât cititorii umani, cât și motoarele de căutare.

De obicei, există o singură care exprimă subiectul principal al paginii, urmat de pentru secțiunile primare și - pentru subsecțiuni mai profunde. Când două titluri au același nivel, acestea reprezintă secțiuni surori, în timp ce un titlu de nivel inferior introduce o subsecțiune imbricată în cadrul celei anterioare de nivel superior.

Paragrafele și alte elemente de conținut care urmează după un titlu aparțin secțiunii definite de acel titlu. Când apare un nou titlu de același nivel, secțiunea anterioară este considerată închisă și începe una nouă. Această structură implicită este cea pe care tehnologiile asistive o folosesc pentru a construi o structură prin care utilizatorii pot sări rapid.

Omiterea arbitrară a nivelurilor — cum ar fi trecerea directă de la h1 la h4 — poate crea confuzie atât pentru instrumentele automate, cât și pentru cititori. Recomandarea generală este de a avansa pas cu pas în ierarhie: de la h1 la h2 pentru subsecțiuni, apoi opțional la h3 și așa mai departe, coborând doar cu un nivel pe rând atunci când imbricați conținutul mai adânc.

Browserele aplică de obicei stiluri implicite titlurilor: dimensiuni mai mari ale fontului, grosime a caracterelor îngroșate și spațiere verticală suplimentară. Aceste stiluri încorporate fac deja structura evidentă din punct de vedere vizual, dar puteți rafina prezentarea cu CSS, păstrând în același timp intactă ierarhia semantică subiacentă.

Paragrafe, liste și semantică în linie

Conținutul textului normal intră în elemente, fiecare reprezentând un paragraf separat. Păstrarea unei idei principale per paragraf îmbunătățește lizibilitatea și se aliniază cu modul în care tehnologiile de asistență permit utilizatorilor să navigheze prin blocuri de text.

Liste ordonate ( ) și liste neordonate ( ) cu Elementele sunt ideale pentru informații grupate, cum ar fi pași, caracteristici sau întrebări frecvente. Listele ordonate exprimă o secvență sau o prioritate, în timp ce listele neordonate grupează pur și simplu elemente corelate fără a implica o ordine; ambele sunt extrem de utile pentru structurarea explicațiilor complexe.

Elementele inline precum , , și altele îmbogățesc conținutul fără a întrerupe fluxul unui paragraf. comunică o importanță deosebită (și apare de obicei cu caractere aldine), accentuează textul (adesea cu caractere italice) și creează hyperlinkuri care conectează documentele de pe site sau la resurse externe.

Imagini cu sunt considerate elemente înlocuite și nu încapsulează conținut, dar participă în continuare la structura semantică prin atribute precum alt. Atributul alt este deosebit de important pentru accesibilitate și SEO, deoarece descrie imaginea utilizatorilor care nu o pot vedea și motoarelor de căutare care analizează doar text.

Combinarea atentă a elementelor la nivel de bloc și a celor inline vă permite să exprimați ierarhia, relațiile și accentul exclusiv prin HTML, lăsând detaliile vizuale precum culorile, fonturile și spațierea în seama CSS-ului. Această separare a aspectelor menține markup-ul curat și facilitează modificările de design ulterioare.

5. Accesibilitate și limbaj în structura conținutului

Un document HTML bine structurat nu înseamnă doar să arate ordonat; este o condiție prealabilă pentru accesibilitate. Persoanele care se bazează pe cititoare de ecran, navigare prin tastatură sau alte tehnologii de asistență depind de semantica HTML pentru a înțelege și a naviga prin conținut eficient.

Declararea limbii documentului cu lang pe elementul este unul dintre primii pași de accesibilitate. Când limba este explicită, cititoarele de ecran selectează pronunția corectă și dicționarele, iar instrumentele de traducere automată gestionează conținutul mai precis în diferite regiuni și dialecte.

De asemenea, puteți marca modificările de limbă în interiorul corpului folosind lang pe elemente precum sau . Când un fragment trece la o altă limbă, setarea opțiunii lang=”fr-CA” sau lang=”pt-BR” pe acel fragment semnalează instrumentelor de asistență că regulile de pronunție și citire ar trebui să se modifice doar pentru acea porțiune.

Dincolo de limbaj, titlurile, reperele și textul alternativ formează nucleul structurii accesibile. O ierarhie clară a titlurilor, utilizarea corectă a atributelor main, nav, header, footer, section și aside, plus atributele alt semnificative în imagini, permit tehnologiilor de asistență să construiască o schiță și să ofere navigare prin repere, cum ar fi „săriți la conținutul principal” sau „mergeți la navigare”.

Culoarea și stilul vizual nu ar trebui să fie niciodată singurele modalități de a transmite informații importante. Contrast ridicat, dimensiuni ale fonturilor lizibile, stări de focalizare pentru elementele interactive și texte descriptive pentru linkuri, cum ar fi „Citiți mai multe despre prevenirea incendiilor” în loc de doar „Click aici”, toate acestea contribuie la a face conținutul structurat utilizabil pentru cât mai mulți oameni.

Validarea codului HTML și efectuarea verificărilor de accesibilitate folosind instrumente automate și teste manuale ajută la descoperirea timpurie a problemelor structurale. Instrumentele pot detecta atribute alt lipsă, imbricarea nevalidă, secvențele de titluri rupte sau utilizarea incorectă a reperelor, toate acestea putând fi corectate direct în markup înainte de a afecta utilizatorii reali.

6. Planificarea structurii conținutului unui site web

Înainte de a scrie o singură etichetă, este important să planificați structura logică a site-ului și a paginilor dvs. Gândirea în termeni de secțiuni, priorități informaționale și fluxuri de navigare duce la un HTML mai ușor de întreținut, extins și optimizat pentru motoarele de căutare.

Un punct de plecare obișnuit este schițarea unei hărți a site-ului sau a unei diagrame structurale a site-ului web. Aceasta include de obicei pagini de nivel superior, cum ar fi Acasă, Despre, Servicii, Blog, Contact, apoi orice subpagini sau categorii care se ramifică din acestea, arătând cum vor naviga utilizatorii între ele.

Într-o singură pagină, puteți trasa viitoarea structură HTML ca o serie de blocuri semantice. De exemplu, ați putea defini un antet cu un logo și o bară de navigare, o zonă principală cu mai multe secțiuni (erou, caracteristici, testimoniale, prețuri), o secțiune pentru conținut secundar și un subsol care conține informații de contact și linkuri legale.

Atribuirea de titluri acelor blocuri de la început menține coerența ierarhiei h1-h6. Tu decizi în avans care va fi singurul h1, ce secțiuni merită titluri h2 și unde sunt necesare subtitluri mai profunde, cum ar fi h3 sau h4, pentru a explica subiecte complexe fără a copleși cititorul.

Din perspectiva SEO și UX, este inteligent să plasezi conținutul cheie și secțiunile importante mai devreme în DOM. Motoarele de căutare acordă, în general, mai multă atenție conținutului din partea de sus a documentului, iar utilizatorii apreciază găsirea rapidă a informațiilor principale, decât derularea peste introduceri lungi sau elemente decorative.

Cele mai bune practici pentru structuri HTML ușor de întreținut

Folosiți nume de clase și ID-uri descriptive pentru a eticheta elementele structurale atunci când este necesar, dar evitați supraimbricarea elementelor div. Clase precum .main-nav, .site-header sau .sidebar îți spun dintr-o privire ce face o componentă, făcând HTML-ul și CSS-ul mult mai ușor de citit luni mai târziu.

Păstrați codul HTML cât mai plat posibil, exprimând în același timp o ierarhie autentică. Containerele imbricate profund, care există doar pentru stilizare, pot fi adesea înlocuite de CSS mai atent conceput, rezultând un markup mai curat și mai ușor, cu care toată lumea poate lucra mai ușor.

Grupează conținutul relevant în elemente semantice, în loc să îl împrăștii pe pagină. De exemplu, o postare pe blog ar trebui să se afle în interiorul unui articol, cu titlul, data, autorul și conținutul împreună, în timp ce postările conexe sau biografia autorului pot fi amplasate într-o notă secundară sau într-un subsol de articol, clar separate de narațiunea principală.

Revizuiți-vă structura de fiecare dată când extindeți o pagină sau reproiectați o secțiune. Este ușor pentru documentele HTML să acumuleze încapsulatoare unice și elemente ad-hoc în timp, așa că refactorizarea periodică a acestora într-o formă semantică coerentă aduce beneficii în ceea ce privește mentenabilitatea, performanța și accesibilitatea.

Documentarea tiparelor structurale — cum ar fi modul în care construiți anteturi, secțiuni, articole și subsoluri — ajută la menținerea consecvenței echipelor mari. Un mic ghid intern care explică ce elemente să folosești pentru navigare, cum să organizezi titlurile și cum să marchezi componentele repetate poate împiedica transformarea bazei de cod într-un mozaic structural.

7. Modele practice de structură pentru tipuri comune de pagini

Diferite tipuri de pagini tind să aibă modele structurale comune pe care le puteți reutiliza și adapta în mai multe proiecte. Recunoașterea acestor tipare vă va ajuta să proiectați structuri de conținut care să fie naturale pentru utilizatori și ușor de implementat în HTML.

O pagină principală tipică ar putea începe cu un global conținând un logo și elemente principale . Aceasta este adesea urmată de o cu mai multe blocuri: o secțiune principală cu un h1 și un îndemn la acțiune, o secțiune de caracteristici, eventual o secțiune pentru testimoniale și o secțiune finală care invită utilizatorii să ia legătura sau să se înscrie.

Sub conținutul principal, o oferă de obicei informații globale și navigație suplimentară. Linkuri către politicile de confidențialitate, termenii și condițiile de utilizare, opțiunile de contact, rețelele sociale și meniurile secundare se află aici, fiind ușor de găsit fără a distrage atenția de la conținutul principal de mai sus.

O pagină de postări pe blog este un candidat perfect pentru element. Articolul ar conține de obicei propriul antet cu titlul postării (adesea h1-ul paginii), data publicării și detalii despre autor, urmat de corpul postării, împărțit în secțiuni cu titluri h2/h3 și, în final, un subsol al articolului care conține etichete, butoane de partajare sau linkuri către conținut conex.

Barele laterale sau panourile secundare sunt reprezentate în mod natural de elemente. Acestea pot include liste de postări recente, filtre de categorii, formulare de înscriere la newsletter sau ajutor contextual. Deoarece conținutul „aside” este marcat semantic ca și conținut complementar, tehnologiile de asistență îl pot prezenta ca atare utilizatorilor.

Paginile de contact și paginile de servicii reutilizează aceleași elemente constitutive, dar pun accent pe claritate și ușurință în interacțiune. Titlurile clare, paragrafele concise, controalele de formular etichetate corespunzător și o ordine logică de citire asigură că utilizatorii pot găsi cum să vă contacteze sau să înțeleagă oferta dvs. fără a ghici.

8. Elemente HTML, atribute și rolul lor în structură

Sub toate aceste modele, totul în HTML se reduce la elemente, etichete și atribute. Înțelegerea modului în care acestea funcționează împreună vă oferă un control detaliat asupra structurii conținutului, a elementelor de prezentare și a comportamentului.

Un element HTML este compus dintr-o etichetă de deschidere, atribute opționale, conținut și, în majoritatea cazurilor, o etichetă de închidere. De exemplu, Acesta este un paragraf. include eticheta de început , nodul text și eticheta de încheiere , toate reprezentând împreună un element de paragraf.

Atributele apar în interiorul etichetei de deschidere și oferă informații suplimentare despre element. Acestea apar ca perechi name="value", cum ar fi class="highlight", id="intro" sau href="/contact". Unele atribute sunt globale și pot apărea pe orice element (cum ar fi class, id, lang), în timp ce altele sunt specifice anumitor etichete (cum ar fi src pentru img sau type pentru input).

Clasele sunt deosebit de importante pentru structurarea și stilizarea documentelor mai mari. Prin atribuirea aceleiași clase mai multor elemente — să zicem, class="important" — puteți aplica reguli CSS comune sau le puteți viza în JavaScript, menținând structura flexibilă, dar în același timp ușor de gestionat.

Nu toate elementele necesită etichete de închidere; unele sunt elemente goale (void) care nu au conținut. Elemente precum , , şi Se încadrează în această categorie. Ele participă în continuare la structura dvs., dar numai prin atributele lor, deoarece nu încapsulează niciun text intern sau copii.

Consorțiul World Wide Web (W3C) menține specificația care definește modul în care toate aceste elemente și atribute funcționează împreună. Respectarea acestor standarde menține paginile interoperabile între browsere și dispozitive și asigură că structura de conținut atent concepută se comportă previzibil pentru fiecare vizitator.

Punerea în practică a tuturor acestor aspecte înseamnă tratarea HTML-ului ca pe coloana vertebrală semantică a site-ului dvs.: o schiță clară a documentului, utilizarea precisă a titlurilor, o dispunere atentă cu pagina principală, secțiune, articol, apendice și subsol, metadate accesibile în antet și atribute semnificative pentru fiecare element, ceea ce face ca, împreună, conținutul dvs. să fie mai ușor de citit, de navigat și de clasat bine în motoarele de căutare.