Come aggiungere o nascondere informazioni a un post con HTML5.

Come creare uno spoiler con HTML5 e il tag summary per nascondere la trama di un film o di un libro che sarà letta solo da chi lo vorrà.

Nel mese di Novembre il W3C cioè il consorzio che sovrintende allo standard dei linguaggi del web ha rilasciato una serie di raccomandazioni a beneficio degli webmaster. Come certo saprete il vecchio HTML è stato aggiornato alla versione HTML5 con moltissime novità con l'introduzione di nuovi tag.

Ricordo che con l'HTML5 è stato già implementato da siti importanti con Youtube che ha abbandonato il vecchio Flash. Con l'HTML5 si possono creare dei menù animati senza javascript ma le funzionalità più interessanti riguardano i tag <audio> e <video> con la possibilità di installare per esempio un player audio con playlist o  come aggiungere un file audio o video in un post di Blogger.

L'HTML5 ha anche delle funzionalità utili per rendere le immagini responsive.  In questo post vedremo come usare dei tag HTML5 per creare uno spoiler o meglio ancora per aggiungere delle informazioni a un contenuto che solo opzionalmente possono essere lette dai lettori.

Vengono utilizzati i tag <section>, <details>, <summary>, <dl>, <dt> e <dd>. In questo modo potremo inserire una freccetta per dare modo ai lettori di leggere o meno quello che viene nascosto.

Ecco un esempio di codice utilizzato per creare lo spoiler dello screenshot precedente:

<section>
  <h2>Messaggio per i lettori</h2>
  <details>
  <summary>Come contattare l'autore del blog.</summary>
  <dl>
    <dt>Commenti in calce al sito:</dt><dd>Si tratta del metodo auspicabile. La risposta verrà data al più presto quando l'autore aprirà il PC.</dd>
    <dt>Commenti sulla pagina Facebook:</dt><dd>Da usare in alternativa ai commenti dei sito quando ci si aspetti una possibile conversazione.</dd>
    <dt>Messaggi sulla pagina Facebook:</dt><dd>Da usare solo quando ci siano reali problemi di privacy. La risposta non potrà essere molto veloce.</dd>
    <dt>Messaggi nel modulo di contatto:</dt><dd>Da usare solo quando ci siano reali problemi di privacy. Prima di inviare un messaggio leggere le <a href='https://goo.gl/KbKnJW' target='_blank'>linee guida</a> .</dd>
  </dl>
  </details>
</section>

Evidentemente si tratta solo di mantenere la stessa sintassi per poi adattare il contenuto alle nostre esigenze. Potrebbe essere un modalità interessante per i siti che si occupano di cinema, televisione o letteratura per non mostrare la trama a chiunque apra la pagina ma solo a chi voglia leggerla.

Messaggio per i lettori

Come contattare l'autore del blog.

Commenti in calce al sito:

Si tratta del metodo auspicabile. La risposta verrà data al più presto quando l'autore aprirà il PC.

Commenti sulla pagina Facebook:

Da usare in alternativa ai commenti dei sito quando ci si aspetti una possibile conversazione.

Messaggi sulla pagina Facebook:

Da usare solo quando ci siano reali problemi di privacy. La risposta non potrà essere molto veloce.

Messaggi nel modulo di contatto:

Da usare solo quando ci siano reali problemi di privacy. Prima di inviare un messaggio leggere le linee guida .

Quando si clicca sulla freccetta nera verranno visualizzati altri contenuti. Possono essere inseriti anche tag di formattazione come link, grassetto, corsivo o colori e anche immagini.