10 elementos HTML pouco conhecidos

A linguagem de marcação de hipertexto (HTML) possui diversos elementos que podem trazer tanto um estilo diferente quanto deixar a sua página semântica.

Photo by Fabian Grohs on Unsplash

Por que ter páginas Web semânticas?

Utilizar elementos semânticos é muito importante para ter uma página Web acessível. Tecnologias assistivas como os leitores de tela, tem um melhor desempenho quando as páginas estão dando sentido aos elementos da tela. Por exemplo, quando você utiliza o elemento <h1>, o usuário que utiliza um leitor de tela pode fazer uma busca pelos títulos da página e também irá saber que este trecho de texto representa um título.

A semântica Web também facilita na Otimização de mecanismos de pesquisa como o Google, por exemplo. Então, ao utilizar estes elementos, a sua página tem uma chance maior de subir algumas posições na pesquisa do Google.

Seguem abaixo alguns elementos HTML que não são muito conhecidos ou utilizados pela comunidade.

1 - Entrada textual do usuário: <kbd>

Este elemento serve para representar uma entrada do teclado (keyboard input), como, por exemplo, as teclas:

Exemplo de utilização do elemento <kbd>

A saída será um código semântico e um texto com uma fonte um pouco mais espaçada, mas você também pode estilizar no CSS.

#PraCegoVer: Imagem contendo o texto “Pressione a tecla Shift para selecionar uma ou mais palavras”. Na palavra “Shift” foi utilizado o elemento <kbd> e aparece com uma fonte mais espaçada.

Para saber mais, acesse a documentação do <kbd> na W3C.

2 - Abreviação de palavras: <abbr>

Para abreviar palavras, o HTML nos proporciona este elemento interativo, que permite ao usuário descobrir o significado ao passar o mouse sobre a palavra! Veja um exemplo de uso abaixo:

Exemplo de utilização do elemento <abbr>

E esta é a saída do navegador:

#PraCegoVer: animação contendo o texto “O INEP Anísio Teixeira é uma autarquia federal vinculada ao Ministério da Educação”. Aparece também o cursor do mouse e o usuário passando o cursor por cima da sigla “INEP” e ao passar o cursor aparece uma caixa na cor preta contendo a descrição da sigla.

Para saber mais, acesse a documentação do <abbr> no MDN.

3 - Exibição de documentos: <object>

Para abrir um recurso externo, como, por exemplo, um arquivo .pdf, podemos utilizar este elemento de forma muito simples. O resultado será uma espécie de “frame” que será renderizado com o conteúdo do seu .pdf, semelhante a aplicação nativa de abertura de um pdf do próprio navegador.

Exemplo de utilização do elemento <object>

Este elemento existe desde a versão 4 do HTML e proporciona a abertura de diversos recursos externos.

#PraCegoVer: animação contendo um arquivo com a extensão .pdf dentro de uma ferramenta de visualização. Esta ferramenta contém as funcionalidades de baixar o documento, imprimir, recarregá-lo, aumentar ou diminuir o tamanho.

Para saber mais, acesse a documentação do <object> no MDN.

4- Renderizando imagens : <source> e <picture>

Imagine que você deseja mostrar imagens diferentes baseadas no tamanho da tela, você pode fazer isso utilizando os elementos <picture> e <source>. O elemento <picture> serve para envolver múltiplos elementos do tipo <source> para poder exibir a imagem mais adequada para o navegador ou tamanho da tela. Para isso, basta adicionar o atributo “media” no <source> para especificar em qual tamanho de mídia você deseja que a imagem apareça, conforme o exemplo abaixo.

Exemplo de utilização dos elementos <source> e <picture>

O elemento <source> possui outras funcionalidades e atributos que você pode estar lendo na documentação do <source> no MDN. E também recomendo a leitura do tutorial de Imagens responsivas no MDN.

5- Representação de um valor: <meter>

Este elemento serve para você criar uma representação visual de um intervalo de valores, sendo semelhante ao elemento <progress>. Ele possui alguns atributos como o valor mínimo, máximo e o atual. A partir deles é criada a barra retangular colorida representando o intervalo destes valores, como se fosse uma representação fracionária.

Exemplo de utilização do elemento <meter>

#PraCegoVer: imagem contendo o resultado do exemplo de utilização do elemento <meter>, contendo um elemento retangular dividido em duas cores, a primeira na cor verde e a segunda na cor cinza. E com um texto ao lado escrito “Temperatura corporal do paciente”.

Existem outros atributos para utilizar e enriquecer a utilização deste elemento. Para isso, você pode acessar a documentação do <meter> no MDN.

6- Barra de progresso: <progress>

