HTML: Differenza tra ALT e TITLE nelle immagini

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MMgY9CPBY6TRppjaVT4JYoOnJdvQrsmDI7-c5EkjWOcrKmGK1p86WapK5z6vxyNujyO1Q7Fe97DYqZbVDQMHb-L9c6Bd0qkYjp3eUqZpl92TqjCi66davP7cCQYR_ffiJHimMBcUpwaH/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MMgY9CPBY6TRppjaVT4JYoOnJdvQrsmDI7-c5EkjWOcrKmGK1p86WapK5z6vxyNujyO1Q7Fe97DYqZbVDQMHb-L9c6Bd0qkYjp3eUqZpl92TqjCi66davP7cCQYR_ffiJHimMBcUpwaH/s72-c/american-history-x.jpg" title="Copertina del film" />

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1MMgY9CPBY6TRppjaVT4JYoOnJdvQrsmDI7-c5EkjWOcrKmGK1p86WapK5z6vxyNujyO1Q7Fe97DYqZbVDQMHb-L9c6Bd0qkYjp3eUqZpl92TqjCi66davP7cCQYR_ffiJHimMBcUpwaH/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