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">
Ir para a pagina inicial
</a>Ir para a pagina inicial
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.
<a href="http://www.w3css.blogspot.com" title="Tutorias Webdesign">tutoriais para webdesigners</a>
tutoriais para webdesigners
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.
<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"
Duvidas? Deixm um comentário que tentarei soluciona-las.
16 comentários:
Oi, achei teu blog pelo google tá bem interessante gostei desse post. Quando der dá uma passada pelo meu blog, é sobre camisetas personalizadas, mostra passo a passo como criar uma camiseta personalizada bem maneira. Até mais.
Oi Rodrigo tudo bem?
Tambem ta bom o seu blog,ta fazendo uma boa divulgacao do camisa online hein? Fico legal as camisetas.
Soh por uma questao de estatistica: chegou aqui com qual palavra chave?
[]s
o title só funciona no IE!!
no ie o alt faz a função dos dois juntos!
mas title vale para inserir palavras chave!
@Felipe
Dei uma pesquisada no google sobre o que voce disse,realmente o ie interpreta o alt como se fosse um title.Mas mesmo no ie, o title substitui o alt.ex:
< img src="corcovado.jpg" alt="Alt" title="Title" / >
Nesse caso ira aparecer title quando voce repousar o mouse sobre a imagem.
Obrigado pelo comentario e volte sempre!
Então não há sentido em usar o atributo alt nos links, certo ?
Isso mesmo Karzin, em links se deve usar o atributo title.
Obrigado pela visita!
bom dia,
estou entrando nessa de códigos, de sites e estas coisas, encontrei voce nesse assunto sobre "title" e "alt", voce esplicou muito bem mesmo; não sei se há possibilidades, mas se houver, passe em meu site (www.100dicas.blogspot.com) e veja seus erros, eu acho que os urls das páginas estão erradas, gostaria de sua opinião e ajuda, como disse, se possível.
obrigado
Frankzeffi respondi pelo e-mail!
Obrigado pela visita =)
Nossa! Eu tinha uma grande dúvida sobre quando usar ALT, e TITLE. Fiquei feliz por ter achado essa postagem, me tirou uma grande dúvida! Tenho um blog de imagens por isso queria saber isso! O endereço é:
http://www.nayara-style.blogspot.com
Fico feliz em ter ajudado :)
vlw tava atras ja varias noites atras desse código e só achei aqui, so tava faltando otimizar as imagens com a TITLE e ALT para o site ficr exelente no scan do SEO ae usei o codigo dos dois e deu certo!!! agora o site ta 100% otimizado vlw ae
Achei muito legal o artigo. Aprendi muito, mas fiquei com uma dúvida. Teste o código em 7 browsers diferentes, e não consegui fazer o alt funcionar nem no safari e nem no google chrome. Alguém poderia me ajudar?
Olá Rodrigo, tudo bem?
Talvez você tenha feito algo errado. Tente colocar o endereço da imagem errado de propósito. Lembre-se que o alt só aparece quando a imagem não pode ser carregada.
Qualquer coisa volta aqui e comenta.
=D
Valeu mesmo!
Queria saber da diferença! Obrigado
Abraços
Olá, gostaria de saber se tem como ver alguns erros em seo no meu site, ou mesmo title e alt (www.temakifilmes.com)
Tirei uma duvida que estava tendo com este post.
Obrigado
o meu site é www.soumaisconquista.com
o site é produzido mais em flash, mas preciso compreender mais o html,xhml,css etc.
Postar um comentário