Page 52 - Guida tascabile HTML5

Il tag HTML specifico è <img>, abbreviazione di image, che non prevede tag di

chiusura, ma richiede due attributi.

src (abbreviazione di source URL), utilizzato per fare riferimento
all’indirizzo dell’immagine da visualizzare. L’immagine infatti non viene

inclusa nel documento, ma recuperata al momento della visualizzazione.

alt (abbreviazione di alternate text), indispensabile per garantire
l’accessibilità del documento. Questo attributo fornisce una descrizione

alternativa da utilizzare quando l’immagine non può essere visualizzata (per

esempio quando la pagina viene scansionata da uno screen reader).

Ecco un esempio di sintassi che illustra l’utilizzo del tag:

<img src="logo.png" alt="Apogeo Editore">

ATTENZIONE Nel caso in cui all’URL specificato non fosse presente la risorsa

necessaria, anche i browser tradizionali potranno visualizzare il testo alternativo.

ATTENZIONE Nel Capitolo 5, al paragrafo dedicato al tag <a> trovate un
approfondimento sulla differenza tra URL assoluti e relativi, indispensabile in questo

caso per garantire il corretto riferimento alle risorse sul server.
È consigliabile specificare gli attributi width e height per definire a priori lo

spazio in pixel da riservare all’immagine: in questo modo il browser potrà

calcolare lo spazio necessario mentre la risorsa viene caricata. In caso contrario il
browser dedurrà tali dimensioni dopo il caricamento della pagina elaborando

l’immagine stessa, e la composizione del layout varierà di conseguenza.

<img src="logo.png" alt="Apogeo Editore" width="300" height="60">

NOTA Visitando una pagina, vi rendete conto di questo dettaglio quando i contenuti

testuali sembrano essere “sospinti” verso il basso man mano che le immagini
popolano il documento.

Figura 4.1 Se l’URL indicato nell’attributo src non corrisponde a un’immagine, le
dimensioni width e height specificate saranno comunque riservate nel layout, e