Corsi on-line

Utilizzare gli elementi summary e details di HTML5

L’elemento summary di HTML5 viene utilizzato per rappresentare rapidamente un sommario, una didascalia una legenda per i dati proposti in dettaglio o, in generale per, la parte restante dei contenuti introdotti attraverso un altro elemento del markup, details, quest’ultimo, a sua volta, può essere impiegato per delimitare un widget di tipo accordion attraverso il quale reperire informazioni o controlli addizionali.

HTML5

Sostanzialmente details costituisce una sorta di wrapper per il contenuto completo che si desidera rendere visibile o nascondere tramite l’accordion; summary potrà invece introdurre un titolo per i contenuti stessi, motivo per il quale esso è opzionale e, in un browser che supporta details come per esempio Google Chrome, potrà essere sostituito quando assente da un testo predefinito:

Un esempio dell’uso combinato degli elementi summary e details potrebbe essere il seguente:

<details open>
<summary>Mostra/Nascondi</summary>
<p>Ut vel nibh vel ante tincidunt ultrices. Nam cursus odio at leo tincidunt mollis a vel lorem. Fusce in tincidunt risus. Donec quis augue semper, rutrum enim nec, euismod orci..</p>
</details>

Da notare l’utilizzo dell’attributo open, esso determinerà l’apertura dell’accordion al momento del primo caricamento della pagina, per ottenere l’effetto opposto sarà invece necessario utilizzare l’attributo closed. Va però osservato anche che summary supporta anche gli elementi inline come per esempio span, strong o label, la loro introduzione produrrà però un fenomeno inatteso; a tal proposito si analizzi il seguente snippet.

<details>
<summary><label for="name">Nazione:</label></summary>
<input type="text" id="nazione" name="nazione" />
</details>

In quest’ultimo caso, un click su summary non porterà a rendere disponibili i contenuti delimitati da details, questo perché in realtà il click verrà effettuato su label il cui focus è diretto su input.

Post correlati
I più letti del mese
Tematiche