HTML: alt ou title? Qual, Quando e Como Utilizar?

Porque e quando se deve utilizar os atributos (tags) alt e/ou title?

Bem, a principal razão é porque é uma boa prática de SEO.

Claro que existem alturas em que esses atributos podem atrapalhar e podemos precisar evitar incluí-los, tal como quando utilizamos algum código javascript num elemento... mas aí também depende.

Normalmente é sempre uma boa ideia utilizar e a vantagem mais visível tem a ver com uma melhor identificação de uma imagem ou ligação (link).

Explicando a coisa um pouco mais detalhadamente:

• alt utiliza-se em imagens e serve para identificar uma imagem nos motores de busca ou, mais importante ainda na minha opinião, mostrar do que se trata a imagem quando por alguma razão a dita imagem não carrega/aparece.
  
• title tanto pode ser utilizado em imagens como em ligações ou até num elemento de página tal com uma div ou span, e serve para que o nome (ou qualquer outra coisa que quisermos colocar) apareça ao colocar o rato em cima. Podem verificar este atributo utilizado numa ligação colocando o rato em cima da palavra SEO no inicio deste artigo.
  

Para uma melhor compreensão, abaixo deixo alguns exemplos:

Qualquer Conteúdo...

<div title="DIV com atributo title" >
Qualquer Conteúdo...
</div>

Div com atributo title. Coloca o rato em cima para ver o efeito.
O código HTML do exemplo é apresentado ao lado.
No caso de uma span, o processo é o mesmo substituindo a palavra div por span

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1D8iayx5w0A_fo-9RByGW5kHRd9jauyzRpNOz9_irXWFhTdZWYXDoE8YXxD9H2fTIXnDzQ8mXsp7hlCOYpCkoeXaLp4YYFqGyJhI_EubaioA3rozwbF674A_Yso3SB2uARhAAkyq6svQ/s90-c/forWOLF_BG.jpg"/>

Imagem sem atributo title ou alt.
Coloca o rato em cima e repara como não se nota nada.
O código HTML do exemplo é apresentado ao lado.

<img src="https://lh5.googleusercontent.com/s90-c/forWOLF_BG.jpg"/>

Imagem sem atributo title, sem atributo alt e com URL errada.
Coloca o rato em cima e repara como não se nota nada e a imagem não é apresentada.
O código HTML do exemplo é apresentado ao lado.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1D8iayx5w0A_fo-9RByGW5kHRd9jauyzRpNOz9_irXWFhTdZWYXDoE8YXxD9H2fTIXnDzQ8mXsp7hlCOYpCkoeXaLp4YYFqGyJhI_EubaioA3rozwbF674A_Yso3SB2uARhAAkyq6svQ/s90-c/forWOLF_BG.jpg" title="Dr. Who for Wolf"/>

Imagem com atributo title, sem atributo alt.
Coloca o rato em cima e repara como já aparece o que se coloca no atributo title.
O código HTML do exemplo é apresentado ao lado.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1D8iayx5w0A_fo-9RByGW5kHRd9jauyzRpNOz9_irXWFhTdZWYXDoE8YXxD9H2fTIXnDzQ8mXsp7hlCOYpCkoeXaLp4YYFqGyJhI_EubaioA3rozwbF674A_Yso3SB2uARhAAkyq6svQ/s90-c/forWOLF_BG.jpg" alt="Dr. Who"/>

Imagem com atributo alt, sem atributo title.
Coloca o rato em cima e à primeira vista nota-se somente a falta do atributo title.
O código HTML do exemplo é apresentado ao lado..

<img src="https://lh5.googleusercontent.com/s90-c/forWOLF_BG.jpg" alt="Dr. Who" title="Dr. Who for Wolf"/>

Imagem com atributo title, com atributo alt e com URL errada.
A imagem não é apresentada mas o conteudo do atributo alt é apresentado.
Coloca o rato em cima e aparece o que se coloca no atributo title.
O código HTML do exemplo é apresentado ao lado.

Para terminar, e em relação aos artigos do Blogger a opção de incluir os atributos alt e/ou title nas imagens já é apresentada de uma maneira facilitada para o autor.

Já para colocar o atributo title numa ligação, temos que editar o HTML do artigo.

Até Breve. :-F

Queres ler outro artigo ao calhas?