Muitas pessoas tem essa duvida, qual a diferença entre o title e o alt quando usado em imagens? Esse artigo veio para sanar essa duvida.
Title
Este atributo oferece um "texto descritivo" sobre o elemento que ele esta sendo usado.
Ex.:
<a href="http://www.w3css.blogspot.com" title="Home page do blog"></a>
Esse exemplo produzira um link para a pagina inicial deste blog,e quando o usuário repousar o ponteiro do mouse sobre o link,ira aparecer o texto descritivo "Home page do blog".
O atributo title,é usado em conjunto com as TAGs <abbr> e <acronym> para oferecer uma definição para palavras abreviadas.
Ex.:
<abbr title="HyperText Markup Language">HTML</abbr>
O atributo title também é usado em links para melhorar o posicionamento do site nas palavras chaves que estiverem dentro do atributo title.
Ex.:
<a href="http://www.w3css.blogspot.com" title="Tutorias Webdesign">tutoriais para webdesigners</a>
Title nas imagens
Serve para a mesma coisa que o title nos links, oferece uma "legenda",um texto descritivo para a imagem.
Ex.:
<img src="foto.jpg" title="Fotos do Verão" />
Esse exemplo produzira uma imagem,e quando o usuário repousar o ponteiro do mouse sobre ela,ira aparecer o texto descritivo "Fotos do Verão".
ALT
O atributo alt,serve para oferecer um texto,caso uma imagem não apareça ou não possa ser visualizada.Esse atributo aumenta a acessibilidade do site,porque os leitores de tela usam esses textos (os que estão dentro do alt) para "ler" a imagem.
Ex.:
<img src="foto.jpg" alt="Fotos do Verão" />
Se a imagem não aparecer (se estiver com o endereço errado ou as imagens estiverem desabilitadas) ou se o usuário usar um leitor de tela,a mensagem que ele vai ler (ou ouvir) será "Fotos do Verão"
Juntando os dois
Agora veja o mesmo exemplo,soh que usando os dois atributos ao mesmo tempo:
<img src="foto.jpg" alt="Fotos do Verão" title="Fotos do verão passado" />
Agora quem ver a foto e por o ponteiro do mouse sobre ela verá o texto "Fotos do verão passado" e quem não ver a imagem,terá o texto "Fotos do Verão"
Title
Este atributo oferece um "texto descritivo" sobre o elemento que ele esta sendo usado.
 |
| Tags Alt e Title |
<a href="http://www.w3css.blogspot.com" title="Home page do blog"></a>
Esse exemplo produzira um link para a pagina inicial deste blog,e quando o usuário repousar o ponteiro do mouse sobre o link,ira aparecer o texto descritivo "Home page do blog".
O atributo title,é usado em conjunto com as TAGs <abbr> e <acronym> para oferecer uma definição para palavras abreviadas.
Ex.:
<abbr title="HyperText Markup Language">HTML</abbr>
O atributo title também é usado em links para melhorar o posicionamento do site nas palavras chaves que estiverem dentro do atributo title.
Ex.:
<a href="http://www.w3css.blogspot.com" title="Tutorias Webdesign">tutoriais para webdesigners</a>
Title nas imagens
Serve para a mesma coisa que o title nos links, oferece uma "legenda",um texto descritivo para a imagem.
Ex.:
<img src="foto.jpg" title="Fotos do Verão" />
Esse exemplo produzira uma imagem,e quando o usuário repousar o ponteiro do mouse sobre ela,ira aparecer o texto descritivo "Fotos do Verão".
ALT
O atributo alt,serve para oferecer um texto,caso uma imagem não apareça ou não possa ser visualizada.Esse atributo aumenta a acessibilidade do site,porque os leitores de tela usam esses textos (os que estão dentro do alt) para "ler" a imagem.
Ex.:
<img src="foto.jpg" alt="Fotos do Verão" />
Se a imagem não aparecer (se estiver com o endereço errado ou as imagens estiverem desabilitadas) ou se o usuário usar um leitor de tela,a mensagem que ele vai ler (ou ouvir) será "Fotos do Verão"
 |
| Tags Alt e Title |
Agora veja o mesmo exemplo,soh que usando os dois atributos ao mesmo tempo:
<img src="foto.jpg" alt="Fotos do Verão" title="Fotos do verão passado" />
Agora quem ver a foto e por o ponteiro do mouse sobre ela verá o texto "Fotos do verão passado" e quem não ver a imagem,terá o texto "Fotos do Verão"
Comentários