Tag semantico

Con il termine tag semantico, in informatica, si identificano gli elementi HTML che descrivono espressamente il proprio significato.

L'uso dei tag semantici permette agli sviluppatori di marcare documenti web in modo da strutturare le informazioni secondo uno standard comune; agli user agent 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.

Scopo

I tag semantici sono stati introdotti per favorire una strutturazione standard dei documenti web in modo da facilitare l'accessibilità, la ricercabilità, l'internazionalizzazione e l'interoperabilità dei dati in essi contenuti.

Accessibilità

I tag semantici migliorano l'accessibilità perché consentono agli user agents di sfruttare la struttura precisa del documento per migliorare l'esperienza utente.

Riducono inoltre la necessità di codice JavaScript lato client, perché i browser possono associare dei comportamenti a determinati tag. Gli sviluppatori, sulla base di questo, senza dovere ricorrere a script lato client, hanno a disposizione un controllo maggiore sulle proprie interfacce. Per esempio, un elemento è <details> il quale indica agli user agents che nel documento è presente una porzione di testo nascosta il cui compito è fornire informazioni aggiuntive su un argomento.

Ricercabilità

Gli algoritmi di parsing dei vari motori di ricerca fanno le loro inferenze per catalogare i dati dei documenti web e i documenti stessi.

Una struttura standard permette agli algoritmi di ricerca di navigare i documenti per catalogare informazioni con più facilità e correttezza.

Internazionalizzazione

Per favorire l'internazionalizzazione dei contenuti sono stati inseriti i tag <bdi> e <ruby> i quali agevolano la fruizione di documenti redatti in lingue con sistema di scrittura diverso dagli alfabeti in uso in Europa.

Interoperabilità

Prima di 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.

L'organizzazione standard del documento permette invece di generare strutture stabili.

In queste strutture, inserire contenuto aggiuntivo in modo dinamico non compromette la forma e ciò mantiene l'accessibilità e la ricercabilità dei contenuti.

Sviluppo dei tag semantici

Il concetto di tag semantico è "elemento dotato di significato". Per realizzare questo concetto si possono utilizzare tecnologie diverse, ma la capacità che gli elementi definiti per tale scopo hanno di produrre una struttura semantica standard non è la stessa per tutte.

Gli elementi semantici di XML

Grazie alla sua natura, XML si presta molto bene alla realizzazione di strutture semantiche: utilizzando DTD e/o XML Schema appositamente realizzati è possibile definire l'etichetta di un elemento descrivendo la categoria semantica dei suoi contenuti.

Per esempio, si possono definire elementi come <nome> e <cognome> e usarli per contenere nomi e cognomi, come nell'esempio seguente:

<?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

Tuttavia, i tag XML personalizzati funzionano esclusivamente nei particolari contesti d'uso definiti dagli schemi di riferimento creati dagli sviluppatori.

Le strutture dati personalizzate in XML risultano, quindi, decentralizzate e mal si adattano alla rappresentazione di concetti a un livello globale.

La tecnologia HTML

HTML fin dalla prima versione ha definito alcuni suoi elementi di mark-up in modo da rappresentare un certo valore semantico.

Ad esempio, gli elementi d'intestazione <hn> marcano del testo che viene individuato dai software come il titolo o un sottotitolo del documento web.

<h1>Titolo del documento</h1>
    <p>Testo in paragrafo di esempio</p>
    <h2>Primo Sottotitolo</h2>
        <p>Testo in paragrafo di esempio</p>    
    <h2>Secondo Sottotitolo</h2>
        <p>...</p>

esempio di utilizzo dei tag d'intestazione <hn>

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 le tecnologie HTML e XML sono state combinate nelle specifiche XHTML, ma queste furono causa di disaccordo tra le comunità di sviluppatori web.

Lo standard HTML5

Con lo standard HTML5 sono stati introdotti i tag semantici: un numero limitato di elementi, dotati di significato proprio, atti a identificare i contenuti delle pagine web.

I tag semantici nascono 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.

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.

L'utilizzo dei tag semantici non è obbligatorio, ma fortemente consigliato. Spetta agli sviluppatori sfruttare o meno questa tecnologia e usufruire dei vantaggi che comporta.

Attraverso questi elementi:

