AVVISO IMPORTANTE: Dato l'elevato numero di richieste, Eternal Curiosity non può accettare nuovi clienti, sia che si tratti di consulenze scritte che di ottimizzazione SEO diretta. Valutiamo solo casi eccezionali e ad alto budget. Per informazioni, vi invitiamo a scriverci a [email protected]

Questo articolo apparteneva al vecchio blog (blog.danilopetrozzi.it), per cui le informazioni potrebbero non essere più aggiornate ed attendibili.

Studiamo l’HTML5 – Elementi testuali e semantici

Finalmente entriamo nel vivo dell’HTML5: gli elementi testuali e semantici, quelli che dovremmo usare per attribuire semanticità e logica al testo.

Questo tipo di elementi è utile sia all’utente, dato che spesso sono accompagnati da un CSS differente, che al motore di ricerca, il quale ottiene maggiori informazioni semantiche riguardo un determinato paragrafo/testo.

Data la quantità dei tag presenti in questa sezione, eviterò di fare esempi come fatto nei post passati. Alla fine dell’articolo ci sarà una tabella riepilogativa fatta da W3C.

Effettivamente, sono una marea di elementi 🙁 Impararli tutti a memoria è difficile, ma possono tornare utili se per caso state sviluppando un’applicazione o un CMS in cui volete integrare questi potenti tag in modo nativo!

Elemento <a>

I nostri amatissimi link! 😀

L’elemento <a>, ovviamente, viene usato per inserire collegamenti ipertestuali.

Gli attributi href, target e download, applicabili ad <a>, rappresentano gli effetti che si verificano nel caso in cui il collegamento viene seguito o scaricato.

Gli attributi rel, hreflang e type, indicano la natura della risorsa linkata.

Elemento <em>

L’elemento <em> viene usato per enfatizzare un determinato contenuto.

<em> non è l’italico generico, come spesso si crede. Se lo scopo dello stile italico è quello di distinguere una parte del testo (es. se c’è un cambio di autore), alora è preferibile usare <i></i>

Elemento <strong>

<strong> si usa per dare importanza, serietà o urgenza a un contenuto. L’elemento <strong> può essere usato ovunque ce ne sia bisogno (all’interno di headings, paragrafi, div, e così via).

Elemento <small>

Si usa per note a margine, il cui carattere è generalmente inferiore a quello del corpo centrale del documento. (viene usato spesso per i disclaimer, note di copyright, annotazioni legali e così via).

Il consorzio W3C tiene a precisare che l’elemento <small> non serve per de-enfatizzare un contenuto o per ridurne l’importanza (non è il contrario di <em>)

Questo elemento non va utilizzato per testi molto lunghi, liste, e così via. (è da utilizzare per testi brevi)

Elemento <s>

<s> si utilizza per indicare elementi non più accurati o non più rilevanti. (per indicare che a seguito di una modifica, parte del testo è stato tolto, è preferibile usare <del>)

Un esempio molto intelligente per implementare l'<s> è nel caso di una variazione dei prezzi di un ecommerce. Il vecchio prezzo non più valido andrebbe inserito in un <s></s>

Elemento <cite>

Attraverso l’elemento <cite> implementiamo delle referenze per un lavoro creativo. Deve includere necessariamente il titolo del lavoro, o il nome dell’autore o l’URL di riferimento.

W3C tende a precisare che il concetto di lavoro creativo è ampio. Esso include: libri, poesie, canzoni, codici, show, giochi, dipindi, produzioni teatrali, musical, esibizioni, siti, post nei blog, tweet e così via.

Elemento <q>

Attraverso <q> possiamo inserire del testo quotato da altre fonti.

Attenzione: secondo W3C, la punteggiatura classica delle quotazioni (es. le virgolette aperte e chiuse) non dovrebbe essere inserita fisicamente nell’HTML, ma dovrebbe essere renderizzata dal dispositivo che sta leggendo il <q> (il browser, per esempio). Di fatto, l’elemento <q> sostituisce la punteggiatura classica. Se si vuole usare la punteggiatura classica, allora il consiglio è di NON usare <q>

Se l’elemento <q> è arricchito dall’attributo cite, allora è necessario inserire un URL valido.

