Carregando...

Abbr Html

Postado: 30 de março de 2022 Tempo de Leitura: 2 Minutos

Abbr Html

A Tag Abbr Html define uma abreviação ou acrônimo em um documento HTML. 

O Elemento Abbr HTML: Uma Abreviação com Mais Detalhes

Em HTML, o elemento <abbr> serve para representar uma abreviação e, opcionalmente, fornecer uma explicação mais completa sobre ela. Essa explicação detalhada é exibida quando o usuário passa o mouse sobre a abreviação (em um dispositivo compatível) ou quando um leitor de tela a encontra.

Por que usar o <abbr>?

  • Acessibilidade: Ao fornecer uma descrição completa, você torna seu conteúdo mais acessível a pessoas com deficiência visual que utilizam leitores de tela.
  • Clareza: Para abreviações menos conhecidas, o <abbr> ajuda a garantir que todos os seus visitantes entendam o significado.
  • SEO: Embora não seja o fator mais importante, o uso adequado de <abbr> pode ajudar os mecanismos de busca a entender melhor o conteúdo da sua página.

Exemplo:

HTML
<p>A <abbr title="Associação Brasileira das Empresas de Benefícios ao Trabalhador">ABBT</abbr> é uma entidade que representa as empresas que oferecem benefícios aos trabalhadores.</p>

Neste exemplo, quando o usuário passa o mouse sobre a abreviação “ABBT”, o texto “Associação Brasileira das Empresas de Benefícios ao Trabalhador” será exibido como uma dica de ferramenta.

Dicas de uso:

  • Utilize o atributo title: É essencial usar o atributo title para fornecer a explicação completa da abreviação.
  • Seja conciso: A explicação deve ser clara e objetiva, evitando informações redundantes.
  • Use com moderação: Não exagere no uso de <abbr>, apenas para abreviações que realmente necessitam de uma explicação adicional.
  • Considere o contexto: Avalie se a abreviação é conhecida pelo seu público-alvo antes de usá-la.

Um exemplo de abreviatura é Mr. que é a abreviação de Mister. 

Definição e uso da TAG <abbr>

A TAG <abbr> define uma abreviação ou um acrônimo, como “HTML“, “CSS“, “Mr.“, “Dr.“, “ASAP“, “ATM“.

Dica: Use o atributo global para mostrar a descrição da abreviatura/acrônimo ao passar o mouse sobre o elemento. title

tag <abbr> pode ser definida usando o atributo title opcional da seguinte forma:

HTML
<p><abbr title="Loop Nerd">LN</abbr></p>

Veja o exemplo no código HTML.

HTML
<abbr title="Cascading Style Sheets">CSS</abbr>

Veja o exemplo passe o mouse na palavra CSS abaixo.

CSS

Veja outro exemplo HTML abaixo.

HTML

HTML
<abbr title="Linguagem de marcação do HyperText">HTML</abbr>

Veja mais um exemplo EUA.

EUA

HTML
<p><abbr title="Estados Unidos da América">EUA</abbr</p>

O propósito deste elemento é unicamente a conveniência de autores e todos os navegadores mostram ele como um elemento dentro de uma linha (display: inline) por padrão, embora o estilo aplicado sobre ele seja diferente entre diferentes navegadores:

  • Alguns navegadores, como o Internet Explorer, não aplicam nenhum estilo à mais do que é aplicado ao elemento <span>.
  • Opera, Firefox, e alguns outros adicionam um sublinhado pontilhado ao conteúdo do elemento.
  • Alguns poucos navegadores não apenas adicionam um sublinhado pontilhado, mas também colocam o texto em versalete (small caps); para evitar este tipo de estilo, adicione algo como font-variant (en-US): none no CSS que administra este caso.

É fortemente recomendado que autores web não confiem no estilo padrão. Note que este elemento não é suportado pelo Internet Explorer anterior ao IE7. Como tais versões do IE também não permitem que se aplique estilo para elementos desconhecidos, o seguinte script é necessário para permitir isso:

JavaScript
<!--[if lte IE 6]>
  <script>
    document.createElement("abbr");
  </script>
<![endif]-->

Neste artigo abordamos sobre a tag Abbr HTML

Veja outro Artigos de TAGS HTML!

  1. Estrutura Básica do HTML
  2. HTML – Tags de Formatação de Texto
  3. HTML – Tags Básicas
  4. Conheça as principais tags semânticas do HTML5
  5. Atributo de classe HTML

Publicado por: Loop Nerd

1.257 Visualizações

Tags

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados