Tag de Abreviatura HTML

Introdução

A tag HTML <abbr> é usada para definir uma abreviação ou um acrônimo.

Neste laboratório, você aprenderá como usar a tag HTML <abbr> para indicar quais abreviações e acrônimos aparecem no texto da sua página web.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Adicionar o Título

Primeiramente, crie um documento HTML chamado index.html e declare o docType.

Adicione o título ao arquivo index.html.

    <h1>Criando Abreviações em HTML</h1>

Adicionar Conteúdo

Adicione algum conteúdo de texto ao arquivo HTML.

    <p>Suponha que temos uma abreviação como Sr. ou Sra., que são muito comuns em nosso dia a dia, ou podemos ter abreviações técnicas como HTML, CSS ou HTTP.</p>

Usar a tag

Use a tag <abbr> para definir a abreviação e inclua o atributo title para fornecer uma explicação completa da abreviação.

    <p>Suponha que temos uma abreviação como <abbr title="Mister">Sr.</abbr> ou <abbr title="Misses">Sra.</abbr> que são muito comuns em nosso dia a dia, ou podemos ter abreviações técnicas como <abbr title="HyperText Markup Language">HTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr> ou <abbr title="Hypertext Transfer Protocol">HTTP</abbr>.</p>

Adicionar Estilos à tag

Adicione estilos à tag <abbr> para alterar como a abreviação é exibida na página web. Por exemplo, podemos adicionar um sublinhado pontilhado para indicar uma abreviação.

    <style>
        abbr {
            text-decoration: underline dotted;
        }
    </style>

Salve seu arquivo e abra-o em um navegador web para ver o resultado.

Resumo

Neste laboratório, você aprendeu como criar abreviações e acrônimos em páginas web usando a tag HTML <abbr>. Você também aprendeu como adicionar estilos a tags <abbr> individuais e aplicar estilos a múltiplas tags usando o atributo global class.