Etichetă semantică

De la Wikipedia, enciclopedia liberă.
Salt la navigare Salt la căutare

Termenul etichetă semantică , în informatică , identifică elemente HTML care descriu în mod expres semnificația lor [1] .

Utilizarea etichetelor semantice permite dezvoltatorilor să marcheze documente web pentru a structura informațiile în conformitate cu un standard comun; agenții utilizator pentru a recunoaște etichetele utilizate în documente; motoarele de căutare pentru indexarea conținutului unei pagini web cu o mai mare claritate și organizare.

Domeniul de aplicare

Au fost introduse etichete semantice pentru a favoriza o structurare standard a documentelor web pentru a facilita accesibilitatea , căutarea [2] , internaționalizarea și interoperabilitatea [3] datelor pe care le conțin.

Accesibilitate

Etichetele semantice îmbunătățesc accesibilitatea, deoarece permit agenților utilizator să profite de structura precisă a documentului pentru a îmbunătăți experiența utilizatorului .

De asemenea, reduc necesitatea codului javascript din partea clientului, deoarece browserele pot asocia comportamente cu anumite etichete. Pe baza acestui fapt, dezvoltatorii au un control mai mare asupra interfețelor lor, fără a fi nevoie să recurgă la scripturi din partea clientului . De exemplu, un element este <details> [4] care indică agenților utilizator că există o bucată de text ascunsă în document a cărei sarcină este de a furniza informații suplimentare despre un subiect.

Căutarea

Algoritmii de analiză ai diferitelor motoare de căutare își fac deducțiile pentru a cataloga datele documentelor web și documentele în sine.

O structură standard permite algoritmilor de căutare să navigheze în documente pentru a cataloga informațiile mai ușor și corect.

Internaționalizare

Pentru a încuraja internaționalizarea conținutului, au fost inserate etichetele <bdi> [5] și <ruby> [6] , care facilitează utilizarea documentelor scrise în limbi cu un sistem de scriere diferit de alfabetele utilizate în Europa [ 3] .

Interoperabilitate

Înainte de HTML5, structura unui document, definită prin etichete de antet și diviziune, a fost suprascrisă la adăugarea de conținut suplimentar dinamic, determinând modificarea rolurilor secțiunilor de pagină.

Organizarea standard a documentului, pe de altă parte, permite generarea de structuri stabile.

În aceste structuri, inserarea dinamică a conținutului suplimentar nu compromite formularul și aceasta menține accesibilitatea și căutarea conținutului. [7]

Dezvoltarea etichetelor semantice

Conceptul de etichetă semantică este „element semnificativ” [1] . Diferite tehnologii pot fi folosite pentru a realiza acest concept, dar capacitatea pe care elementele definite în acest scop o au de a produce o structură semantică standard nu este aceeași pentru toți.

Elementele semantice ale XML

Datorită naturii sale, XML se pretează foarte bine la crearea structurilor semantice: folosind o schemă DTD și / sau XML special creată , este posibil să se definească eticheta unui element care descrie categoria semantică a conținutului său.

De exemplu, puteți defini elemente precum <nome> și <cognome> și le puteți utiliza pentru a conține nume și prenume, ca în exemplul următor:

 <? xml version = "1.0" encoding = "UTF-8"?>
<utilizatori>
    <user years = "20" >
        <name> Ema </name>
        <surname> Princi </surname>
        <adresă> Torino </adresă>
    </user>
    <user years = "54" >
        <name> Max </name>
        <surname> Rossi </surname>
        <adresă> Roma </adresă>
    </user>
</user>

exemplu de utilizare a XML extras din pagina Wikipedia pe XML

Cu toate acestea, etichetele XML personalizate funcționează numai în anumite contexte de utilizare definite de schemele de referință create de dezvoltatori.

Structurile de date personalizate în XML sunt deci descentralizate și slab adaptate pentru reprezentarea conceptelor la nivel global.

Tehnologie HTML

HTML din prima versiune a definit unele dintre elementele sale de marcare pentru a reprezenta o anumită valoare semantică [8] .

De exemplu, elementele antetului <h n > marchează textul identificat de software ca titlu sau subtitlu al documentului web. 

 < h1 > Titlul documentului </ h1 >
< p > Exemplu de text de paragraf </ p >
< h2 > Primul subtitlu </ h2 >
< p > Exemplu de text de paragraf </ p >    
< h2 > Al doilea subtitlu </ h2 >
< p > ... </ p >