• gli sviluppatori possono realizzare pagine web con strutture standard
• i motori di ricerca individuano meglio le informazioni all'interno dei documenti web per indicizzarle secondo i propri algoritmi
• gli user agents sono in grado di riconoscere l'organizzazione delle pagine e la rilevanza delle informazioni in esse contenute. Questo permette a tali software di ottimizzare l'esperienza utente delle pagine web

La forza dei tag semantici, quindi, risiede nelle capacità espressive che offrono, correlate al grado di generalità delle strutture standardizzate che permettono di definire.

Inoltre, l'utilizzo di tag semantici permette una maggiore divisione tra elementi strutturali nelle presentazioni.

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 sia nelle presentazioni che tra gli 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 utilizzato. Questa eventualità, che poteva essere causa di interferenze tra tecnologie diverse, si può evitare utilizzando i tag semantici.

Infatti, lo standard HTML5 prevede che l'aspetto nelle presentazioni degli elementi sia completamente delegato alle tecnologie apposite, come il CSS. A tal fine ha rimosso gli attributi e i tag meramente stilistici e modificato alcuni tag già presenti nelle specifiche precedenti, affinché abbiano carattere semantico e non più stilistico.

Struttura di un documento web

La struttura di un documento web è ciò che si trova tra i tag <body> e </body> ed è fondamentale per la presentazione di un documento all'utente.

Le strutture di HTML 4

HTML 4 descrive la struttura di un documento web a partire dalle nozioni di sezione e sottosezione definite con l'elemento di divisione <div> e gli elementi d'intestazione <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (in ordine gerarchico discendente). La relazioni tra questi elementi genera la struttura del documento.

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.

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. Inoltre, dato che l'intento di un elemento d'intestazione non è sempre quello di definire una nuova sezione o sottosezione la loro occorrenza può essere causa di strutture indesiderate: ad esempio, <h2> può essere utilizzato sia per definire una sottosezione sia come semplice sottotitolo.

Tutto questo comporta l'impossibilità di definire una struttura semantica 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.

Le strutture di HTML5

HTML5 gestisce le problematiche presenti in HTML 4 aggiungendo precisione agli elementi di sezionamento e intestazione.

La generazione automatica della struttura è importante soprattutto per il corretto funzionamento delle tecnologie assistive.

In HTML5 tutto il contenuto del tag <body> appartiene ad una sezione e vi sono diversi elementi per definire strutture nidificate. I confini delle sezioni vengono definiti esplicitamente o implicitamente.

Sezioni esplicite

Gli elementi <body>, <section>, <article>, <aside>, <footer>, <header> e <nav> definiscono sezioni esplicite. All'interno di essi è possibile definire sottosezioni riutilizzando gli stessi elementi o i tag d'intestazione.

Gli elementi <section> e <article> sono indicati per contenere le informazioni principali del documento.

Il contenuto dei tag <aside>, <footer>, <header> e <nav> è, invece, considerato indipendente dal contenuto primario. Di solito sono elementi di carattere generale, ad esempio il logo del sito web, le informazioni di contatto o i menù contenenti link a pagine esterne.

esempio di sezionamento esplicito di HTML5

<section>
    <h1>I gatti</h1>
    
    <section>
        <h1>Introduzione</h1>
            <p>In questa sezione parliamo ...</p>
    </section>
    
    <section>
        <h1>Habitat</h1>
            <p>I gatti vivono ...</p>
    </section>
    
    <aside>
        <p>pubblicità</p>
    </aside>
    
    <footer>
        <p>(c) 2020 esempio</p>
    </footer>

</section>

che genera la struttura

1. I gatti
    1.1 Introduzione
    1.2 Habitat
    1.3 Sezione (aside)

Rispetto alle sezioni create attraverso <div>, le sezioni esplicite definite con i tag di HTML5 offrono un grado maggiore di autonomia, riconoscibilità e descrizione semantica del proprio contenuto.

Sezioni implicite

Dato che gli elementi di sezionamento di HTML5 non sono obbligatori è possibile definire le sezioni di una struttura attraverso gli elementi di intestazione, in modo da conservare la compatibilità con il sistema di generazione delle strutture di HTML 4. Questa tecnica è detta sezionamento implicito.

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. Elementi d'intestazione dello stesso grado aprono nuove sezioni.

esempio di sezionamento implicito

<section>
    <h1>Gli elefanti</h1>  
        <p>In questa sezione, parliamo degli elefanti.
        ...la sezione continua...
    <h3 class="sottosezione implicita">Habitat</h3>
        <p>Gli elefanti non vivono su gli alberi, ma tra di essi. 
        ...la sotto-sezione continua...
        
    <h1>I mammut</h1>
    <p>In questa sezione, parliamo dei mammut.
        ...la sezione continua...
