Guida HTML5 – immagini & outlines

Nel corso di questo articolo dedicato all’HTML5 scopriremo come utilizzare tag fondamentali per la gestione delle immagini e la formattazione dei titoli.

Inoltre, andremo ad analizzare approfonditamente uno degli aspetti più innovativi introdotti dall’HTML5 e, purtroppo, ancora poco diffuso tra gli addetti ai lavori: il sistema di outlining.

Figure & Figcaption

Come alcuni di voi sapranno, anche l’HTML4 prevedeva un metodo per inserire immagini all’interno di un documento; generalmente, ciò avveniva tramite righe di codice simile a questa:

<img src=”imgs/immagine1.jpg” />

Mettiamo caso, invece, di dover inserire un’immagine riferita a una determinata porzione di testo, magari allineata a sinistra, come accade nella maggior parte dei casi.

Con l’HTML4 avremmo inserito tutto all’interno di un div creato ad hoc e legato a una regola CSS float:left come, per esempio:

<div class=”immagineSinistra”>
    <img src=”imgs/immagine1.jpg” />
</div>

Con l’avvento dell’HTML5, invece, è sorta spontanea la necessità di creare un tag che isoli in maniera più specifica le immagini relative al testo presente in una pagina: il tag <figure>.

Quindi, utilizzando il codice HTML5 avremo:

<figure class=”immagineSinistra”>
     <img src=”imgs/immagine1.jpg”>
</figure>

In questo caso, all’interno del CSS continuiamo a riferirci alla classe immagineSinistra anziché al tag figure. L’elemento figure, infatti, può essere utilizzato per posizionare anche altre immagini nello stesso documento.

Ad esempio potremmo creare una pagina come questa:

utilizzando una porzione di codice come:

<figure class=”immagineSinistra”>
     <img src=”imgs/immagine.jpg”>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper ...</p>
<figure class=”immagineDestra”>
     <img src=”imgs/immagine.jpg”>
</figure>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper ...</p>

Potremmo, inoltre, voler aggiungere una didascalia, una porzione di testo, riferita direttamente all’immagine.

In questo caso ci aiuterà il tag <figcaption>:

<figure class=”immagineSinistra”>
     <img src=”imgs/immagine.jpg”>
     <figcaption>Questa è la didascalia dell’immagine, una descrizione dell’immagine stessa.</figcaption>
</figure>

È chiaro che, in questo caso, l’utilizzo dell’attributo alt del tag img è del tutto superfluo, in quanto risulterebbe inutilmente ridondante con il contenuto dello stesso figcaption.

Nell’esempio, i più attenti di voi avranno sicuramente notato la differenza sintattica riguardante il tag img in HTML4 rispetto al codice dell’HTML5: la mancanza dello slash (/) di chiusura.

Questo è dovuto al fatto che, in HTML5, il tag di chiusura è completamente opzionale, pertanto si può omettere senza conseguenze sul risultato finale.

Hgroup

Nonostante il W3C abbia da poco eliminato dallo standard HTML5 il tag hgroup, ritengo utile trattare ugualmente l’argomento, se non altro per permetterti di comprenderne il significato qualora dovessi trovarlo in documenti altrui.

Per ulteriori informazioni sulla decisione del consorzio, visita questa pagina.

Definiamo un titolo e un relativo sottotitolo nel modo standard:

<h1>questo è il titolo</h1>
<h2>questo è il sottotitolo</h2>

Il tag hgroup potrebbe, in questo caso, raggruppare tali elementi:

<hgroup>
     <h1>questo è il titolo</h1>
     <h2>questo è il sottotitolo</h2>
</hgroup>

È bene specificare che il tag hgroup deve contenere unicamente tag d’intestazione – quali h1, h2, h3 e così via – e nessun altro elemento.

A questo punto ti domanderai, quale sia l’utilità di questo tag.

Ebbene, inizialmente la sua presenza era necessaria perché legata, soprattutto, al meccanismo dell’outlining che stiamo per esplorare.

A breve capirai tutto con chiarezza e potrai scegliere, con coscienza, se utilizzarlo nei tuoi lavori o meno!

Outlines

Partiamo dalle basi: cosa sono le outlines?

Con il termine outline si intende una mappa del documento, generata dagli heading, dalle intestazioni, dagli elementi di sezione, e da tutti gli altri elementi della pagina su cui stiamo lavorando.

