Corsi on-line

Differenza tra gli elementi img e figure in HTML5

Uno dei motivi per i quali HTML5 è stato sviluppato come nuovo standard per il markup delle pagine Web andrebbe ricercato nell’esigenza di introdurre degli elementi di tipo semantico in questo linguaggio, features come l’implementazione di video sono un esempio abbastanza chiaro di attinenza tra significato del componente e funzione svolta da quest’ultimo; dato che per questioni di retrocompatibilità HTML5 non ha eliminato i costrutti già in uso con la versione precedente, in alcuni casi la coesistenza tra nuovi e vecchi tag potrebbe generare confusione.

html5Si pensi per esempio a due elementi come img e figure, quest’ultimo è divenuto disponibile soltanto con HTML5 e può essere utilizzato a corredo di elementi di tipo self-contained (che cioè rappresentano di per sé un contenuto ) come per esempio le illustrazioni, le fotografie digitali, i diagrammi, le porzioni di codice sorgente, tabelle e così via; a caratterizzare figure è il fatto che il contenuto di tale elemento è relazionato al flusso dei contenuti di pagina ma la sua posizione ne è indipendente e, se rimosso, non ne pregiudica l’integrità.

Nel caso di associazione alle immagini, sintatticamente figure è finalizzata a contenere un blocco di codice nel quale viene utilizzato img; a tal proposito basterà analizzare il seguente markup dove figure delimita non soltanto una componente grafica introdotta con img, ma anche una didascalia definita con figcaption (altra novità di HTML5):

<figure>
  <img src="logo.jpg" alt="Logo aziendale">
  <figcaption>Il nostro nuovo logo</figcaption>
</figure>

Si ipotizzi quindi che tale immagine sia stata inserita in una pagina che annuncia il lancio di un nuovo logo, la sua presenza completerebbe quanto riportato nel testo del comunicato mentre la sua assenza non ne minerebbe la comprensione (o l'”integrità” a cui si è fatto riferimento in precedenza). Con HTML 4.01 si sarebbe potuto ottenere lo stesso risultato nel modo seguente:

<div class="image">
  <img src="logo.jpg" alt="Logo aziendale">
  <p>Il nostro nuovo logo</p>
</div>

Le soluzioni proposte sono entrambe efficaci, si noti però come nel caso di utilizzo di HTML5 ogni componente sia facilmente individuabile grazie alla semantica degli elementi utilizzati; figure infatti è sicuramente più rilevante di div a livello semantico, così come figcaption lo è di più rispetto a p.

Post correlati
I più letti del mese
Tematiche