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 di raggruppamento e liste

Finalmente iniziamo ad addentrarci più concretamente negli elementi più utilizzati all’interno del body: sto parlando dei tag di raggruppamento e delle liste.

Elemento <p>

È l’elemento di raggruppamento più generico possibile. <p> rappresenta un paragrafo testuale che contiene informazioni legate agli eventuali <p> precedenti e antecedenti.

Dato lo scopo molto “generico” di questo elemento, il consorzio consiglia di non usarlo nel caso in cui esista un elemento più specifico o semanticamente più idoneo per descrivere un elemento.

Il testo “Autore: [email protected]” dovrebbe essere racchiuso in un <address></address> invece che in un <p></p>.

All’interno di <p> non possono essere inserite liste. Nel caso di una lista presente tra due paragrafi, il consorzio consiglia:

1) di utilizzare un paragrafo prima e dopo la lista:

2) oppure di utilizzare un div generale che faccia da wrapper per tutto:

Elemento <hr>

L’<hr> rappresente una interruzione tra paragrafi con tema differente. (quando si cambia argomento, quando c’è una transizione a un’altra area del sito e così via)

La sinassi consigliata dal consorzio è <hr> (non c’è alcun tag di chiusura) e non deve essere contenuto in alcun elemento di raggruppamento.

Elemento <pre>

<pre> viene utilizzato per includere blocchi di testo preformattato nel caso in cui c’è bisogno di una rappresentazione “tipografica” invece che semantica.

Il caso più famoso per cui viene utilizzato è quando c’è bisogno di scrivere del codice HTML ( o altro linguaggio ) all’interno del testo. Grazie all’elemento <pre>, il codice contenuto al suo interno verrà interpretato come testo normale (e lo stile risponderà di conseguenza).

Elemento <blockquote>

L’elemento <blockquote> si usa quando c’è la necessità di citare informazioni/dati da altre fonti, con l’aggiunta opzionale della citazione.

L’eventuale fonte originale del testo quotato, deve essere inclusa nell’attributo cite. (se è una pagina web, è preferibile linkarla)

Esempio:

<blockquote> è un elemento molto malleabile. Tant’è che lo stesso concetto può essere espresso così:

Liste <ol></ol> e <ul></ul>

I tag <ol> e <ul> sono dei raggruppatori che permettono di generare delle liste di elementi.

La differenza tra i due è concettuale: una lista <ol> è composta da elementi che sono ordinati in un modo preciso e funzionale. Se gli elementi di un <ol> venissero spostati di posizione, si perderebbe il significato logico della lista.

Una lista <ul>, invece, è unordered, in quanto gli elementi non hanno una posizione fissa. Alterando la disposizione degli elementi di un <ul>, il significato logico non cambia.

Gli attributi che possono essere applicati solo a <ol> sono:

  • reversed: la numerazione della lista è inversa
  • start: rappresenta l’offset del primo elemento
  • type: tipologia del marker di lista

I sottoelementi di <ol> e <ul> sono in entrambi i casi <li></li>

Esempi:

Nota bene: il tag di chiusura </li> può essere omesso se è immediatamente seguito da un altro <li> o dalla chiusura di lista ( </ul> o </ol> ). Esempio:

Lista <dl></dl>

Le lista <dl> vengono utilizzate quando c’è la necessità di associare alcuni valori X a rispettivi Y. La lista associativa <dl> è composta da uno o più termini descrittivi, i <dt>, e da una o più definizioni incluse nell’elemento <dd>.

Facciamo un esempio:

 La lista <dl>, a differenza delle precedenti, è caratterizzata dall’accoppiata termini-definizioni e per questo gli elementi non possono essere spostati senza perdita di significato.

Al pari di <li></li>, anche la chiusura di <dd> e <dt> può essere omessa, segendo le stesse regole.

Elemento <figure>

L’elemento <figure> rappresenta un unità separata rispetto al contenuto circostante, che spesso contiene anche un “caption” esplicativo.

Nella pratica, <figure> viene utilizzato per includere illustrazioni, foto e diagrammi correlati al testo, ma può anche contenere delle semplici stringhe.

Per includere il caption al di sotto di un <figure> si usa l’elemento figlio <figcaption>.

Esempio:

Elemento <div>

Insieme al <p>, l’elemento <div> è il contenitore per eccellenza. Se lo scopo di <p> è quello di racchiudere del testo quello di <div> invece è molto meno rigido.

Il <div> può essere usato al solo fine di contenere altri elementi, a prescindere dalla costanza semantica/logica degli elementi.

Il consorzio tiene a precisare che il <div> andrebbe usato come ultima chance: può essere utilizzato solo se non è possibile usare altri elementi HTML5 più idonei.

I possibili attributi dell’elemento <div> sono lang e title.

Elemento <main>

Questo elemento serve per indicare il contenuto principale all’inerno del <body>.

Secondo W3C,  <main> dovrebbe contenere le informazioni che trattano direttamente dell’argomento principale della pagina.

Proprio per questo, non può esserci più di un <main> in una determinata pagina.

<main> non serve per sezionare gli elementi (come <section>, <article> e così via) , ma solo a raggrupparli.

Come avevo precisato nella scorsa lezione, nel caso in cui un documento sia composto da un singolo grande <article>, allora è preferibile sostituire questo elemento con un semplice <main>.

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