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:

1

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

    Master per Web Designer Freelance
    In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
    Scopri One Year Together »
Tag: , , ,

L'autore

Da sempre appassionato di nuove tecnologie, guadagno il pane quotidiano scrivendo fiumi di funzioni, tonnellate di script, sciami di variabili: insomma un infinità di codice! Amante dei viaggi e del viaggio, scompongo le mie esperienze lontano da casa in complesse logiche procedurali e in stupendi design. Ancora in cerca del tag giusto per descrivere la mia vita.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

  • html5_social
    HTML5 si può usare per i siti accessibili?

    Premessa: questo articolo è rivolto unicamente a chi avrà a che fare con la Pubblica Amministrazione nei prossimi mesi, speriamo non anni, in cui...

  • 21_07
    CSS3: COME ANIMARE LE TUE IMMAGINI

    Il tutorial di oggi è davvero semplice e nello stesso tempo molto efficace: vedremo insieme come creare una semplice animazione che permetta di...

  • 26_06_social-2
    Guida HTML5 : i player video

    Benvenuto a un nuovo appuntamento con la guida HTML5! Nelle precedenti lezioni abbiamo esaustivamente parlato dei tag <audio> e <video>;...

15 commenti

  1. Claudio
  2. marco
  3. alessio

Trackback e pingback

  1. Guida HTML5 – immagini & outlines | Y...
    […] Nel corso di questo articolo dedicato all’HTML5 scopriremo come utilizzare tag fondamentali per la gestione delle immagini e la …
  2. Guida HTML5: il canvas – parte 1 | Your Inspiration Web
    […] 2) HTML5: Il canvas – Parte 1 3) Guida HTML5: la prima pagina 4) Guida HTML5: la struttura 5) …
  3. Guida HTML5: nuovi elementi semantici | Your Inspiration Web
    […] 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e …
  4. Guida HTML5: la prima pagina | Your Inspiration Web
    […] 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e …
  5. Guida HTML5: i form – parte 1 | Your Inspiration Web
    […] 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e …
  6. Guida HTML5: la struttura | Your Inspiration Web
    […] 1) Guida HTML5:Introduzione 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e …
  7. Guida HTML5 : i player video | Your Inspiration Web
    […] 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 …
  8. Guida HTML5: il canvas – parte 2 | Your Inspiration Web
    […] 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 …

Lascia un Commento

Current day month ye@r *