Elemento <dfn>

L’elemento <dfn> si utilizza per specificare la definizione di un termine. Se l’elemento <dfn> ha un attributo title, allora questo assume il valore di definizione. Altrimenti, viene considerato solo il primo elemento figlio di <dfn> che deve essere un <abbr> (spiegato in basso)

Elemento <abbr>

Viene utilizzato per identificare abbreviazioni o acronimi. L’attributo title è usato per inserire la versione espansa/completa dell’elemento (ad esempio, la versione completa di un acronimo).

L’elemento <abbr> è consigliato dal consorzio sopratutto nel caso di termini/acronimi non familiari al lettore, che quindi necessitano di ulteriore approfondimento.

Elemento <data>

Viene utilizzato per rappresentare un testo anche nella forma più adatta per computer/macchine, grazie all’attributo value.

All’interno dell’attributo value, infatti, deve essere insera la versione del contenuto di <data> adatta ai computer.

Nel caso dei microformati, per esempio, l’attributo value (o la sua variante data-value) viene utilizzato in modo intensivo per fornire informazioni sia a livello macchina, sia al browser (per permettere di renderizzare gli elementi all’utente)

Elemento <time>

L’elemento <time> opera come <data>. Al suo interno viene inserito il contenuto, che in questo caso è una data o un orario, ma grazie all’attributo datetime, viene fornita una versione adeguata per macchine/computer.

Nell’attributo datetime, infatti, è necessario scrivere la data/orario in un formato rigoroso e accettato a livello internazionale. La versione “umana”, ossia quella contenuta effettivamente nella restante parte dell’elemento <time>, può avere qualsiasi formato, dato che è destinata all’utente.

Elemento <code>

L’elemento <code> si utilizza per rappresentare porzioni di codice. Il concetto di codice, è ampio: può essere una porzione di codice (inteso come XML, PHP, Java, Python e così via), il nome di un file, di un programma, stringhe legate al mondo dell’informatica e così via.

Anche se non è un vero standard, W3C consiglia di utilizzare l’attributo class=”language-x” quando si vuole mostrare un codice di programmazione vero e proprio. Al posto della x, ovviamente, bisogna inserire il nome comune del linguaggio.

Elemento <var>

Come dice il nome, l’elemento <var> si usa per indicare delle variabili.

Qualunque sia il contesto (matematico, informatico, ecc) questo elemento può racchiudere qualsiasi identificativo di variabile o costante.

Elemento <samp>

Viene utilizzato per rappresente l’output di esempioda parte di un codice, programma, software. (samp sta proprio per sample, ossia “campione”)

Elemento <kbd>

Si utilizza <kbd> per indicare l’input dell’utente. (il concetto di input è ampio: input da tastiera, input vocale, e così via)

Se <kbd> è un figlio di <samp>, allora rappresenta l’input stampato dal sistema.

Se <kbd> contiene un <samp> allora rappresenta l’input basato sull’output del sistema.

Se <kbd> è inserito all’interno di un altro <kbd> allora rappresenta una singola porzione di input che fa parte dello schema generale.

Elementi <sub> e <sup>

Quando c’è una porzione di testo formata da una parte maggiore e una minore, si usa <sub> e <sup>.

L’esempio più intuitivo è quando l’utente, in fase di registrazione, deve scegliere fra Sig.ra o Sig.na

In questo esempio, Sig è l’elemento <sub>, il maggiore, mentre le particelle secondarie andrebbero incluse in <sup>.

Elemento <i>

L’elemento <i> rappresenta una parte di testo in cui c’è una diversa “qualità”. Con “diversa qualità di testo” si intende, un diverso autore, narratore, un diverso tono, un termine idiomatico, una traslitterazione, e così via.

Se l'<i> contiene del testo in un’altra lingua, è necessariato usare l’attributo lang=”” adeguato.

Elemento <b>

L’elemento <b> serve per attirare l’attenzione del lettore su elementi precisi, di immediata utilità. L’elemento <b> NON incrementa l’importanza di un testo (a differenza di <strong>), non denota un differente registro (a differenza di <i>) e non enfatizza un testo (a differenza di <em>)

