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://lh5.googleusercontent.com/-T7N-5VKfEz4/UpEgKCwPeBI/AAAAAAAAASo/_3MP7JYYvZU/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://lh5.googleusercontent.com/-T7N-5VKfEz4/UpEgKCwPeBI/AAAAAAAAASo/_3MP7JYYvZU/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.


Dr. Who
<img src="https://lh5.googleusercontent.com/-T7N-5VKfEz4/UpEgKCwPeBI/AAAAAAAAASo/_3MP7JYYvZU/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..


Dr. Who
<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
Este Artigo foi útil?
Então se quiser, pode pagar-me um café. ;)

Escolhe com Sabedoria:

Deixa o teu comentário no Formulário Incorporado (NOTA: As respostas directas aos comentários só são possíveis utilizando este Formulário.) , ou no Antigo Formulário em uma nova janela, ou então no Formulário em Pop Up .

LER AS REGRAS ANTES DE COMENTAR! MOSTRAR EMOTICONS
Ler Antes de Comentar ◊  As Regras dos Comentários:
  • O comentário precisa ter relação com o assunto!
  • O comentário que deixares é da tua inteira Responsabilidade!
  • Comentários anónimos São permitidos,MAS:

    • Por favor, evita comentar em MAIÚSCULAS .
    • Por favor, não faças Spam.
    • Por favor, não utilizes termos obscenos ou ofensivos.
    • Comentários considerados Spam ou ofensivos serão apagados.
◊  Para deixares a URL do teu blogue, comenta com OpenID, ou com a opção NOME/URL.
◊  Podes usar algumas tags HTML como:
  • @<strong>Nome</strong> para mencionar a quem se responde o comentário.
  • <em>Fulano disse:<i>Texto Citado</i></em> para colocar uma Citação.
  • Para inserir um link ou um vídeo do YouTube, basta só escrever o endereço URL como texto normal.
  • <i>Texto em Itálico</i>
  • <b>Texto em Negrito</b>
    • HTML EXTRA:
    • [im]URL DA IMAGEM[/im] para colocar uma imagem.
    • [ma]Texto rolando[/ma] para colocar texto rolando.
    • [si="2"]Texto com tamanho determinado[/si] Altera o numero para determinar o tamanho da letra.
    • [co="red"]Texto em cor[/co] Altera a cor do texto.
    • [ce]Texto centrado[/ce] centraliza o texto.
    • [ma+]Texto rolando para a direita[/ma+]
    • [box]"encaixotar" o texto[/box]
    • [mark]Texto Marcado[/mark]
    • [card="blue"]Texto com fundo[/card] Altera a cor de fundo do comentário.
    • [im#]URL DA IMAGEM[/im] para colocar uma imagem que ocupe TODA a largura.
    • [hi="yellow"]Texto Destacado[/hi]
  • ATENÇÃO: Comentários com imagens ou vídeos com conteúdo ofensivo ou inadequado serão REMOVIDOS, SEM EXCEPÇÃO!!!
FECHAR
NOTA: os códigos dos emoticons devem ser inseridos separados das restantes palavras ou pontuação. OCULTAR EMOTICONS

0 comentários :

Enviar um comentário