23 de junho de 2007

Diferenças entre Title e Alt

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.

Ex.:
<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.

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"



Duvidas? Deixm um comentário que tentarei soluciona-las.


23 comentários:

Rodrigo disse...

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.

Guido disse...

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

felipe disse...

o title só funciona no IE!!
no ie o alt faz a função dos dois juntos!

mas title vale para inserir palavras chave!

Guido disse...

@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!

Karzin disse...

Então não há sentido em usar o atributo alt nos links, certo ?

Guido disse...

Isso mesmo Karzin, em links se deve usar o atributo title.

Obrigado pela visita!

frankzeffi disse...

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

Guido disse...

Frankzeffi respondi pelo e-mail!

Obrigado pela visita =)

Nayara disse...

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

Guido disse...

Fico feliz em ter ajudado :)

Anônimo disse...

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

Rodrigo disse...

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?

Guido disse...

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

Sequelanet disse...

Valeu mesmo!
Queria saber da diferença! Obrigado
Abraços

jorginho disse...

Olá, gostaria de saber se tem como ver alguns erros em seo no meu site, ou mesmo title e alt (www.temakifilmes.com)

Vincent Law disse...

Olá, Guido.

Gostaria de saber como mudar o Alt (quando aponta o mouse em cima, e aparece uma descrição) para outra cor... falo do fundo amarelo.

Ficarei no aguardo.
Pode responder no meu email se desejar.

Abraços.

Augusto Pascoal disse...

Muito bom este post, pois explica muito bem as diferenças dos dois atributos. Eu criei este post: http://comosite.blog.com/2011/04/seo-e-as-palavras-chave/ sobre estes dois atributos e da sua importância na aplicação das palavras chave, é uma forma de otimizar sites muito eficaz.

Vanessa disse...

Adorei sua explicação, parabéns!
Estava confusa, agora já entendi tudinho, rs...
Obrigada
:)

Cris disse...

Oi, Guido, já coloquei seu blog nos meus favoritos, adorei a explicação, estou começando a aprender códigos html e vc sanou minhas dúvidas sobre alt e title. A propósito, procurei no google por alt html e te encontrei no primeiro lugar.

Rodrigo MS disse...

Show de bola. Explicação clara e objetiva. Vejo que temos que usar todos os recursos do html.

Filipe Writter disse...

Mas o Matt do google diz que não devemos repetir o atributo title mais que uma vez só num página.

Então se usarmos o atributo Title no titulo h1 da pagina, e se a pagina tiver 4 ou 5 links serão mais 4 ou 5x , e se tiver varias imagens, acabamos repetindo o atributo Title varias vezs numa pagina. Pode ?

elimorais disse...

Cara, MUITO bom seu material.
Explicado de uma maneira Simples e Rápida.
Comecei a usar no meu site e já percebo os resultados
http://www.guiaparaibano.com.br

Cara, MUITO BOM!!!

Jander Menin disse...

muito bom, ajudou a resolver minha dúvida!