exemplu de utilizare a etichetelor antet <h n >

Cu toate acestea, gradul semantic atins de elementele structurale, înainte de lansarea HTML5, a produs documente cu structuri prea generale și dificil de accesat.

Pentru a permite dezvoltarea unor structuri de date mai expresive , tehnologiile HTML și XML au fost combinate în specificația XHTML , dar acestea au cauzat dezacord în rândul comunităților de dezvoltatori web [9] .

Standardul HTML5

Cu standardul HTML5 au fost introduse etichete semantice: un număr limitat de elemente, cu semnificație proprie, capabile să identifice conținutul paginilor web.

Etichetele semantice se nasc ca elemente structurale pe care se pot face inferențe diferite în funcție de nevoile software-ului care se bazează pe ele și nu ca etichete pentru a denota orice eventualitate de date.

De exemplu, eticheta <header> [10] , literalmente „header”, vă permite să identificați „spațiul” în care sunt conținute elementele introductive ale unei părți specifice sau generale a unui document web și linkurile de navigare.

Utilizarea etichetelor semantice nu este obligatorie, dar este foarte recomandată. Depinde de dezvoltatori să exploateze sau nu această tehnologie și să profite de avantajele pe care le aduce.

Prin aceste elemente:

  • dezvoltatorii pot construi pagini web cu structuri standard
  • motoarele de căutare identifică mai bine informațiile din documentele web pentru a le indexa conform propriilor algoritmi
  • agenții utilizator sunt capabili să recunoască organizarea paginilor și relevanța informațiilor conținute în acestea. Acest lucru permite unui astfel de software să optimizeze experiența de utilizare a paginilor web

Prin urmare, puterea etichetelor semantice constă în capacitățile expresive pe care le oferă, corelate cu gradul de generalitate al structurilor standardizate pe care le permit să le definească.

În plus, utilizarea etichetelor semantice permite o mai mare diviziune între elementele structurale și cele de prezentare.

În trecut, atributele elementelor erau adesea folosite pentru a furniza informații semantice software-ului de indexare a conținutului disponibil online, provocând o suprapunere între elementele doar de prezentare și elementele structurale.

De exemplu, standardul hCard a folosit valorile atributului de class pentru a atribui o anumită valoare semantică etichetelor prezente în paginile web, dar, simultan, același atribut ar putea fi folosit și de CSS pentru a defini stilul elementelor din care a fost folosit atributul. Această posibilitate, care ar fi putut provoca interferențe între diferite tehnologii, poate fi evitată folosind etichete semantice.

De fapt, standardul HTML5 prevede că aspectul prezentativ al elementelor este complet delegat tehnologiilor adecvate, cum ar fi CSS . În acest scop, a eliminat atributele pur stilistice [11] și etichetele [12] și a modificat unele etichete [13] deja prezente în specificațiile anterioare, astfel încât acestea să aibă un caracter semantic și să nu mai fie stilistic.

Structura unui document web

Structura unui document web este ceea ce se află între etichetele <body> și </body> și este esențială pentru prezentarea unui document utilizatorului.

Structurile HTML 4

HTML 4 descrie structura unui document web pornind de la noțiunile de secțiune și subsecțiune definite cu elementul de diviziune <div> și elementele de antet <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (în ordine ierarhică descendentă). Relația dintre aceste elemente generează structura documentului. [14]

Elementul <div> nu este strict necesar pentru a defini o secțiune: de fapt, de fiecare dată când se întâlnește un element de titlu în document, în funcție de relația ierarhică dintre ultimul titlu și cel anterior, pot fi generate noi secțiuni și subsecțiuni.

Structurile create cu referire exclusivă la aceste elemente sunt prea generale și aproximative: fără o definiție a atributelor id și class , <div> rămâne un element generic și acesta este și scopul conținutului său. Mai mult, deoarece intenția unui element de antet nu este întotdeauna de a defini o nouă secțiune sau subsecțiune, apariția lor poate provoca structuri nedorite: de exemplu, <h2> poate fi utilizat atât pentru a defini o subsecțiune, cât și ca un simplu subtitlu.

Toate acestea fac imposibilă definirea unei structuri semantice a documentului în care este posibil să se distingă secțiunile care conțin subiectele principale de secțiunile al căror conținut nu face parte din fluxul primar și, chiar mai puțin, de secțiunile încărcate dinamic la timpul de rulare al paginii, care, de fiecare dată când apar, modifică structura documentului. [15]

