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:

<p>prima frase</p>
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
<p>seconda frase</p>

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

<div>prima frase
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
seconda frase</div>

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>
You're only given one little spark of madness. You mustn't lose it.
 — <cite><a href="https://it.wikipedia.org/wiki/Robin_Williams">Robin Williams</a></cite>
 </blockquote>

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

<p>Citazione di <cite>Robin Williams</cite>:</p>
  <blockquote cite="https://it.wikipedia.org/wiki/Robin_Williams">
  <p>You're only given one little spark of madness. You mustn't lose it.</p>
  </blockquote>

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:

<p>Classifica:</p>
<ol>
<li>Mario</li>
<li>Luca</li>
<li>Francesco</li>
</ol>

<p>Gare disputate:</p>
<ul>
<li>Staffetta</li>
<li>Salto in alto</li>
<li>Salto in lungo</li>
</ul>

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:

<ul>
<li>Mario
<li>Luca
<li>Francesco
</ul>

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:

<dl>
<dt>Data di nascita</dt>
<dd>09/07/1991</dd>
<dt>Gruppi musicali preferiti</dt>
<dd>Pink Floyd</dd>
<dd>AC/DC</dd>
<dd>Queen</dd>
</dl>

 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:

<p>Nella figura 34 è possibile osservare graficamente l'algoritmo AES.</p>
<figure>
<img src="diagramma-aes.jpg" alt="Grafico di funzionamento dell'algoritmo AES">
<figcaption>Diagramma dell'AES</figcaption>
</figure>

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