11 tags HTML incomuns para impulsionar suas habilidades de desenvolvimento web
HTML é uma linguagem simples, mas seu vocabulário é maior do que você imagina. Aprenda tudo sobre algumas das tags mais incomuns que você pode usar.
Principais conclusões
- Use as tags e
para criar seções expansíveis, para uma experiência amigável e um design limpo.
- Destaque conteúdo importante com a tag , chamando a atenção para palavras-chave, frases ou resultados de pesquisa em sua página web.
- Adicione significado semântico a datas e horas usando a tag
Como desenvolvedor web, você deve estar familiarizado com tags HTML comuns como <div>, e que representam a estrutura e o conteúdo de suas páginas da web. Porém, a linguagem HTML oferece muito mais!
Ao explorar essas tags exclusivas, você pode aprimorar a funcionalidade de seus aplicativos da web, destacando-os da multidão.
1. e
Imagine que você tem informações ou conteúdos extensos com os quais não deseja sobrecarregar o leitor imediatamente. As tags
Essas tags trabalham juntas para criar uma seção expansível com um título ou resumo que os usuários do seu site podem clicar para revelar. Por padrão, o conteúdo do elemento de detalhes não será exibido, mantendo sua página limpa e organizada.
Seus visitantes podem clicar facilmente no resumo para acessar as informações ocultas.
<details>
<summary>Click to reveal more information</summary>
<p>This content will be hidden by default but will appear when the user
clicks the summary.</p>
</details>Com essas tags, você pode ocultar grandes seções de texto, código ou outras informações, proporcionando uma experiência amigável e ao mesmo tempo mantendo um design limpo. Eles podem até ajudá-lo a refinar suas habilidades como designer de interface.
2.
A tag permite destacar partes específicas do seu conteúdo, destacando-as visualmente. Quando você usa o elemento , os navegadores normalmente aplicam uma cor de fundo amarela ao texto interno, chamando a atenção do leitor para ele.
Este recurso é particularmente útil quando você deseja enfatizar palavras-chave, frases importantes ou resultados de pesquisa em sua página da web.
<p>
You can use the <mark>mark</mark> tag to highlight important words or
phrases.
</p>Por exemplo, se o seu site tiver funcionalidade de pesquisa, você pode usar a tag para destacar as correspondências da consulta de pesquisa nos resultados, tornando mais fácil para os usuários encontrarem informações relevantes.
3.
Você já se deparou com situações em que o conteúdo ficou desatualizado ou não é mais relevante, mas ainda assim você deseja exibi-lo para fins históricos ou para indicar alterações ao longo do tempo?
Insira a tag ! Significa tachado e renderiza qualquer conteúdo dentro do elemento com uma linha no meio.
<p>
This product is <s>out-of-stock</s> currently available at a discounted
price!
</p>Neste exemplo, o texto esgotado será exibido com uma linha atravessando-o, indicando que o status de estoque do produto mudou.
4.
Quando você deseja adicionar significado semântico a datas e horas em seu conteúdo, a tag é útil.
Usando o atributo datetime, você pode especificar uma versão legível por máquina da data ou hora, o que ajuda navegadores, mecanismos de pesquisa e leitores de tela a entender o contexto.
<p>
The Declaration of Independence was signed on
<time datetime="1776-07-04">July 4, 1776</time>.
</p>Ao usar a tag , você dá mais estrutura ao seu conteúdo e o torna acessível a uma gama mais ampla de usuários, incluindo aqueles com deficiência que usam leitores de tela.
5.
Gerenciar texto em vários idiomas em sua página da web às vezes pode ser desafiador, especialmente quando cada parte requer formatação diferente.
A tag vem em socorro ao isolar uma parte do texto que o navegador deve tratar de maneira diferente devido aos diferentes requisitos de idioma.
<p>
<bdi>5,000</bdi> people attended the conference.
</p>Neste exemplo, o elemento envolve o número 5.000. Isso garante que, se o texto ao redor estiver em um idioma diferente ou exigir formatação diferente, não interferirá no número.
6. ,
Para tipografia do Leste Asiático, onde guias de pronúncia, furigana ou outras anotações são comumente usados acima ou abaixo dos caracteres, , e < As tags rp> entram em ação.
<p>
I'm learning
<ruby>漢<rt>かん</rt></ruby>字<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p>Neste exemplo, o elemento contém o caractere 漢 (Kanji) e o elemento contém a pronúncia かん (kan). Os elementos fornecem parênteses substitutos para navegadores que não suportam anotações Ruby.
7.
Quando você tem palavras longas que podem atrapalhar seu layout, a tag
<p>
This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a?query=string.
</p>No exemplo acima, o URL longo inclui um elemento
8. e
Para notações científicas ou matemáticas, fórmulas químicas ou notas de rodapé, você pode usar as tags e para texto subscrito e sobrescrito, respectivamente.
<p>
The chemical formula for water is H<sub>2</sub>O,
and the Pythagorean theorem is
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.
</p>Este exemplo usa a tag para exibir o 2 em H2O como um subscrito, enquanto o tags exibem os expoentes no teorema de Pitágoras.
9.
Precisa representar medidas escalares dentro de um intervalo conhecido, como uso de disco, classificações ou notas de exames? A tag
Usando os atributos value, min e max, você pode definir o valor atual, o valor mínimo e o valor máximo da medição, respectivamente.
<meter value="75" min="0" max="100">75%</meter>Neste exemplo, o elemento
10.
Quando você precisa criar uma caixa de diálogo ou uma sobreposição de janela para modais ou interações pop-up modais bem comportadas, a tag é a melhor opção. Você pode usar o atributo open para mostrar a caixa de diálogo por padrão.
<dialog open>
<p>This is a dialog box!</p>
<button>Close</button>
</dialog>Neste exemplo, uma caixa de diálogo simples contendo um parágrafo e um botão Fechar é exibida quando a página é carregada, graças ao atributo open. Você pode personalizar o conteúdo e o comportamento da caixa de diálogo usando JavaScript para interações mais avançadas.
11.
Use a tag para agrupar opções relacionadas em um elemento suspenso . Ele permite organizar e categorizar opções para facilitar a navegação e seleção.
- A tag é um elemento contêiner que agrupa tags relacionadas dentro de um elemento .
- Ajuda a organizar as opções criando agrupamentos visuais ou categorização no menu suspenso.
- A tag requer um atributo de rótulo, que especifica o nome ou título do grupo de opções.
- Ele pode conter uma ou mais tags como elementos filhos, representando as opções individuais dentro do grupo.
Por exemplo:
<select>
<optgroup label="Asia">
<option value="kr">South Korea</option>
</optgroup>
<optgroup label="Europe">
<option value="de">Germany</option>
</optgroup>
</select>Este exemplo agrupa o menu suspenso de seleção em duas seções: Ásia e Europa. Cada grupo contém tags que representam diferentes países daquela região.
Melhore sua proficiência em desenvolvimento web
Aprender essas tags HTML menos conhecidas pode melhorar muito suas habilidades de desenvolvimento web. Apesar da falta de reconhecimento, oferecem recursos valiosos para contextos específicos.
Adicionar essas tags ao seu conjunto de habilidades aumenta a interatividade, a acessibilidade e agiliza o processo de desenvolvimento web. Lembre-se, mesmo que não os conheça, eles têm um impacto significativo em sua jornada como desenvolvedor web.