Il tag img in HTML

Il tag img viene usato nei file HTML per incorporare un’immagine o una foto indicando al browser dove si trova, una descrizione nel caso non venga visualizzata, e le dimensioni dell’immagine.

L’elemento img viene inserito nel codice HTML nel seguente modo:

<img src="/immagini/foto.jpg" alt="esempio di foto" width="800" height="600">

Tramite l’attributo src, stiamo dicendo al browser qual è il file della foto da visualizzare e con l’attributo alt, scriviamo un testo alternativo da mostrare nel caso il browser non riesca a visualizzare l’immagine. Le dimensioni vanno sempre inserite in modo che il browser sappia come visualizzare la foto.

Possiamo anche inserire il link che rimanda l’utente alla pagina della foto o ad un’altra sezione del sito. Un modo è quello di inserire il tag img all’interno di un tag a che serve ad inserire i link in una pagina web.

<a href="https://www.infodit.it/immagini/foto.jpg"
 <img src="/immagini/foto.jpg" alt="esempio di foto" width="800" height="600">
</a>

Un altro modo per inserire le immagini, che è anche quello utilizzato da WordPress, piattaforma per creare siti web, è di utilizzare il tag figure che crea un riquadro dove è contenuta l’immagine. Questo ci permette anche di inserire una descrizione sotto la foto.

<figure>
 <a href="https://www.infodit.it/immagini/foto.jpg"
  <img src="/immagini/foto.jpg" alt="esempio di foto" width="800" height="600">
 </a>
</figure>