pular para conteúdo pular para busca no site

Gustavo Ribeiro (blog)

A algum tempo atrás falei sobre a importância de se utilizar acrônimos em web sites e hoje vim falar sobre as abreviações <abbr>.

Abreviação já se auto-explica o que é então vou ser rápido e explicar a diferença entre abreviações e acrônimos.

Para muitos, ou até para a maioria, usuários internet tudo é abreviação mas na realidade não é a verdade. Acrônimos são palavras formadas por letras ou sílabas iniciais de uma locução – Ex.: CSS = Cascading Style Sheets – enquanto abreviação é uma forma curta da palavra excrita – Ex.: Av. = Avenida.

No xHTML, a utilização da tag abrr se dá na seguinte forma:

<abbr></abbr>

Para cada <abbr> gerado, é altamente recomendável, no meu ponto de vista obrigatório, o uso da propriedade <title> ao qual, com ela, podemos visualizar o significado daquele abreviação ao passarmos o mouse por cima da palavra.

<abbr title="Avenida">Av.</abbr>

Fazendo isso, estaremos ajudando a quem não tem o conhecimento de certas abreviações e faremos nossos sites mais acessíveis e de acordo com os padrões w3c.

[update: 25.07 às 10:21]
Aproveitando a dica da amiga Cleo Morgause que eu sempre acabo me esquecendo de fazer :) , uma ótima pedida é mudarmos o cursor do mouse, ao passarmos por cima do <abbr>, para o ícone de help (ajuda).

abbr { cursor: help }
Compartilhe este post:
  • E-mail this story to a friend!
  • Google Bookmarks
  • del.icio.us
  • Twitter
  • Technorati
  • Digg
  • Reddit
  • Netvibes
  • LinkedIn
  • Facebook
  • MySpace
  • StumbleUpon
  • Rec6
  • Mixx
  • FriendFeed
  • Identi.ca
  • Tumblr
  • HelloTxt
  • Live
  • Yahoo! Buzz
  • Yahoo! Bookmarks
  • Yigg
  • Faves

Leia também

· · · · ·

3 comentários

  1. Cleo Morgause — julho 25, 2008 @ 10:12

    Nossa.. isso é importante. Comecei a usar nos meus últimos artigos. Só uma dica de css. Na folha de estilo colocar um cursor:help para o abbr.
    Abs. ^^

  2. Gustavo Ribeiro — julho 25, 2008 @ 10:27

    Bem lembrado Cléo!
    Adicionei a sua dica no post. ;)

  3. Nigro — julho 25, 2008 @ 10:58

    Cara, eu estou ensinando o povo aqui a diferença entre o comportamento do cursor… nego tá sofrendo e eu mais ainda! xD

Feed RSS dos comentários deste post URL de TrackBack

Seja o(a) primeiro(a) a comentar.

XHTML: Você pode usar estas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Twitter

    Categorias

    • W3Counter
    • Atualize seu Navegador
    • FeedBurner
    • DiHitt
    • BlogBlogs
    • Click to see how many people are online