Structurile HTML5

HTML5 gestionează problemele găsite în HTML 4 adăugând precizie elementelor de secțiune și antet. [15]

Generarea automată a structurii este deosebit de importantă pentru buna funcționare a tehnologiilor de asistare .

În HTML5 tot conținutul etichetei <body> aparține unei secțiuni și există mai multe elemente pentru a defini structurile imbricate. Limitele secțiunilor sunt definite în mod explicit sau implicit.

Secțiuni explicite

Elementele <body> , <section> [16] , <article> [17] , <aside> [18] , <footer> [19] , <header> și <nav> [20] definesc secțiuni explicite. În cadrul acestora este posibil să se definească subsecțiuni prin reutilizarea acelorași elemente sau etichete de antet.

Elementele <section> și <article> sunt indicate pentru a conține informațiile principale ale documentului.

Conținutul etichetelor <aside> , <footer> , <header> și <nav> este, pe de altă parte, considerat independent de conținutul principal. De obicei sunt elemente generale, cum ar fi sigla site-ului web, informații de contact sau meniuri care conțin linkuri către pagini externe.

Exemplu de secțiune explicită HTML5 

 < secțiune >
< h1 > Pisici </ h1 >
    
< secțiune >
< h1 > Introducere </ h1 >
< p > În această secțiune vorbim despre ... </ p >
</ section >
    
< secțiune >
< h1 > Habitat </ h1 >
< p > Pisicile trăiesc ... </ p >
</ section >
    
< deoparte >
< p > publicitate </ p >
</ aparte >
    
< subsol >
< p > (c) 2020 exemplu </ p >
</ subsol >

</ section >

care generează structura

1. Pisicile
    1.1 Introducere
    1.2 Habitat
    1.3 Secțiune (deoparte)

Comparativ cu secțiunile create prin <div> , secțiunile explicite definite cu etichete HTML5 oferă un grad mai mare de autonomie, recunoaștere și descriere semantică a conținutului lor.

Secțiuni implicite

Deoarece elementele de secțiune HTML5 nu sunt obligatorii, este posibilă definirea secțiunilor unei structuri prin elementele de antet, pentru a menține compatibilitatea cu sistemul de generare a structurii HTML 4. Această tehnică se numește secționare implicită.

Relațiile ierarhice care se succed între elementele antetului definesc implicit diferite secțiuni, care sunt, totuși, limitate doar la secțiunile care conțin, definite de elementul de cel mai înalt nivel sau de elementele de secțiune explicite. Elementele de titlu cu același rang deschid noi secțiuni.

exemplu de secțiune implicită 

 < secțiune >
< h1 > Elefanții </ h1 >  
< p > În această secțiune, vorbim despre elefanți.
... secțiunea continuă ...
< h3 class = "implicit subsection" > Habitat </ h3 >
<P> Elefanții nu trăiesc pe copaci, ci între ei. 
... subsecțiunea continuă ...
        
< h1 > Mamuții </ h1 >
<P> În această secțiune, vorbim despre mamut.
... secțiunea continuă ...
</ section >

care generează structura

1. Elefanții
   1.1 Habitat (definit implicit de elementul h3)
2. Mamuții (definiți implicit de elementul h1, care în același timp a închis secțiunea anterioară)

Prin utilizarea etichetei <hgroup> este posibil să se evite subsecțiunea dată de elementele de antet de rang inferior. Acest lucru se datorează faptului că eticheta comunică algoritmului de structurare a paginii doar titlul cu rangul cel mai înalt și „ascunde” celelalte titluri de nivel inferior imbricate în etichetă, astfel încât structura documentului să fie generată indiferent de prezența lor. exemplu de utilizare a hgroup 

 < secțiune >
< hgroup >
< h1 > Justine </ h1 >
< h2 > Les Malheurs de la vertu </ h2 >
</ hgroup >
... Cuprins ...
</ section >

generează structura

1. Justine

Secționarea implicită nu este recomandată, deoarece poate genera structuri nedorite. Cu toate acestea, deoarece specificația HTML5 nu necesită ca browserele să genereze structura făcând referire exclusiv la secțiuni explicite, este bine să verificați modul în care gestionează titlurile din document pentru a genera structura.

Secțiuni rădăcină

Împreună cu elementul <body> , etichetele <blockquote> , <details> , <fieldset> și <figure> vă permit să definiți secțiunile rădăcină, adică secțiunile cu structura proprie care nu interferează cu structura elementului care le conține.

