Page 47 - Guida tascabile HTML5
P. 47
Contenuti aggiuntivi e finestre modali
Rispetto agli albori del Web, le interfacce dei siti web sono diventate più
complesse ed evolute, grazie anche all’avanzamento tecnologico e alla maggiore
familiarità degli utenti con il nuovo medium. Ciò ha portato allo sviluppo di
paradigmi di navigazione diffusi, molto utilizzati e accettati (se non addirittura dati
per scontati) dagli utenti della Rete. Per venire incontro alle esigenze degli
sviluppatori la specifica HTML5 ha introdotto tag dedicati a elementi
dell’interfaccia particolari e ben conosciuti, con l’intento di semplificare la
struttura dei documenti HTML e la programmazione dei comportamenti interattivi
JavaScript.
Come specificato nei prossimi paragrafi, al momento attuale l’interpretazione di
tali elementi da parte dei browser è ancora parziale, ed è eventualmente necessario
ricorrere ad alcuni espedienti per utilizzarli, in attesa del supporto nativo.
Dettagli per approfondire: <details>
A volte può essere necessario inserire nel documento informazioni aggiuntive,
utili come approfondimento, ma che rischierebbero di rendere troppo lunga o
pesante la fruizione del contenuto. In questi casi torna molto utile il tag <details>,
novità della specifica HTML5, il cui contenuto viene di default lasciato nascosto.
<details>
<p>Questo contenuto sarà visualizzato solo dopo aver
fatto clic su "Dettagli"</p>
</details>
Nel tag è possibile specificare l’attributo open come nell’esempio qui di seguito,
affinché all’apertura della pagina il blocco sia visualizzato, con la possibilità di
nasconderlo facendo clic sul sommario. Inoltre è possibile modificare l’etichetta
di default “Dettagli” aggiungendo un tag <summary> all’interno del blocco.
<details>
<summary>Senza attributo open</summary>
<p>Questo contenuto sarà visualizzato solo dopo aver
fatto clic sul sommario</p>
</details>
<details open>
<summary>Con attributo open</summary>
<p>L'attributo open fa in modo che il blocco sia
inizialmente visualizzato</p>
</details>
