Utente:Kvanni/Sandbox

Tag semantici

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

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

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

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

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, 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>	Giovanni Luca Marco Giacomo

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.

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, 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 e i tag meramente stilistici e rieducato alcuni tag già presenti nelle specifiche precedenti, affinché abbiano carattere semantico e non più stilistico.

Scopo

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à, internazionalizzazione e interoperabilità delle pagine web.

Accessibilità

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: gli sviluppatori, sulla base di questo, senza dovere ricorrere a script lato client, hanno a disposizione un controllo maggiore sulle proprie interfacce.

Ricercabilità

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

Per favorire l'internazionalizzazione dei contenuti, HTML5 utilizza come standard di codifica dei caratteri UTF-8, il quale permette di codificare praticamente qualsiasi sistema linguistico.

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.

Interoperabilità

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.

Retrocompatibilità

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, 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" dallo standard attuale in documenti HTML5.

Algoritmo della struttura di HTML5

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.

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

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

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.

Strutture HTML5

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

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

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

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.

I tag semantici e strutturali

• <section> definisce le sezioni e sottosezioni del documento
• <article> specifica contenuti indipendenti e autonomi che dovrebbero poter essere distribuiti al di fuori della pagina web mantenendo il proprio senso
• <main> è il contenitore dell'argomento principale del documento. È equiparabile a <section>, ma, differentemente da questo, non dovrebbe occorrere più di una volta nella pagina
• <header> è un contenitore per le informazioni di tipo introduttivo, come intestazioni o loghi, o link di navigazione
• <nav> è un contenitore per i link di navigazione, indicato, in particolare, per contenere link a pagine o sezioni generali
• <footer> è il contenitore per le informazioni di piè di pagina o informazioni generali per la sezione che lo contiene
• <aside> è un contenitore per informazioni di contorno o indipendenti rispetto al contenuto principale del documento
• <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 così da poter essere letti dagli user agents
• <bdi> permette di effettuare l'isolamento bidirezionale del testo per le lingue con scrittura speculare
• <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

Altri tag sono <figure> e <figcaption>, <command> e <menu>, <details> e <summary>, <keygen>, <output>, <embed> e <wbr>.

Espandibilità dei tag

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.

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 itemscopedefinisce l'elemento contenitore dell'oggetto da descrivere.

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.

<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

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

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