Tag semantici
[modifica | modifica wikitesto]Con il termine Tag Semantico[1], in informatica, si identificano gli elementi HTML che descrivono espressamente il proprio significato[1].
Il concetto di tag semantico è "elemento dotato di significato": i tag semantici sono l'insieme di questi elementi.
L'espressività dei tag semantici permette: agli sviluppatori di marcare documenti web in modo da strutturare le informazioni secondo uno standard comune; ai browser di riconoscere i tag utilizzati nei documenti; ai motori di ricerca di indicizzare i contenuti di una pagina web con una maggiore chiarezza e organizzazione.
Verso i tag semantici
[modifica | modifica wikitesto]Il tag semantico è una tecnologia web per avvicinarsi all'idea del web semantico: quest'ultima sempre presente durante lo sviluppo del Web.
Tim Berners-Lee, ideatore del World Wide Web, nell'articolo The Semantic Web[2], pubblicato su Scientific American nel maggio 2001, propose un metodo per realizzare il web semantico basato principalmente sull'utilizzo di ontologie.
Molte delle tecnologie indicate come componenti delle ontologie hanno faticato ad affermarsi e le cause vengono indicate dallo stesso Berners-Lee nella pubblicazione del 2006, The Semantic Web Revisited[3], redatta assieme a Nigel Shadbolt e Wendy Hall.
XML, metalinguaggio anche questo indicato all'interno delle ontologie, diversamente dalle altre, si dimostrò da subito una tecnologia dalle grandi capacità, data l'abbondante varietà di campi e metodi d'uso.
Potenzialità di XML
[modifica | modifica wikitesto]Grazie alla sua natura, XML si presta molto bene alla realizzazione di strutture semantiche: attraverso la personalizzazione di strutture XML è possibile realizzare il concetto di tag semantico.
<?xml version="1.0" encoding="UTF-8"?>
<utenti>
<utente anni="20">
<nome>Ema</nome>
<cognome>Princi</cognome>
<indirizzo>Torino</indirizzo>
</utente>
<utente anni="54">
<nome>Max</nome>
<cognome>Rossi</cognome>
<indirizzo>Roma</indirizzo>
</utente>
</utenti>
esempio di utilizzo di XML estratto dalla pagina di wikipedia su XML
Le strutture XML personalizzate sono un insieme di regole e tag portatori di significato proprio, definite all'interno di DTD e/o XML Schema, specifici per il contesto di utilizzo.
Benché la conoscenza condivisa delle norme prestabilite nelle specifiche consentano la riadattabilità e il riutilizzo dei tag definiti negli schemi ad-hoc, queste funzionano prevalentemente in ambiti settoriali.
I tag XML personalizzati funzionano esclusivamente nei particolari contesti d'uso, definiti con gli schemi di riferimento. Le strutture dati personalizzate in XML risultano, quindi, decentralizzate e mal si adattano alla rappresentazione di concetti a un livello globale.
Le capacità delle strutture di mark-up personalizzate sono, però, evidenti e lo stesso HTML si basa su questa tecnologia.
La tecnologia HTML
[modifica | modifica wikitesto]Lo standard HTML si è evoluto e aggiornato nel tempo in versioni diverse: le W3C Recomandation.
Nato per marcare dati appartenenti a documenti di carattere scientifico[4], fin dalla prima versione, i suoi elementi di mark-up sono stati definiti in modo da rappresentare un certo valore semantico.
Ad esempio, il tag <ol>, letteralmente "ordered list", cioè "lista ordinata", permette di formattare una lista le cui voci sono ordinate con numeri in ordine crescente.
Codice HTML | |
---|---|
<ol> <li>Giovanni </li> <li>Luca </li> <li>Marco </li> <li>Giacomo </li> </ol> |
|
esempio di utilizzo del tag <ol> estratto dalla pagina di wikipedia su Elemento HTML
Tuttavia, il grado semantico raggiunto dagli elementi strutturali, prima del rilascio di HTML5, produceva documenti con strutture troppo generiche e difficilmente accessibili.
Per permettere lo sviluppo di strutture dato più espressive sono state combinate le tecnologie HTML e XML nelle specifiche XHTML, ma queste furono causa di disaccordo tra le comunità di sviluppatori web[5].
Lo standard HTML5
[modifica | modifica wikitesto]Con lo standard HTML5 sono stati introdotti i tag semantici, un numero limitato di elementi, dotati di significato proprio, atti a identificare, ad un certo livello di generalità, i contenuti delle pagine web.
Ad esempio, il tag <header>
, letteralmente "testata", consente di identificare lo "spazio" dove sono contenuti elementi introduttivi di una parte, specifica o generale, di un documento web e i link di navigazione.
Sapere come sono disposti i dati all'interno di un documento è vantaggioso sia per le analisi dei motori di ricerca sia per permettere ai browser di migliorare l'esperienza utente.
La forza dei tag semantici risiede nelle capacità espressive che offrono correlate al grado di generalità delle strutture standardizzate, che permettono di definire.
I tag semantici nascono, quindi, come elementi strutturali su cui poter fare inferenze diverse a seconda delle necessità dei software che vi attingono e non come etichette per denotare ogni eventualità di dato.
Inoltre, l'utilizzo di tag semantici, permette una maggiore divisione tra elementi strutturali e presentazionali.
In passato spesso gli attributi degli elementi erano utilizzati per fornire informazioni semantiche ai software di indicizzazione dei contenuti disponibili in rete, causando una sovrapposizione tra elementi meramente presentazionali ed elementi strutturali.
Ad esempio, lo standard hCard usava i valori dell'attributo class
per assegnare un certo valore semantico ai tag presenti nelle pagine web, ma, simultaneamente, lo stesso attributo poteva essere utilizzato anche da CSS per definire lo stile degli elementi in cui l'attributo era definito.
Utilizzando tag semantici questo si può evitare.
Infatti, lo standard html5 prevede che l'aspetto presentazionale degli elementi sia completamente delegato alle tecnologie apposite, come il CSS. A tal fine ha rimosso gli attributi[6] e i tag[7] meramente stilistici e rieducato alcuni tag[8] già presenti nelle specifiche precedenti, affinché abbiano carattere semantico e non più stilistico.
Scopo
[modifica | modifica wikitesto]I tag semantici sono stati introdotti per favorire una strutturazione standard dei documenti web in modo da facilitare l'accessibilità, l'indicizzazione e l'estrazione dei dati in essi contenuti.
L'indicizzazione del contenuto organizzato semanticamente permette una maggiore strutturazione del dato informativo a favore dei meccanismi di elaborazione automatica del web semantico.
La catena logica di utilizzo dei tag semantici parte dagli sviluppatori.
Gli sviluppatori, attraverso gli elementi semantici, possono realizzare pagine web con strutture standard.
I browser sono in grado di riconoscere l'organizzazione delle pagine marcate con tag semantici e distinguere gli elementi in base al loro scopo e alla loro relazione con il contenuto principale: questo permette ai browser di ottimizzare la user experience delle pagine web.
I motori di ricerca, invece, utilizzano le strutture create con tag semantici, per realizzare software che, grazie alla conoscenza del livello di generalità a cui sono posti i contenuti, sono in grado di navigare queste strutture, per individuare le informazioni all'interno dei documenti web e indicizzarle secondo i propri algoritmi.
In generale, strutturare con maggiore precisione i dati e specificare quali di questi siano rilevanti, rispetto al contenuto del documento, consente di incrementare l'accessibilità, ricercabilità[9], internazionalizzazione e interoperabilità[10] delle pagine web.
Accessibilità
[modifica | modifica wikitesto]Per accessibilità s'intende le tecniche che permettono la fruizione dei contenuti.
I tag semantici sono tra queste, in quanto, garantendo l'organizzazione standard dei documenti, consentono agli user agents di sfruttare la precisione delle strutture per migliorare la user experience.
Altro obiettivo, legato ai tag semantici e all'accessibilità delle interfacce web, è la riduzione della necessità di codice javascript lato client.
I browser definiscono comportamenti di default, che associano a determinati tag. Tali comportamenti vengono sfruttati dai software legati ai browser[10]: gli sviluppatori, sulla base di questo, senza dovere ricorrere a script lato client, hanno a disposizione un controllo maggiore sulle proprie interfacce.
Ricercabilità
[modifica | modifica wikitesto]La ricercabilità di un elemento sul web si basa sulle tecniche di information retrieval degli algoritmi di ricerca dei motori di ricerca.
L'obiettivo dei tag semantici non è quello di classificare qualsiasi tipo di informazione, ma quello di dare una struttura "standard" ai documenti web, sulla quale gli algoritmi di parsing dei vari motori di ricerca fanno le loro inferenze per catalogare i dati.
Una maggiore strutturazione dei documenti consente di definire strutture dati da cui gli algoritmi di ricerca catalogano informazioni con più facilità e correttezza e quindi permette a quest'ultimi di restituire risultati più precisi alle query di ricerca degli utenti.
Internazionalizzazione
[modifica | modifica wikitesto]Per favorire l'internazionalizzazione dei contenuti, HTML5 utilizza come standard di codifica dei caratteri UTF-8[11], il quale permette di codificare praticamente qualsiasi sistema linguistico[12].
HTML5 sfrutta questo fatto e migliora alcune difficoltà che presenta l'algoritmo bidirezionale di Unicode introducendo i tag semantici <bdi>
, che sovrascrive l'algoritmo per migliorare la traduzione del testo in lingue con scrittura speculare, e il tag <ruby>
, che permette di annotare caratteri non alfabetici, per aiutare la comprensioni del testo[10].
Interoperabilità
[modifica | modifica wikitesto]HTML5, attraverso i tag semantici, favorisce i meccanismi di interoperabilità informatica.
L'organizzazione standard del documento web, favorita dai tag semantici, permette la generazione di strutture dei documenti stabili.
In queste strutture, inserire contenuto aggiuntivo in modo dinamico, non ne compromette la forma, mantenendo l'accessibilità e la ricercabilità dei contenuti.
Nelle versioni precedenti a HTML5, la struttura di un documento, definita attraverso i tag d'intestazione e divisione, veniva sovrascritta all'aggiunta di ogni ulteriore contenuto dinamico, causando l'eventuale modifica dei ruoli delle sezioni della pagina.
Ciò comprometteva la corretta accessibilità, ricercabilità e rendering dei contenuti, da parte dei browser e dei motori di ricerca.[13]
Retrocompatibilità
[modifica | modifica wikitesto]La retrocompatibilità è la capacità di utilizzare tecnologie sorpassate in versioni più moderne degli stessi software o hardware.
Per raggiungere questo obiettivo, i tag aggiunti con lo standard HTML5 sono stati designati secondo la filosofia della tolleranza ai guasti, ottenuta con l'introduzione del meccanismo di fallbacks[10], in modo che l'utilizzo e la visualizzazione dei nuovi tag non sia destinata solo ai browser moderni, ma retrocompatibile anche con i browser più datati.
Inoltre, consente anche di utilizzare tag ritenuti "deprecati"[14] dallo standard attuale in documenti HTML5.
Algoritmo della struttura di HTML5
[modifica | modifica wikitesto]All'inizio dell'era di internet, le pagine web erano organizzate come tabelle e le loro strutture risultavano complesse e poco flessibili e accessibili.
L'introduzione del tag di sezionamento <div>
permise di semplificare le strutture e conferirgli una certa semantica attraverso i valori degli attributi id
e class
.
Con il passare del tempo, crebbe la necessità di strutture standardizzate, che permettessero a software automatici di accedere e interpretare le informazioni contenute in una pagina web, ma il margine di arbitrarietà nella definizione delle strutture comprometteva la riconoscibilità dei contenuti.[15]
Per gestire le problematiche inerenti alla strutturazione delle pagine, con HTML5 vennero introdotti i tag semantici, con i quali si rendeva possibile strutturare in modo standard un documento.
La struttura di un documento web è ciò che si trova tra i tag <body>
e </body>
.
Differenze con HTML 4
[modifica | modifica wikitesto]HTML 4 genera le sezioni e sottosezioni di un documento a partire dalla disposizione degli elementi di divisione <div>
e intestazione <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
(in ordine gerarchico discendente)[16].
L'elemento <div>
non è strettamente necessario per definire un sezionamento: infatti, ogni volta che s'incontra nel documento un elemento di intestazione, a seconda del rapporto gerarchico tra l'ultima intestazione e la precedente, si possono generare nuove sezioni e sottosezioni.
Ad esempio, ogni volta che un elemento di intestazione di grado gerarchico più elevato segue un elemento di grado inferiore, viene generata una nuova sezione.
Le strutture create, facendo esclusivo riferimento a questi elementi, risultano troppo generiche e approssimative: senza una definizione degli attributi id
e class
, <div>
rimane un elemento generico e tale rimane anche lo scopo del suo contenuto.
Questo comporta l'impossibilità di definire una struttura chiara del documento, nella quale sia possibile distinguere le sezioni contenenti gli argomenti principali dalle sezioni il cui contenuto non fa parte del flusso primario, né, tantomeno, dalle sezioni caricate dinamicamente a tempo di esecuzione della pagina, le quali, ogni volta che ricorrono, modificano la struttura del documento.
Inoltre, non è possibile inserire un sotto-titolo o titolo secondario senza modificare la sezione aperta dall'elemento d'intestazione di grado più alto, perché ogni elemento di intestazione crea una nuova sezione o sotto-sezione, cambiando la struttura del documento.[17]
Strutture HTML5
[modifica | modifica wikitesto]La generazione automatica della struttura è importante soprattutto per il corretto funzionamento delle tecnologie assistive e HTML5 aggiunge precisione agli elementi di sezionamento e intestazione.
Per fare questo, HTML5 equipara il tag <body>
a una sezione e introduce diversi elementi per creare le ripartizioni semantiche interne a questa. Le sezioni vengono definite esplicitamente o implicitamente.
<!doctype html>
<body>
<header>
<h1>I gatti</h1>
</header>
<section>
<h1>Introduzione</h1>
<p>In questa sezione parliamo ...</p>
</section>
<section>
<h1>Habitat</h1>
<p>I gatti vivono ...</p>
</section>
<footer>
<p>(c) 2020 esempio</p>
</footer>
</body>
esempio di strutturazione di un documento HTML5
Sezioni esplicite
[modifica | modifica wikitesto]Gli elementi <body>
, <section>
, <article>
, <aside>
, <footer>
, <header>
e <nav>
definiscono sezioni esplicite.
All'interno di essi è possibile definire sottosezione riutilizzando gli stessi elementi o i tag d'intestazione, ma ogni sezione è ben distinta dalle sezioni con lo stesso livello gerarchico.
I tag <section>
e <article>
sono le sezioni contenenti le informazioni principali del documento.
I tag <aside>
, <footer>
, <header>
e <nav>
vengono considerate come parti indipendenti dal contenuto primario del documento: in queste è possibile inserire elementi di carattere generale, ad esempio il logo del sito web, i contatti o i menù contenenti link a pagine esterne.
Sezioni implicite
[modifica | modifica wikitesto]Attraverso gli elementi di intestazione vengono definite sezioni implicite.
Le relazioni gerarchiche, che si susseguono tra gli elementi d'intestazione, definiscono implicitamente sezioni diverse, le quali sono, però, circoscritte alle sole sezioni contenitrici, definite dall'elemento d'intestazione di grado più alto o dagli elementi di sezionamento esplicito.
HTML5 risolve il problema dei titoli secondari attraverso l'utilizzo del tag <hgroup>
, il quale comunica all'algoritmo di strutturazione della pagina solo l'intestazione di grado più alto. Perciò "nasconde" le altre intestazioni di livello inferiore annidate nel tag, in modo che la struttura del documento sia generata senza tenere conto della loro presenza.
Sezioni root
[modifica | modifica wikitesto]Vi sono inoltre i tag <blockquote>
, <details>
, <fieldset>
e <figure>
che permettono di organizzare delle strutture interne che non interferiscono con le strutture dei loro contenitori.
Queste, insieme alla sezione definita dal tag <body>
, sono definite sezioni root.[18]
I tag semantici e strutturali
[modifica | modifica wikitesto]<section>
definisce le sezioni e sottosezioni del documento[19]<article>
specifica contenuti indipendenti e autonomi che dovrebbero poter essere distribuiti al di fuori della pagina web mantenendo il proprio senso[20]<main>
è il contenitore dell'argomento principale del documento. È equiparabile a <section>, ma, differentemente da questo, non dovrebbe occorrere più di una volta nella pagina[21]<header>
è un contenitore per le informazioni di tipo introduttivo, come intestazioni o loghi, o link di navigazione[22]<nav>
è un contenitore per i link di navigazione, indicato, in particolare, per contenere link a pagine o sezioni generali[23]<footer>
è il contenitore per le informazioni di piè di pagina o informazioni generali per la sezione che lo contiene[24]<aside>
è un contenitore per informazioni di contorno o indipendenti rispetto al contenuto principale del documento[25]<mark>
è utilizzato per evidenziare le parti di testo più rilevanti[26]<time>
è utilizzato per definire date e orari in formati leggibili dall'uomo ma anche dalle macchine così da poter essere letti dagli user agents[27]<bdi>
permette di effettuare l'isolamento bidirezionale del testo per le lingue con scrittura speculare[28]<ruby>
permette di specificare un'annotazione nella quale indicare la pronuncia o il significato dei caratteri del testo. Viene spesso utilizzato nei documenti in lingua giapponese[29]
Altri tag sono <figure>
e <figcaption>
, <command>
e <menu>
, <details>
e <summary>
, <keygen>
, <output>
, <embed>
e <wbr>
[30].
Espandibilità dei tag
[modifica | modifica wikitesto]I tag semantici rispecchiano l'informazione contenuta in essi ad un certo grado di generalità, ma, attraverso la definizione di dizionari specifici, è possibile espandere il valore semantico dei tag dei documenti, in modo da puntualizzare il significato del contenuto di questi elementi.
Questo approccio facilita l'interpretazione delle informazioni racchiuse nel documento ai motori di ricerca, bot e web-crawler.[31]
Per specificare i dizionari, è possibile definire strutture personalizzate in forma di JSON-LD, microdata o RDFa nella sezione <head>
del documento.
All'interno del documento, i valori definiti sono utilizzabili attraverso gli attributi itemscope
, itemtype
e itemprop
.
L'attributo itemscope
definisce l'elemento contenitore dell'oggetto da descrivere.[32]
Il valore di itemtype
corrisponde alla tipologia che vogliamo associare a un tag: quest'ultimo viene equiparato a un oggetto.
Mentre, itemprop
specifica quale proprietà dell'oggetto è espressa dal contenuto del tag.[33]
<p itemscope itemtype="link al dizionario utilizzato">
<span itemprop="name">Mario Bianchi</span> è nato il
<span itemprop="birthDte">27 giugno 1965</span>...
e vive a
<span itemprop="homeLocation"> Roma</span>
...
<p>
Si possono definire dizionari ad-hoc, le cui capacità sono verificabili attraverso strumenti di test appositi, o utilizzare dizionari predefiniti come schema.org, che definisce molti schemi per strutturare i dati in modo standard, e WAI-ARIA, il cui intento è coadiuvare i browser nel migliorare l'accessibilità ai contenuti, soprattutto per le tecnologie assistive.
Critiche
[modifica | modifica wikitesto]- Dal punto di vista della portabilità, i tag semantici sono stati giudicati troppo legati al solo scopo di redigere documenti web e poco adatti allo sviluppo di applicativi web, risultando inadeguati rispetto all'andamento dei tempi[10].
- L'introduzione dei tag semantici è stata molto dibattuta, in quanto i tag inseriti risultavano poco concreti e troppo ambigui. Una parte della comunità degli sviluppatori web sosteneva che l'utilizzo dei tag semantici fosse in pratica inutile[34], un'altra parte, invece, che errori nell'utilizzo di questi risultassero troppo penalizzanti[35].
Note
[modifica | modifica wikitesto]- ^ a b (EN) HTML5 Semantic Elements, su www.w3schools.com. URL consultato il 28 gennaio 2020.
- ^ (EN) Tim Berners-lee, Hendler James, Lassila Ora, The Semantic Web, in Scientific American, maggio 2001.
- ^ (EN) Tim Berners-Lee, Shadbolt Nigel, Hall Wendy, The Semantic Web Revisited, in IEEE Computer Society, Steffen Staab, maggio-giugno 2006 (archiviato dall'originale il 27 ottobre 2011) .
- ^ (EN) HTML 5.2: 1. Introduction, su www.w3.org. URL consultato il 27 gennaio 2020.
- ^ (EN) What is the WHATWG? - FAQ — WHATWG, su whatwg.org. URL consultato il 28 gennaio 2020.
- ^ (EN) Attributi rimossi - W3C: HTML5 Differences from HTML4, su www.w3.org. URL consultato il 28 gennaio 2020.
- ^ (EN) Tag rimossi - W3C: HTML5 Differences from HTML4, su www.w3.org. URL consultato il 28 gennaio 2020.
- ^ (EN) Elementi cambati - W3C: HTML5 Differences from HTML4, su www.w3.org. URL consultato il 31 gennaio 2020.
- ^ ricercabilita in "Lessico del XXI Secolo", su www.treccani.it. URL consultato il 31 gennaio 2020.
- ^ a b c d e (EN) Bruce Lawson, HTML5 Semantics, in HTML Semantics, Smashing Magazine, 2012.
- ^ HTML5 Introduction, su www.w3schools.com. URL consultato il 27 gennaio 2020.
- ^ Alessandro Lenci, Simonetta Montemagni e Vito Pirelli, Testo e computer, 1°ª ed., Città di Castello, Carocci Spa, 2014, p. 60, ISBN 978-88-430-3425-3.
- ^ Problemi risolti da HTML5, su developer.mozilla.org.
- ^ Deprecato in informatica - Consulenza Linguistica - Accademia della Crusca, su accademiadellacrusca.it. URL consultato il 1º febbraio 2020.
- ^ Simone Bonati, I nuovi elementi di HTML5 | Guida HTML5 | JavaScript HTML.it, su HTML.it. URL consultato il 27 gennaio 2020.
- ^ Sezioni e Struttura di un Documento HTML5 - Struttura di un Documento in HTML 4, su MDN Web Docs. URL consultato il 30 gennaio 2020.
- ^ Sezioni e Struttura di un Documento HTML5 - Problemi Risolti da HTML5, su MDN Web Docs. URL consultato il 30 gennaio 2020.
- ^ Sezioni e Struttura di un Documento HTML5 - L'Algoritmo della Struttura di HTML5, su MDN Web Docs. URL consultato il 28 gennaio 2020.
- ^ (EN) HTML section Tag, su www.w3schools.com. URL consultato il 29 gennaio 2020.
- ^ (EN) HTML article Tag, su www.w3schools.com. URL consultato il 29 gennaio 2020.
- ^ (EN) HTML main Tag, su www.w3schools.com. URL consultato il 29 gennaio 2020.
- ^ (EN) HTML header Tag, su www.w3schools.com. URL consultato il 29 gennaio 2020.
- ^ (EN) HTML nav Tag, su www.w3schools.com. URL consultato il 29 gennaio 2020.
- ^ (EN) HTML footer Tag, su www.w3schools.com. URL consultato il 29 gennaio 2020.
- ^ (EN) HTML aside Tag, su www.w3schools.com. URL consultato il 29 gennaio 2020.
- ^ Simone Bonati, Il Tag Mark | Guida HTML5 | JavaScript HTML.it, su HTML.it. URL consultato il 29 gennaio 2020.
- ^ (EN) HTML time Tag, su www.w3schools.com. URL consultato il 29 gennaio 2020.
- ^ (EN) HTML bdi Tag, su www.w3schools.com. URL consultato il 29 gennaio 2020.
- ^ (EN) HTML ruby Tag, su www.w3schools.com. URL consultato il 29 gennaio 2020.
- ^ Simone Bonati, Altri Tag HTML5 | Guida HTML5 | JavaScript HTML.it, su HTML.it. URL consultato il 29 gennaio 2020.
- ^ Tettamanzi, HTML5, 2017, pp. 137-139.
- ^ Simone Bonati, L’importanza dei microdati | Guida HTML5 | JavaScript HTML.it, su HTML.it. URL consultato il 2 febbraio 2020.
- ^ Sciutto et al., L'arte della SEO, 2017, pp. 163-165.
- ^ (EN) Divya Manian, Our pointless pursuit of semantic value, in HTML Semantics, Smashing Magazine, 2012.
- ^ (EN) Jeremy Keith, Pursuing semantic value, in HTML Semantics, Smashing Magazine, 2012.
Bibliografia
[modifica | modifica wikitesto]- (EN) Smashing Magazine, HTML Semantics, Friburgo, Smashing Media AG, 2012 , ISBN 978-3-943075-36-6
- Matteo Tettamazzi, HTML5, Milano, Apogeo, 2017, ISBN 978-88-503-3351-6
- Sciutto, Nereo e Enrico Chiodino, Nico Guzzi, Valentina Orlandi, Gabriele Toschi, L'arte della SEO, Milano, Hoepli, 2017, ISBN 978-88-203-8096-0
- https://developer.mozilla.org/it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document
- (EN) https://html.spec.whatwg.org/multipage/dom.html
- https://www.html.it/guide/guida-html5/
- (EN) https://www.w3.org/TR/html52/introduction.html
- (EN) https://www.w3.org/WAI/standards-guidelines/aria/
- (EN) https://www.w3schools.com/html/html5_semantic_elements.asp
- (EN) https://schema.org/