-și -s, totuși, ca nu trebuie să le elimini complet. Acestea sunt în continuare cea mai bună alegere pentru gruparea conținutului numai în scopuri de styling și în alte cazuri de ultimă instanță.

Semantica textului în HTML5

HTML5 a introdus multe elemente semantice noi care fac posibilă organizarea ușoară a conținutului. Ele nu numai că vă ajută să organizați conținut la nivelul întregului document (a se vedea în detaliu în secțiunea următoare), dar și în interiorul blocurilor de text, ca etichete inline.

Probabil cele mai populare etichete semantice la nivel de text sunt și , dar au existat și înainte de HTML5. Dintre noile elemente semantice inline găsim de exemplu , etichetă pentru om-citibile date-ori, și pentru text evidențiat.

Consultați această listă pentru toate elementele semantice la nivel de text care sunt utilizate în prezent.

Schița documentelor în HTML5

Structura documentului este structura unui document HTML. Arată modul în care elementele sunt legate între ele. Schița documentului a fost generată exclusiv prin elemente de cartografiere, cum ar fi titluri, titluri de tabele, titluri de formular și altele în versiunile anterioare de HTML, cum ar fi HTML4.01 și XHTML.

În HTML5 algoritmul de contur a fost îmbunătățit de noi elemente de secționare, și anume:

• pentru secțiuni grupate în jurul unei teme specifice
• pentru compoziții complete sau autonome cum ar fi un post blog sau un widget
• pentru blocuri de navigare
• pentru conținut complementar, cum ar fi barele laterale.

Există un al cincilea element de secționare în HTML5, dar nu este nou, este vorba de etichetă.

și etichetele sunt, de asemenea, noi, dar nu generează noi secțiuni într-un document, ele împart conținutul în interiorul secțiunilor. Aceasta înseamnă că fiecare element de secționare (corp, articol, secțiune, navă și deoparte) poate avea propriul antet și subsol.

Sfaturi pentru conținut structurat în mod semantic

Dacă vrem să creăm o documentație bine structurată a documentului, trebuie să fim atenți la următoarele reguli:

1. Elementul de secționare exterior este întotdeauna etichetă.

2. Secțiunile din HTML5 pot fi imbricate.

3. Fiecare secțiune are propria ierarhie a rubricii. Fiecare dintre ele (chiar și cea mai intactă secțiune imbricată) poate avea un h1 etichetă.

4. În timp ce conturul documentului este definit în primul rând de cele 5 elemente de secționare, acesta are nevoie și de titluri corespunzătoare pentru fiecare secțiune.

5. Este întotdeauna primul element de titlu (permiteți-l să fie h1 sau un etichetă de poziție inferioară) care definește rubrica secțiunii respective. Următoarele etichete din interiorul aceleiași secțiuni trebuie să fie relativ la acest lucru. (Dacă prima poziție este o h3 în interiorul unui element de secționare, nu puneți un h3 după asta.)

6. secțiunile definite de

, si tagurile nu aparțin conturului principal al documentului HTML, de obicei nu sunt redate inițial de tehnologiile de asistență.

7. Fiecare secțiune (corp, secțiune, articol, deoparte, nav) poate avea propriile lor

și tag-uri, care definește antetul (cum ar fi logo-ul, numele autorului, datele, meta info etc.) și subsolul (copyright, note, link-uri etc.).

Exemplu: O contur semantic

Să vedem un exemplu pentru o schiță de document semantic pentru a vedea mai clar cum funcționează. Codul nostru exemplu va avea ca rezultat următoarea structură a documentului:

Iată codul cu secțiune semantică:

  
 
Bine ați venit pe site-ul nostru!
 
Aici este logo-ul nostru și sloganul.
 
  
 
 
Titlul articolului
 
Subtitlul articolului
 
 
 
Prima parte logică (de exemplu, "teorie")
 
Punctul 1 din prima secțiune
 
Unele alte subtitluri din prima secțiune
 
Punctul 2 din prima secțiune
 
 
 
A doua parte logică (de ex. "Practică")
 
Punctul 1 din a doua secțiune
 
Alineatul 2 din a doua secțiune
 
  
    

Dacă vă uitați la fragmentul de cod de mai sus, veți vedea că anteturile și subsolurile sunt opționale, putem alege liber dacă vrem să le folosim sau nu, dar este se recomandă întotdeauna să includeți o rubrică pentru fiecare secțiune, altfel secțiunea va fi “fără titlu” în schița documentului.

Din fericire, există multe instrumente excelente pe internet, care ne permit să verificăm schița documentelor, de data aceasta vom folosi instrumentul Outliner al html5.org.

Dacă introducem fragmentul nostru de cod în formularul furnizat de partea externalizatorului, faceți clic pe “Descrieți asta!” butonul, vom vedea următorul rezultat:

Acesta este documentul exemplului exemplului nostru de cod, acesta este modul în care motoarele de căutare o văd, iar cititorii de ecran le citesc utilizatorilor cu deficiențe de vedere. Este semantic, bine structurat și nu există nici un rău “fără titlu” secțiuni din acesta.

Dacă doriți să vedeți cum arată o secțiune fără titlu în Outliner, ștergeți doar unele dintre etichetele de titlu din exemplul de cod.

Alte aspecte ale semanticii web

Semnele HTML tag-uri și contururi de documente sunt doar o mică parte din semantica web. Conținutul unei pagini web poate fi și mai semnificativ cu ajutorul protocolului de accesibilitate WAI-ARIA și a datelor structurate care pot fi utilizate împreună cu protocolul RDFa, microdata sau marcajele JSON-LD.