Secondo il consorzio, l’elemento <b> deve essere utilizzato come ultima spiaggia: se, e solo se, nessun altro elemento è idoneo.

Elemento <u>

L’elemento <u> andrebbe usato nel caso di annotazioni non testuali. W3C fa l’esempio della notazione tradotta di un testo cinese, oppure il caso in cui ci sia un errore ortografico/sintattico volutamente lasciato nel testo.

Come per <b>, l’elemento <u> spesso è sostituibile con altri elementi più precisi.

Elemento <mark>

Con l’elemento <mark> indichiamo che una parte di testo va visualmente evidenziata, per ragioni legate al contesto. Se per esempio l’elemento <mark> viene usato su una parte di una citazione, l’intento è quello di attirare l’attenzione del lettore su un particolare aspetto della citazione stessa.

Elemento <ruby>

Permette di inserire testi con la annotazione “ruby”. Questo tipo di annotazione viene usata nei paesi asiatici come guida per la prouncia delle parole. (in giapponese, questa notazione, si chiama furigana).

Generalmente il testo “ruby” compare sopra le notazioni. Esistono alcune varianti di questo elemento per esigenze specifiche ( group ruby, Jukugo ruby e così via)

Elemento <bdi>

Serve per indicare una parte di testo, isolato dal dagli elementi circostanti, che deve essere formattato in modo bidirezionale.

Se per esempio siamo di fronte a dell’user-generated content di cui non possiamo conoscere in anticipo la lingua, è bene utilizzare <bdi> nel caso ci fosse del testo arabo, che si legge da destra a sinistra.

L’attributo dir è automaticamente settato su auto, ovviamente. Questo attributo, generalmentem può essere impostato come dir=”ltr” per indicare testo che si legge da sinistra a destra, o dir=”rtl” per il contrario.

Elemento <span>

L’elemento <span> era presente anche nella precedente lezione, quando parlammo di elementi di raggruppamento HTML5.

<span> è un elemento bivalente dato che può essere utilizzato, oltre che per raggruppare, anche per identificare. Questo elemento non ha un vero e proprio scopo logico/semantico: può essere utilizzato per racchiudere una porzione di testo alla quale poter assegnare un attributo class, lang oppure dir.

Elemento <br>

<br> serve per indicare una interruzione di riga. Anche se parliamo di “riga”, in realtà il <br> è interpretato discrezionalmente dai dispositivi che, per esempio, potrebbero mostrare una serie di puntini o un semplice ritorno a capo.

<br> NON è un elemento di raggruppamento/lista, per questo non deve essere utilizzato per separare gruppi tematici all’interno di un paragrafo.

Elemento <wbr>

Viene usato per indicare l’opportunità di una interruzione di riga. In concreto, <wbr> viene usato in presenza di stringhe molto lunghe, in cui non ci sono spazi, e che rischiano di essere visualizzate in modo scorretto sui dispositivi.

Inserendo dei <wbr> multipli all’interno della stringa, si comunica al dispositivo che c’è la possibilità di interrompere la riga in quel punto. È discrezione del dispositivo agire o meno.

Riepilogo

gatto html5Per prima cosa.. batti cinque!

Non è da tutti leggersi questa montagna di definizioni senza svenire.

Questo gattino sorridente ti tirerà su il morale 😀

Ora che conosci un pò più a fondo i tag “core” dell’HTML5, cerca di non dimenticarteli. A parte i vari a, strong, em, e così via, che già dovresti conoscere a memoria, cerca di usare il più possibile gli elementi che più si addicono al testo che stai manipolando.

abbr, cite, time e altri tag simili vengono sempre più utilizzati nei motori di ricerca (per il ranking, per popolare i rich snippet e così via).

L’ultima cosa che devi fare, prima di abbandonare questo capitolo, è leggere la bella tabella riepilogativa con tanto di definizioni e esempi che puoi trovare in questa sezione di W3C.

 

 

Danilo petrozzi

Ciao! Io sono Danilo Petrozzi, il fondatore di Eternal Curiosity. Oltre a essere un senior SEO Specialist e un Web Developer, è dall'età di 9 anni che mi appassiono a qualsiasi cosa ruoti intorno al web e all'informatica in generale.

Lascia un commento