Creare una mappatura del genere è molto utile, poiché migliora l’accessibilità del sito lato utente e l’indicizzazione dei motori di ricerca.

Per capire meglio di cosa stiamo parlando, facciamo un esempio pratico.

Un codice come questo:

<h1>Titolo del mio sito</h1>
<h1>Chi sono</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus cursus euismod tortor a malesuada.</p>
<h1>Servizi</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus cursus euismod tortor a malesuada.</p>
<h1>Contatti</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus cursus euismod tortor a malesuada.</p>

Genera un outline di questo tipo:

1. Titolo del mio sito
2. Chi sono
3. Dove abito
4. Contatti

Come potete notare non è questa la struttura ideale alla quale stiamo mirando.

Infatti, il titolo del sito non dovrebbe essere sullo stesso piano degli altri elementi, ma dovrebbe contenerli tutti.

Al contempo, la voce “dove abito” dovrebbe derivare dal punto 2 “chi sono”.

Proviamo a utilizzare gli elementi strutturali di cui abbiamo parlato nello scorso articolo per ovviare a questi errori:

<h1>Titolo del mio sito</h1>
<section>
     <h2>Chi sono</h2>
     <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Vivamus cursus euismod tortor a malesuada.
     </p>
     <section>
          <h3>Dove abito</h3>
          <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               Vivamus cursus euismod tortor a malesuada.
          </p>
     </section>
</section>
<section>
     <h2>Contatti</h2>
     <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Vivamus cursus euismod tortor a malesuada.
     </p>
</section>

Finalmente il risultato finale è quello che desideravamo:

1. Titolo del mio sito

   1. Chi sono

      1. Dove abito

   2. Contatti

   Prima di concludere l’articolo voglio lasciarvi con alcune importanti precisazioni sull’outlining.

   1 – Per far sì che la nidificazione avvenga seguendo l’ordine giusto degli elementi, è di fondamentale importanza assegnare un’intestazione ad ogni sezione, altrimenti l’interprete restituirà un campo denominato “Untitled” + il nome dell’elemento di sezione.

   2 – È bene sapere che attualmente il sistema di outlining non è supportato dalla maggioranza dei browser e tra gli addetti ai lavori si discute animatamente della sua futura sopravvivenza. Parallelamente, in molti ritengono che i motori di ricerca non prendano ancora  in grande considerazione questo meccanismo e non attribuiscano particolare penalizzazione a chi ignora le outlines.

   3 – Ricordi il tag hgroup, di cui abbiamo appena parlato? Bene, prima che venisse deprecato dal W3C, la sua utilità era proprio quella di rappresentare un elemento di sezione e quindi un punto autonomo del nostro elenco.

   4 – Puoi provare tutti i files riguardanti l’outlines presenti nello zip a fine pagina con l’aiuto di alcune estensioni per Chrome e per Opera, oppure tramite pratici strumenti online.

   Conclusione

   Tu cosa pensi della decisione del W3C di deprecare il tag hgroup?

   Pensi che le outlines possano effettivamente avere, in futuro, un reale ruolo per l’indicizzazione e l’accessibilità?

   Come ti comporti attualmente quando sviluppo i tuoi progetti?

   Pensi sia utile strutturare le pagine con il sistema di outlining?

   Scarica lo zip completo della lezione

   GUIDA HTML5: GLI ARTICOLI
   1) Guida HTML5:Introduzione
   2) Guida HTML5: la prima pagina
   3) Guida HTML5: la struttura
   4) Guida HTML5: Immagini e outlines
   5) Guida HTML5: nuovi elementi semantici 
   6) Guida HTML5: i form – Parte 1 
   7) Guida HTML5: i form – Parte 2
   8) Guida HTML5: i form – Parte 3
   9) Guida HTML5: i form – Parte 4
   10) Guida HTML5:i tag audio e video – parte 1
   11) Guida HTML5:i tag audio e video – parte 2
   12) Guida HTML5: I player video
   13) HTML5: Il Canvas – Parte 1
   14) Guida HTML5: Il Canvas – Parte 2
   15) HTML5: Il Canvas – Parte 3
   16) HTML5: Il Canvas – Parte 4
   17) HTML5: Web storage
   18) Web worker