Ir para conteúdo / Skip to content

Uso correto de Alt e Title

Postado em: 29 de junho de 2006 por Pedro Rogério

Muita gente acredtita que usando a tag alt para imagens ela assume o papel de Tooltip. Esse método foi adotado a anos atrás, tudo começou com o Netscape, usando alt para indicar um tooltip, e o Internet Explorer foi lá e seguiu a mesma linha.

A tag alt serve para, por exemplo, se a imagem por algum motivo não for carregada, mostrar uma descrição prévia da imagem, seu uso também é recomendando para browsers que não suportam imagens. Agora o uso de title é para quando o usuário repousar o mouse sobre a imagem, ou o link, aparacer uma descrição definida pelo usuário sobre o mesmo.

A maneira errada de indicar um tooltip:


<img src="http://sua_imagem.gif" alt="Maneira errada" />

Maneira correta de indicar um tooltip:


<img src="http://sua_imagem.gif" alt="Texto alternativo caso a imagem não seja carregada" title="Essa é a maneira correta de indicar um tooltip em uma imagem" />

Se tiver um tempo, leiam também:

Deixe seu comentário

9 comentários para esse post

  1. Edgar Messias Mantovani disse: 10.07.06 ás 17:26
    #1

    Eu estava em dúvida sobre isso, eu fiz o exemplo que vc colocou como correto, mas no dreamweaver ele sublinha a tag title como erro (tipo no word).

    Mas mesmo assim percisti com o código.
    Valew por ter tirado essa dúvida.

  2. Osny Santos Netto disse: 11.07.06 ás 16:02
    #2

    É, pena que o IE 6 mostra um tooltip mesmo com alt=" ".

  3. Dicas e tutoriais SEO: aprenda como otimizar seu blog WordPress - celsojunior.net disse: 09.11.07 ás 11:33
    #3

    [...] que esta tem um pouco mais de importância com relação às outras. Ah, use também os atributos ALT e TITLE corretamente. Você vai sentir a diferença [...]

  4. Dicas e tutoriais SEO: aprenda como otimizar seu blog WordPress disse: 08.12.07 ás 21:09
    #4

    [...] que esta tem um pouco mais de importância com relação às outras. Ah, use também os atributos ALT e TITLE corretamente. Você vai sentir a diferença [...]

  5. UTILIZANDO ATIBUTOS ALT EQUIVALENTE AS IMAGENS » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards disse: 24.12.07 ás 17:09
    #5

    [...] um artigo anterior, eu falei como fazer o uso correto da tag alt em imagens, como vocês podem ver, é [...]

  6. Allan disse: 06.01.08 ás 17:05
    #6

    Bom.

    ajuda tb a elevar o raking do site nos buscadores.

  7. Marcio disse: 28.02.08 ás 15:36
    #7

    Estava na dúvida sobre esse tópico, realmente acho que estava usando errado daqui prá frente dá para concertar. E como diz o Allan ai de cima isso ajuda bem no SEO do site

  8. Mateus disse: 22.10.08 ás 09:27
    #8

    Então significa que em todas imagens devemos usar Alt e title ? isto é o padrão ? - pois oque mais vejo é que em imagens usa somente o Alt.

  9. Pedro Rogério disse: 22.10.08 ás 10:54
    #9

    @Mateus,

    O uso de title em imagens não é obrigatório, mas se você quiser proporcionar o máximo de acessibilidade em seu site e seguir padrões web, seu uso é extremamente aconselhável.

Deixe seu comentário