Corsi on-line

Utilizzo corretto dell’elemento figure di HTML5

L’elemento figure di HTML5, così come figcaption che è un componente del markup spesso associato ad esso, sono forse tra i più complessi da gestire, questo perché essi vengono utilizzati non di rado in modo improprio; una lettura più attenta delle specifiche e la proposta di alcuni casi concreti potrebbero aiutarci ad evitare errori ricorrenti, uno di questi è per esempio l’adozione di figure per marcare qualsiasi immagine sia contenuta in una pagina Web.

html5 logoLe specifiche affermano che figure è stato introdotto al fine di descrivere:

some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

Insomma, la discriminante starebbe nel fatto che, indipendentemente dalla presenza o meno di un didascalia, il contenuto associato all’elemento dovrà essere considerata come un’unità inserita nel flusso dei contenuti di un documento. Chiaramente, un’immagine inserita a puro scopo presentazionale, che cioè non fa riferimento a nessun altro contenuto di pagina, non necessita di figure; quest’ultimo in pratica dovrebbe essere utilizzato soltanto nel caso in cui esso concorra alla comprensione del contesto.

Partendo da tale assunto, un logo non dovrebbe essere associato a figure, per cui un codice come il seguente sarebbe da considerarsi un errore:

<header>  
  <figure>
    <img src="/img/logo.png" alt="Nome azienda" />
  </figure>
</header>

L’elemento è nato per specificare il cosiddetto self-contained content, come illustrazioni, diagrammi, immagini fotografiche e screenshot di snippets; i semplice elementi decorativi non rientrerebbero in questa casistica.

Via w3schools

Post correlati
I più letti del mese
Tematiche