<abbr>: O elemento Abbreviation

Este elemento suporta apenas os atributos globais. O atributo title tem um significado semântico específico quando usado com o elemento <abbr>; ele deve conter uma descrição completa legível para pessoas ou uma expansão da abreviação. Este texto é frequentemente apresentado pelos navegadores como uma dica de ferramenta quando o cursor do mouse é passado sobre o elemento.

Cada elemento <abbr> que você usa é independente de todos os outros; fornecer um title para um não anexa automaticamente o mesmo texto de expansão a outros com o mesmo texto de conteúdo.

Certamente não é necessário que todas as abreviações sejam marcadas usando <abbr>. Existem, no entanto, alguns casos em que é útil fazer isso:

• Quando uma abreviação é usada e você deseja fornecer uma expansão ou definição fora do fluxo do conteúdo do documento, use <abbr> com um title apropriado.
• Para definir uma abreviação que pode ser desconhecida para a pessoa leitora, apresente o termo usando <abbr> e um texto em linha fornecendo a definição. Inclua um atributo title somente quando a expansão ou definição em linha não estiver disponível.
• Quando a presença de uma abreviação no texto precisa ser semanticamente notada, o elemento <abbr> é útil. Isso pode ser usado, por sua vez, para fins de estilo ou script.
• Você pode usar <abbr> em conjunto com <dfn> para estabelecer definições para termos que são abreviações ou acrônimos. Veja o exemplo Definindo uma abreviação abaixo.

Em idiomas com número gramatical (ou seja, idiomas em que o número de itens afeta a gramática de uma sentença), use o mesmo número gramatical no seu atributo title assim como no seu elemento <abbr>. Isso é especialmente importante em idiomas com mais de dois números, como o árabe, mas também é relevante em inglês.

O propósito deste elemento é puramente para a conveniência da pessoa autora e todos os navegadores o exibem em linha (display: inline) por padrão, embora seu estilo padrão varie de um navegador para outro:

Alguns navegadores adicionam um sublinhado pontilhado ao conteúdo do elemento. Outros adicionam um sublinhado pontilhado ao converter o conteúdo para versaletes. Outros podem não estilizá-lo de forma diferente de um elemento <span>. Para controlar esse estilo, use text-decoration e font-variant.

Soletrar a sigla ou abreviação por completo na primeira vez que for usada em uma página é benéfico para ajudar as pessoas a entendê-la, especialmente se o conteúdo for um jargão técnico ou do setor.

Inclua um title somente se não for possível expandir a abreviação ou acrônimo no texto. Ter uma diferença entre a palavra ou frase anunciada e o que é exibido na tela, especialmente se for um jargão técnico com o qual a pessoa leitora pode não estar familiarizada, pode ser chocante.

<p>
  JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight
  data-interchange format.
</p>

Isso é especialmente útil para pessoas que não estão familiarizadas com a terminologia ou os conceitos discutidos no conteúdo, pessoas que são novas no idioma e pessoas com problemas cognitivos.

Para marcar uma abreviação sem fornecer uma expansão ou descrição, use <abbr> sem nenhum atributo, como visto neste exemplo.

HTML

<p>Using <abbr>HTML</abbr> is fun and easy!</p>

Resultado

Você pode usar CSS para definir um estilo personalizado a ser usado para abreviações, como visto neste exemplo básico.

HTML

<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>

CSS

abbr {
  font-variant: all-small-caps;
}

Resultado

Adicionar um atributo title permite que você forneça uma expansão ou definição para a abreviação ou acrônimo.

HTML

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>

Resultado

Você pode usar <abbr> em conjunto com <dfn> para definir uma abreviação mais formalmente, como mostrado aqui.

HTML

<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
  markup language used to create the semantics and structure of a web page.
</p>

<p>
  A <dfn id="spec">Specification</dfn> (<abbr>spec</abbr>) is a document that
  outlines in detail how a technology or API is intended to function and how it
  is accessed.
</p>

Resultado

• Usando o elemento <abbr>