</section>

che genera la struttura

1. Gli elefanti
   1.1 Habitat (definita implicitamente dall'elemento h3)
2. I mammut (implicitamente definita dall'elemento h1, che allo stesso tempo ha chiuso la sezione precedente)

Attraverso l'utilizzo del tag <hgroup> è possibile evitare il sotto-sezionamento dato da elementi d'intestazione di grado inferiore. Questo perché il tag comunica all'algoritmo di strutturazione della pagina solo l'intestazione di grado più alto e "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. esempio di utilizzo di hgroup

<section>
  <hgroup>
    <h1>Justine</h1>
    <h2>Les Malheurs de la vertu</h2>
  </hgroup>
  ... Contenuti ...
</section>

genera la struttura

1. Justine

Il sezionamento implicito è sconsigliato in quanto può generare strutture indesiderate. Tuttavia, dato che nella specifica HTML5 non è richiesto che i browser generino la struttura facendo riferimento esclusivo ai sezionamenti espliciti è bene controllare come questi gestiscono le intestazioni presenti nel documento per generarne la struttura.

Sezioni root

Insieme all'elemento <body>, i tag <blockquote>, <details>, <fieldset> e <figure> permettono di definire le sezioni root, cioè sezioni con struttura propria le quali non interfersicono con la struttura dell'elemento che le contiene.

Questi elementi contengono citazioni esterne, o come nel caso di <body> una struttura autonoma, perciò la loro struttura interna viene isolata.

Aumentare la precisione semantica

I tag semantici rispecchiano l'informazione contenuta in essi ad un certo grado di generalità, ma utilizzando i microdata è possibile specificare il valore semantico del contenuto dei tag.

I microdata sono attributi appositamente creati per etichettare il contenuto dei tag HTML.

Con i microdata è possibile fare riferimento a dizionari specifici che facilitano l'interpretazione delle informazioni racchiuse nel documento ai motori di ricerca, bot e web-crawler.

I microdata sono gli attributi itemscope, itemtype e itemprop.

<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>

esempio di utilizzo dei microdata

L'attributo itemscope definisce l'elemento come un oggetto.

Il valore di itemtype definisce il dizionario utilizzato per descrivere l'oggetto.

Mentre itemprop specifica quale proprietà dell'oggetto è espressa dal contenuto del tag.

Esistono diversi 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.

Altri tag semantici e strutturali

• <main> è il contenitore dell'argomento principale del documento. È equiparabile a <section>, ma, differentemente da questo, non dovrebbe occorrere più di una volta nella pagina
• <mark> è utilizzato per evidenziare le parti di testo più rilevanti.
• <time> è utilizzato per definire date e orari in formati leggibili dall'uomo ma anche dalle macchine e dagli user agents.

Critiche

1. 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.
2. 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, un'altra parte, invece, che errori nell'utilizzo di questi risultassero troppo penalizzanti.

Bibliografia

• (EN) Smashing Magazine, HTML Semantics, Friburgo, 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 e Gabriele Toschi, L'arte della SEO, Milano, Hoepli, 2017, ISBN 978-88-203-8096-0.

• (IT) MDN Web Docs, Sezioni e Struttura di un Documento HTML5, su developer.mozilla.org/it/. URL consultato il 1º febbraio 2020 (archiviato dall'url originale il 25 gennaio 2020).

• (EN) HTML Living Standard, su whatwg.org. URL consultato il 1º febbraio 2020.
• (IT) Guida HTML5, su html.it. URL consultato il 1º febbraio 2020.
• (EN) HTML 5.2, su w3.org. URL consultato il 1º febbraio 2020.
• (EN) HTML5 Semantic Elements, su w3school.com. URL consultato il 1º febbraio 2020.

Voci correlate

• Web semantico
• Tag
• Elemento HTML
• Mark-up
• XML
• HTML
• HTML5
• Browser
• Motore di ricerca
• User Experience
• Accessibilità
• Information retrieval
• Interoperabilità
• Internazionalizzazione
• Retrocompatibilità
• Tollernanza ai guasti
• User agents
• Crawler
• Semantica
• Metalinguaggio

Collegamenti esterni

• schema.org
• WAI-ARIA Overview