11 tags HTML incomuns para aumentar suas habilidades de desenvolvimento Web

Principais conclusões

• Use e marque para criar seções expansíveis, proporcionando uma experiência amigável e mantendo um design limpo.
• Destaque o conteúdo importante com a tag, chamando a atenção para palavras-chave, frases ou resultados de pesquisa em sua página da web.
• Adicione significado semântico a datas e horas usando a tag, melhorando a acessibilidade para usuários com deficiências que usam leitores de tela.

Como desenvolvedor da Web, você deve ser versado em tags HTML comuns, como, , e que representam a estrutura e o conteúdo de suas páginas da web. No entanto, 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 muitas informações ou conteúdo com o qual não deseja sobrecarregar o leitor imediatamente. O e tags vêm para o resgate!

Essas tags funcionam juntas para criar uma seção expansível com um título ou resumo que os usuários do 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 informationsummary>
<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 mantendo um design limpo. Eles podem até ajudá-lo a refinar seu habilidades como designer de interface.

2.

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

Esse 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>markmark> tag to highlight important words or
 phrases.
p>

Por exemplo, se seu site tiver funcionalidade de pesquisa, você poderá usar o tag para destacar as correspondências da consulta de pesquisa nos resultados, tornando mais fácil para os usuários encontrar informações relevantes.

3.

Você já se deparou com situações em que o conteúdo se torna desatualizado ou não é mais relevante, mas ainda deseja exibi-lo para fins históricos ou para indicar alterações ao longo do tempo?

Introduzir o marcação! Ele significa tachado e renderiza qualquer conteúdo dentro do elemento com uma linha no meio.

<p>
 This product is <s>out-of-stocks> currently available at a discounted
 price!
p>

Neste exemplo, o fora de estoque o texto será exibido com uma linha, indicando que o status do estoque do produto foi alterado.

4.

Quando você deseja adicionar significado semântico a datas e horários em seu conteúdo, o etiqueta vem a calhar.

Usando o data hora atributo, 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
<timedatetime="1776-07-04">July 4, 1776time>.
p>

Usando o tag, você dá mais estrutura ao seu conteúdo e o torna acessível a uma gama maior de usuários, incluindo aqueles com deficiência que usam leitores de tela.

5.

Às vezes, gerenciar texto em vários idiomas em sua página da Web pode ser um desafio, especialmente quando cada parte requer uma formatação diferente.

O A tag vem em socorro isolando uma parte do texto que o navegador deve tratar de maneira diferente devido a diferentes requisitos de idioma.

<p>
<bdi>5,000bdi> 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 uma formatação diferente, ele 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 usadas acima ou abaixo dos caracteres, o, , e tags entram em jogo.

<p>
 I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>

Neste exemplo, o elemento contém o caractere 漢 (Kanji) e o elemento contém a pronúncia かん (kan). O elementos fornecem parênteses de fallback para navegadores que não suportam anotações ruby.

7.

Quando você tem palavras longas que podem quebrar seu layout, o tag está aqui para ajudar. Ele sugere uma oportunidade para uma quebra de linha (oportunidade de quebra de palavra) em uma palavra longa, onde o navegador pode optar por quebrar o texto.

<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 que permite ao navegador dividi-lo em duas linhas, se necessário, preservando o layout do conteúdo ao redor.

8. _e

Para notações científicas ou matemáticas, fórmulas químicas ou notas de rodapé, você pode usar o e tags para texto subscrito e sobrescrito, respectivamente.

<p>
 The chemical formula for water is H<sub>2sub>O,
 and the Pythagorean theorem is
 a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>

Este exemplo usa o marca para exibir o 2 em H2O como um subscrito, enquanto o tags exibem os expoentes no teorema de Pitágoras.

9.

Precisa representar medições escalares dentro de um intervalo conhecido, como uso de disco, classificações ou pontuações de exames? O tag tem você coberto.

Usando o valor, min, e máximo atributos, você pode definir o valor atual, o valor mínimo e o valor máximo da medição, respectivamente.

<metervalue="75"min="0"max="100">75%meter>

Neste exemplo, o elemento representa uma nota de exame de 75%.

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, o etiqueta é o caminho a percorrer. Você pode usar o abrir atributo para mostrar a caixa de diálogo por padrão.

<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
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 abrir atributo. Você pode personalizar o conteúdo e o comportamento da caixa de diálogo usando JavaScript para interações mais avançadas.

11.

Use o tag para agrupar opções relacionadas dentro de um elemento suspenso. Ele permite que você organize e categorize opções para facilitar a navegação e a seleção.

• Otag é um elemento de contêiner que agrupa tags dentro de um elemento.
• Ele ajuda a organizar as opções criando agrupamento ou categorização visual no menu suspenso.
• O tag requer um atributo label, que especifica o nome ou título do grupo de opções.
• Pode conter um ou mais tags como seus elementos filho, representando as opções individuais dentro do grupo.

Por exemplo:

<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
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 dentro dessa 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, eles oferecem recursos valiosos para contextos específicos.

Adicionar essas tags ao seu conjunto de habilidades aprimora a interatividade, a acessibilidade e agiliza o processo de desenvolvimento da web. Lembre-se, mesmo que não sejam familiares, eles têm um impacto significativo em sua jornada como desenvolvedor web.