domenica 13 novembre 2016

HTML: Differenza tra ALT e TITLE nelle immagini

Tags

In html esistono due attributi molto importanti per le immagini (e non solo), sto parlando degli attributi alt e title.
Vista la loro similitudine d'utilizzo nei vari tag html, qualcuno potrebbe anche non conoscerne la differenza, quindi vediamo subito di fare un po' di chiarezza a riguardo.


Differenza tra gli attributi ALT e TITLE nelle immagini in HTML


Per poter spiegare la differenza tra title ed alt nelle immagini e non, vediamo le due definizioni di questi utilissimi attributi di tag html.

ALT:
Alt sta per testo alternativo (alternate text), ovvero quell'attributo del tag <IMG> (e non solo) che in HTML fornisce un'informazione testuale alternativa, quando le immagini non possono essere visualizzate.
Questo può accadere in caso di immagini rotte (cancellate dal server, o link src errati), ma anche nel caso si navighi con browser solo testuali (es. per non vedenti), ed è quindi un attributo molto utile che deve essere usato per descrivere cosa viene mostrato nell'immagine, nel caso questa non possa essere caricata.
Esempio di alt attribute html:
<img alt="American History X" src="https://3.bp.blogspot.com/-29iEKCkOxV4/WCbuJ-ttwMI/AAAAAAAAlDU/6Tfsti918s4Mnh_PGW0tdKJDqhKfutRMACLcB/s72-c/american-history-x.jpg" />

TITLE:
L'attributo title (titolo) nelle immagini viene usato per dare alcune informazioni aggiuntive sull'immagine mostrata, e dovrebbe seguire più o meno le regole usate per il tag title.
L'attributo title in alcuni browser viene anche mostrato come suggerimento tooltip, al passaggio del mouse sulle immagini.
Esempio di title attribute html:
<img src="https://3.bp.blogspot.com/-29iEKCkOxV4/WCbuJ-ttwMI/AAAAAAAAlDU/6Tfsti918s4Mnh_PGW0tdKJDqhKfutRMACLcB/s72-c/american-history-x.jpg" title="Copertina del film" />

HTML: Differenza tra ALT e TITLE nelle immagini

Quindi per scrivere un buon html, nel tag img vanno messi entrambi gli attributi, sia il title che l'alt:
<img alt="American History X" src="https://3.bp.blogspot.com/-29iEKCkOxV4/WCbuJ-ttwMI/AAAAAAAAlDU/6Tfsti918s4Mnh_PGW0tdKJDqhKfutRMACLcB/s72-c/american-history-x.jpg" title="Copertina del film" />

Compilare sia il title che l'alt delle immagini è dunque importante per aumentare l'accessibilità di un sito web, ma non solo, lo è anche per un'altra cosa molto rilevante di questi tempi: google.
Ebbene si, a google e ad altri motori di ricerca, piacciono molto questi attributi nei tag html, e non usarli potrebbe anche penalizzare il nostro sito a livello di indicizzazione.

Se vi è un po' più chiara la differenza tra tag e title in html... buon lavoro :)

PS si lo so, per pigrizia in questo articolo ho compilato il title e l'alt dell'immagine uguali, e questo è male, lo so :p

Piaciuto l'articolo? Lascia un commento!

EmoticonEmoticon