Per rendere accattivanti le pagine di un sito web non possiamo limitarci ad inserire al loro interno contenuti esclusivamente testuali.
Siamo, d’altro canto, in un periodo storico dove mai prima d’ora la cultura del visuale ha assunto un’importanza assoluta. Ogni utente verrà attirato principalmente dalla parte ‘estetica’ di un sito web. Occorre, quindi, inserire all’interno delle nostre pagine diverse immagini. Vediamo come.
Come mettere un’ immagine su html
Tag immagine html
Il tag da utilizzare per incorporare un’immagine in una pagina html è il tag <img>.
Si tratta di un tag autoconclusivo : non ha bisogno di un tag di chiusura.
Il tag img vanta due attributi fondamentali: “src” e “alt”.
L’attributo “src” sta per “source” e indica la fonte dell’immagine: può essere un link esterno ad essa oppure il path (percorso) del file all’interno del tuo computer (è consigliabile sempre la seconda opzione, poiché l’URL del sito di riferimento della tua img potrebbe, nel tempo, cambiare, causando problemi di visualizzazione dell’immagine).
L’attributo “alt” (abbreviazione di “alternative text”) è un attributo che ha a che fare principalmente con l’accessibilità della nostra immagine. Esso fornisce, infatti, un’alternativa alla visualizzazione dell’immagine stessa quando, per un motivo o per l’altro, questa risulti impossibile; al suo posto, grazie a questo attributo, visualizzeremo un testo descrittivo dell’immagine.
Senza questo attributo la fruizione dell’immagine sarebbe impossibile non solo a chi, banalmente, ha problemi di connessione, ma anche, e soprattutto, a soggetti come ipo-vedenti e non vedenti che per la fruizione di un sito web si avvalgono di software che, attraverso un sintetizzatore vocale, leggono il contenuto del sito. E come si può leggere un’immagine?
Capisci, ora, quanto è importante l’utilizzo di questo attributo?
Ultimo ma non per importanza, l’attributo “alt” agevola la SEO e aiuta l’indicizzazione del tuo sito web.
L’immagine in html può avere anche un altro attributo: si tratta del “title”, anch’esso importante per la SEO.
L’ attributo “title” fa si che quando si posiziona il cursore sull img (in gergo si parla di “hover” dell’immagine) compaia una finestrella con scritto il titolo, appunto, dell’ immagine.
Quando inserisci un’immagine nel tuo sito, abbi cura di inserirla all’interno di due ulteriori tag: stiamo parlando dei tag <Figure> </figure> and <figcaption></figcaption>.
Il primo viene usato semanticamente per abbracciare contenuti visivi (immagini, illustrazioni, diagrammi ecc) ed è accompagnato dal secondo per aggiungere una didascalia descrittiva alla foto.
Adesso sai tutto: pronto a scatenare la tua creatività aggiungendo immagini alla tua pagina?