Aceste elemente conțin referințe bibliografice externe, sau ca în cazul <body> o structură autonomă, astfel încât structura lor internă este izolată. [21]

Creșteți precizia semantică

Etichetele semantice reflectă informațiile conținute într-un anumit grad de generalitate, dar folosind microdate este posibil să se specifice valoarea semantică a conținutului etichetei.

Microdatele sunt atribute create special pentru a eticheta conținutul etichetelor HTML.

Cu microdatele este posibil să faceți referire la dicționare specifice care facilitează interpretarea informațiilor conținute în document către motoarele de căutare , roboții și crawlerele web . [22]

Microdatele sunt itemscope , itemtype și itemprop .

 < p itemscope itemtype = "link către dicționarul folosit" >
    < span itemprop = "name" > Mario Bianchi </ span > s-a născut la 
    < span itemprop = "birthDte" > 27 iunie 1965 </ span > ... 
    și locuiește în 
    < span itemprop = "homeLocation" > Roma </ span >
    ...
< p >

exemplu de utilizare a microdatelor

Atributul itemscope definește articolul ca obiect. [23]

Valoarea itemtype definește dicționarul folosit pentru a descrie obiectul. [24]

În timp ce itemprop specifică ce proprietate a obiectului este exprimată de conținutul etichetei. [25]

Există mai multe dicționare predefinite, cum ar fi schema.org , care definește multe scheme de structurare a datelor într-un mod standard și WAI-ARIA , a cărui intenție este de a ajuta browserele să îmbunătățească accesibilitatea la conținut, în special pentru tehnologiile de asistență .

Alte etichete semantice și structurale

  • <main> este containerul subiectului principal al documentului. Este comparabil cu <section>, dar, spre deosebire de aceasta, nu ar trebui să apară de mai multe ori pe pagina [26] [10]
  • <mark> este utilizat pentru a evidenția cele mai relevante părți ale textului [27] .
  • <time> este utilizat pentru a defini datele și orele în formate lizibile de oameni, dar și de mașini și agenți de utilizator [28] .

Critici

  1. Din punctul de vedere al portabilității , etichetele semantice au fost considerate prea legate de singurul scop de elaborare a documentelor web și nepotrivite pentru dezvoltarea de aplicații web, rezultând inadecvate în raport cu tendința vremurilor [3] .
  2. Introducerea etichetelor semantice a fost mult dezbătută, deoarece etichetele inserate nu erau foarte concrete și prea ambigue. O parte a comunității dezvoltatorilor de web a susținut că utilizarea etichetelor semantice era inutilă în practică [29] , o altă parte, totuși, că erorile în utilizarea acestora erau prea penalizante [30] .

