2.25
L'elemento ![]()
nelle pagine web è fondamentale per l'inclusione di immagini. Esso supporta vari attributi e formati.
Le immagini in una pagina HTML svolgono un ruolo essenziale, poiché possono rappresentare diagrammi, grafici, fotografie, icone o elementi di layout. Per includere un’immagine in una pagina HTML, si utilizza principalmente l’elemento <img>. Ecco una panoramica sull’utilizzo di questo elemento:
HTML Tag <img>: L’elemento <img> è il principale strumento per inserire un’immagine in una pagina HTML. Ecco la sintassi minima per utilizzarlo:
<img src="https://miosito.it/miaImmagine.png" alt="Mia Immagine">
Di seguito, una spiegazione delle principali parole chiave e attributi utilizzati con l’elemento <img>:
img: È il nome dell’elemento tag, un’abbreviazione di “image” (immagine).
src: Sta per “source” (origine) ed è l’URL del file immagine che si desidera visualizzare.
alt: Questo attributo rappresenta il testo alternativo dell’immagine, che viene visualizzato se, per qualsiasi motivo, il browser non è in grado di mostrare l’immagine. L’attributo “alt” è importante per l’accessibilità e per migliorare l’indicizzazione da parte dei motori di ricerca. In alcuni casi, come le immagini decorative, l’attributo “alt” può essere omesso, ma è consigliabile utilizzarlo.
Il tag <img> permette di inserire immagini all’interno di una pagina, in modo da essere visualizzate come parte del testo. Quando viene utilizzato, il browser solitamente mostra l’immagine a piena risoluzione, integrandola nel testo.
Ad esempio, il seguente codice HTML inserisce il logo di HTML.it all’interno di un paragrafo:
<p>Ciao, questo <img src="logo_htmlit.png" alt="Logo di HTML.it"> è il logo di HTML.it</p>
In questo modo, puoi includere facilmente immagini nelle tue pagine web utilizzando il tag <img>.
Per separare l’immagine dal testo possiamo distinguere le righe iscrivendo il nostro testo in paragrafi diversi, come vediamo nell’esempio seguente.
L’Attributo alt
L’attributo alt in un elemento <img> è cruciale poiché specifica un testo alternativo (alternative text). Questo testo è visualizzato in determinate situazioni, ed è particolarmente importante per l’accessibilità e per aiutare gli utenti quando l’immagine non è disponibile o non può essere visualizzata. Ecco un’analisi dettagliata dell’attributo alt:
Quando viene visualizzato il testo alternativo (alt): L’attributo alt viene visualizzato in diverse situazioni:
Quando l’immagine non può essere caricata: Se per qualche motivo l’immagine non può essere caricata, il testo alternativo fornirà una descrizione dell’immagine mancante.
Durante il caricamento dell’immagine: In alcuni casi, mentre l’immagine si sta ancora caricando, il testo alternativo può essere temporaneamente visualizzato.
Nei browser testuali: Nei browser testuali come Lynx, che non mostrano le immagini, il testo alternativo rappresenta l’unico modo per gli utenti di accedere al contenuto visivo dell’immagine.
Nei dispositivi per ipovedenti (screen reader): Gli screen reader sono software utilizzati da persone ipovedenti o non vedenti per leggere il contenuto del web ad alta voce. In questo caso, il testo alternativo consente loro di comprendere il significato dell’immagine.
Importanza dell’attributo alt per l’accessibilità: L’attributo alt è fondamentale per garantire l’accessibilità del sito web a tutti gli utenti, indipendentemente dalle loro condizioni fisiologiche o dalla qualità della connessione internet. Ad esempio, gli utenti non vedenti o con difficoltà visive possono accedere al contenuto dell’immagine grazie ai programmi di sintesi vocale dei loro screen reader.
Cosa dovrebbe contenere l’attributo alt: L’attributo alt dovrebbe contenere un testo che offra una descrizione utile e significativa dell’immagine. Tuttavia, è importante notare che l’alt non dovrebbe contenere semplicemente il titolo o la legenda dell’immagine. Dovrebbe piuttosto fornire una descrizione che renda il contenuto comprensibile anche in assenza dell’immagine.
Inoltre, non è necessario utilizzare l’attributo alt se nel testo circostante all’immagine è già presente una descrizione appropriata. L’obiettivo è garantire che il testo alternativo sia utile, chiaro e complementare al contenuto visivo.
Benefici dell’attributo alt per l’ottimizzazione dei motori di ricerca (SEO): Il testo contenuto nell’attributo alt può contribuire anche all’ottimizzazione dei motori di ricerca (SEO). I motori di ricerca preferiscono testi da analizzare piuttosto che immagini, quindi un attributo alt ben definito può contribuire al miglior posizionamento nei risultati di ricerca.
In breve, l’attributo alt è fondamentale per l’accessibilità, per garantire una migliore esperienza dell’utente e per migliorare la visibilità del tuo sito web nei motori di ricerca.
Title and Friends
L’attributo title in un elemento <img> viene utilizzato per fornire un testo esplicativo che appare quando l’utente posiziona il mouse sopra l’immagine (mouseover). Questo testo viene visualizzato come un tooltip e offre ulteriori informazioni sull’immagine stessa. Ecco come funziona:
<img src="logo.gif" title="HTML.it" alt="Logo di HTML.it" /> Nell’esempio sopra, quando un utente tiene il mouse sopra l’immagine “Logo di HTML.it”, verrà visualizzato un tooltip con il testo “HTML.it”, fornendo ulteriori dettagli sull’immagine.
L’attributo title è particolarmente utile quando si desidera aggiungere informazioni aggiuntive alle immagini o quando si vuole chiarire il significato dell’immagine. Tuttavia, è importante notare che non tutti i browser e dispositivi mostrano i tooltip del titolo, quindi dovresti utilizzarlo con discrezione e non basare informazioni critiche su di esso.
Per quanto riguarda l’attributo longdesc, questo può essere utilizzato per collegare un’immagine a una descrizione più dettagliata, spesso fornendo un link a una pagina o a una porzione di pagina contenente ulteriori informazioni sull’immagine. Ad esempio:
<img src="logo.png" alt="HTML.it" longdesc="http://miosito.it/descrizione.html" />
In questo caso, l’attributo longdesc fa riferimento a una pagina web (in questo caso, http://miosito.it/descrizione.html) che contiene una descrizione dettagliata dell’immagine “HTML.it”.
Infine, puoi anche inserire un’immagine direttamente in un link per rendere più chiaro il significato del link stesso. Questo è un modo comune per rendere gli elementi di navigazione più visibili e intuitivi:
<a href="https://www.html.it"> <img src="logo.png" alt="HTML.it"> </a>In questo esempio, l’immagine “HTML.it” è un link diretto al sito web HTML.it, il che aiuta gli utenti a comprendere che fare clic sull’immagine li porterà al sito.