O elementoHTML<abbr> representa uma abreviação ou acrônimo.

Ao incluir uma abreviação ou acrônimo, forneça uma expansão completa do termo em texto simples no primeiro uso, junto com o<abbr> para marcar a abreviação. Isso informa à pessoa usuária o que a abreviação ou acrônimo significa.

O atributo opcionaltitle pode fornecer uma expansão para a abreviação ou acrônimo quando uma expansão completa não estiver presente. Isso fornece uma dica para os agentes da pessoa usuária sobre como anunciar/exibir o conteúdo enquanto informa a todas as pessoas usuárias o que a abreviação significa. Se presente,title deve conter esta descrição completa e nada mais.

Experimente

<p>  You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your  <abbr>HTML</abbr> (HyperText Markup Language). Using style sheets, you can  keep your <abbr>CSS</abbr> presentation layer and <abbr>HTML</abbr> content  layer separate. This is called "separation of concerns."</p>

abbr {  font-style: italic;  color: chocolate;}

Atributos

Este elemento suporta apenas osatributos globais. O atributotitle tem um significado semântico específico quando usado com o elemento<abbr>; eledeve 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 umtitle para um não anexa automaticamente o mesmo texto de expansão a outros com o mesmo texto de conteúdo.

Notas de uso

Casos de uso típicos

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 umtitle 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 atributotitle 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 exemploDefinindo uma abreviação abaixo.

Considerações gramaticais

Em idiomas comnú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 atributotitle 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.

Estilo padrão

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, usetext-decoration efont-variant.

Acessibilidade

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 umtitle 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.

Exemplos

Marcando uma abreviação semanticamente

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

Estilizando abreviações

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

Fornecendo uma expansão

Adicionar um atributotitle 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

Definindo uma abreviação

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

HTML

<p>  <dfn><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>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

Resumo técnico

Especificações

Compatibilidade com navegadores

Veja também

• Usando o elemento<abbr>