O HTML já nos disponibiliza um elemento para representar uma barra de progresso de forma simples. Veja como é fácil utilizá-lo no exemplo abaixo:

Exemplo de utilização do elemento <progress>

#PraCegoVer: imagem contendo o resultado da utilização do exemplo do elemento <progress>. Nela, contém um elemento no formato retangular, dividido verticalmente em 10 partes, onde 7 das partes estão na cor azul e 3 estão na cor branca. Também contém uma descrição no lado esquerdo, onde está escrito: “File progress”.

Para saber mais, acesse a documentação do <progress> no MDN.

7- Caixa de detalhes: <details>

Este elemento se assemelha bastante com o conhecido “collapse” do Bootstrap, trazendo a funcionalidade de colapsar de forma nativa! Sem precisar acrescentar nenhuma linha de Javascript.

Exemplo da utilização do elemento <details>

#PraCegoVer: animação demonstrando o resultado do exemplo do elemento <details>. Nela, contém o cursor do mouse clicando em cima de um texto escrito “O que é HTML” e ao lado do texto contém um ícone que simboliza uma seta. Ao clicar no texto, abre abaixo dele uma caixa contendo a frase “É uma linguagem de marcação de hipertexto” e a seta passa a apontar para este conteúdo.

Para saber mais:

• Acesse a documentação do <details> na W3C.
• Consulte o suporte ao <details> pelos navegadores antes de começar a implementá-lo.

8- Lista de opções (combo list): <datalist>

O <datalist> é um elemento que serve para você agrupar uma lista de opções, onde o valor escolhido pelo usuário pode ser atribuído a outro elemento.

O exemplo abaixo, assemelha-se a uma combinação de <select> + <input>, onde o usuário consegue realizar um filtro na lista de opções utilizando o <datalist>.

#PraCegoVer: animação com o resultado do exemplo de utilização do <datalist>. Nela, o usuário está digitando dentro de um campo de entrada a palavra “Inter” e aparece a sugestão para ele selecionar “Internet Explorer”. No lado direito do campo, contém uma seta, onde ele clica e aparece uma lista de navegadores para ele selecionar.

E a sua implementação é bem simples, basta associar a lista de opções ao elemento <input>. Veja:

Exemplo de utilização do elemento <datalist>

9- Marcação de texto: <mark>

O elemento <mark> funciona como uma caneta marca texto digital. Por padrão a cor dele é amarelo, mas você pode estar alterando a cor utilizando a propriedade background-color do CSS.

Exemplo de utilização do elemento <mark>

#PraCegoVer: imagem contendo o texto “Este elemento funciona como um marcador de texto”. A palavra “marcador” está com uma cor de fundo amarela em volta dela.

Em artigo chamado “Highlight text with HTML mark tag”, a autora ensina como utilizar este elemento e também destaca a importância da semântica para a Otimização de mecanismos de pesquisa e também para a acessibilidade. Vale a pena dar uma lida, pois ela também dá dicas de como utilizá-lo para leitores de tela.

10- Caixa de diálogo (modal): <dialog>

E se o HTML tivesse um elemento que representa uma caixa de diálogo com o usuário (como, por exemplo, a conhecida “modal”)? Sabemos que a maioria dos desenvolvedores, cria as suas próprias caixas de diálogo utilizando <div>. Mas agora temos um elemento chamado <dialog>, que contém uma forma de utilização muito simples. Basta apenas incluir a propriedade “open” dentro do elemento ou removê-lo para esconder a caixa de diálogo, conforme o trecho de código abaixo:

Exemplo de utilização do elemento <dialog>

E o resultado será o seguinte:

#PraCegoVer: imagem contendo o resultado do exemplo de utilização do elemento <dialog>. Nesta imagem aparece uma caixa de diálogo, com uma borda preta e com o texto “Olá para todos!”.

E a partir desta caixa de diálogo, você pode customizá-la utilizando CSS.

Também possui alguns métodos que podem ser chamados pelo javascript para abrir e fechar a caixa de diálogo.

Para saber mais:

• Acesse a documentação do <dialog> na W3C.
• Consulte o suporte ao <dialog> pelos navegadores antes de começar a implementá-lo.

Conclusão

Existem pequenas atitudes, como utilizar os elementos semânticos que trazem grandes benefícios para a acessibilidade.

Se você ainda tem algumas dúvidas sobre acessibilidade na Web e não conhece muito bem sobre o assunto, eu escrevi um post chamado: Desmistificando a acessibilidade na Web — o início.

Alguns dos elementos citados são muito novos, e para alguns navegadores mais antigos ainda não há suporte. Por isso, é importante ficar ligado no suporte dos navegadores e verificar se não existem polyfills para eles.

Então, é isso pessoal. Espero que tenham gostado. Até mais!