Notă

  1. ^ A b (EN) Elemente semantice HTML5 , pe www.w3schools.com. Adus la 28 ianuarie 2020 ( arhivat la 2 februarie 2020) .
  2. ^ căutabil în „Lexicon of the XXI Century” [ conexiune întreruptă ] , pe www.treccani.it . Adus la 31 ianuarie 2020 .
  3. ^ A b c (EN) Bruce Lawson, HTML5 Semantics , Semantics in HTML, Smashing Magazine, 2012. Adus pe 2 februarie 2020 ( depus la 28 octombrie 2019).
  4. ^ Etichetă detalii HTML , la www.w3schools.com . Adus la 16 februarie 2020 ( arhivat la 16 februarie 2020) .
  5. ^ (EN) HTML Tag bdi pe www.w3schools.com. Adus pe 29 ianuarie 2020 ( arhivat în 2 februarie 2020) .
  6. ^ (EN) Etichete HTML ruby pe www.w3schools.com. Adus pe 29 ianuarie 2020 ( arhivat în 2 februarie 2020) .
  7. ^ Probleme remediate de HTML5 , la developer.mozilla.org . Accesat la 2 februarie 2020 ( arhivat la 25 ianuarie 2020) .
  8. ^ (EN) HTML 5.2: 1. Introducere , pe www.w3.org. Adus pe 27 ianuarie 2020 ( arhivat pe 29 decembrie 2019) .
  9. ^ (RO) Ce este WHATWG? - Întrebări frecvente - WHATWG , la whatwg.org . Adus la 28 ianuarie 2020 ( arhivat la 30 decembrie 2019) .
  10. ^ A b (EN) Etichete antet HTML pe www.w3schools.com. Adus pe 29 ianuarie 2020 ( arhivat în 2 februarie 2020) .
  11. ^ (EN) atribute eliminate - W3C: diferențe HTML5 față de HTML4 , pe www.w3.org. Adus la 28 ianuarie 2020 ( arhivat la 27 iulie 2018) .
  12. ^ (EN) Etichetă eliminată - W3C: Diferențe HTML5 față de HTML4 , pe www.w3.org. Adus la 28 ianuarie 2020 ( arhivat la 27 iulie 2018) .
  13. ^ (EN) Elements cambati - W3C: Diferențe HTML5 față de HTML4 , pe www.w3.org. Adus la 31 ianuarie 2020 ( arhivat la 27 iulie 2018) .
  14. ^ Secțiuni și structura unui document HTML5 - Structura unui document HTML 4 , pe Documente Web MDN . Adus la 30 ianuarie 2020 ( arhivat la 25 ianuarie 2020) .
  15. ^ a b Secțiunile și structura unui document HTML5 - Probleme rezolvate de HTML5 , pe MDN Web Docs . Adus la 30 ianuarie 2020 ( arhivat la 25 ianuarie 2020) .
  16. ^ (EN) Secțiunea Tag-uri HTML de pe www.w3schools.com. Adus pe 29 ianuarie 2020 ( arhivat în 2 februarie 2020) .
  17. ^ (EN) Articol Tag-uri HTML de pe www.w3schools.com. Adus pe 29 ianuarie 2020 ( arhivat în 2 februarie 2020) .
  18. ^ (EN) Etichete HTML deoparte , pe www.w3schools.com. Adus pe 29 ianuarie 2020 ( arhivat în 2 februarie 2020) .
  19. ^ (EN) subsol Etichetă HTML pe www.w3schools.com. Adus pe 29 ianuarie 2020 ( arhivat în 2 februarie 2020) .
  20. ^ (EN) Navigare etichetă HTML pe www.w3schools.com. Adus pe 29 ianuarie 2020 ( arhivat în 2 februarie 2020) .
  21. ^ Secțiuni și structura unui document HTML5 - Algoritmul de structură HTML5 , pe MDN Web Docs . Adus la 28 ianuarie 2020 ( arhivat la 25 ianuarie 2020) .
  22. ^ Tettamanzi, HTML5 , 2017, pp. 137-139.
  23. ^ (EN) Microdate , pe MDN Web Docs. Adus la 17 februarie 2020 ( arhivat la 24 ianuarie 2020) .
  24. ^ Simone Bonati, Importanța microdatelor | Ajutor HTML5 | JavaScript HTML.it , pe HTML.it. Accesat la 2 februarie 2020 ( arhivat la 25 ianuarie 2020) .
  25. ^ Sciutto și colab., The art of SEO , 2017, pp. 163-165.
  26. ^ (EN) Etichetă principală HTML pe www.w3schools.com. Adus pe 29 ianuarie 2020 ( arhivat în 2 februarie 2020) .
  27. ^ Simone Bonati, The Tag Mark | Ajutor HTML5 | JavaScript HTML.it , pe HTML.it. Adus pe 29 ianuarie 2020 .
  28. ^ (EN) Timpul etichetelor HTML pe www.w3schools.com. Adus pe 29 ianuarie 2020 ( arhivat în 2 februarie 2020) .
  29. ^ (EN) Divya Manian, Căutarea noastră inutilă a valorii semantice , HTML Semantics, Smashing Magazine, 2012. Adus pe 2 februarie 2020 ( depus la 23 septembrie 2019).
  30. ^ (EN) Jeremy Keith, Pursuing value semantic , în HTML Semantics, Smashing Magazine, 2012. Adus pe 2 februarie 2020 ( depus pe 29 ianuarie 2020).

Bibliografie

  • ( EN ) Smashing Magazine, HTML Semantics , Freiburg, Smashing Media AG, 2012, ISBN 978-3-943075-36-6 .
  • ( IT ) Matteo Tettamazzi, HTML5 , Milano, Apogeo, 2017, ISBN 978-88-503-3351-6 .
  • ( IT ) Nereo Sciutto, Enrico Chiodino, Nico Guzzi, Valentina Orlandi și Gabriele Toschi, The art of SEO , Milan, Hoepli, 2017, ISBN 978-88-203-8096-0 .

Elemente conexe

linkuri externe

Adus de la „ https://it.wikipedia.org/w/index.php?title=Semantic_Tag&oldid=119718334 ”