No mundo acelerado da web, melhorar suas habilidades de desenvolvimento web requer a adoção de uma abordagem sustentável e inovadora para garantir que você fique atualizado com as últimas tecnologias e tendências. Os elementos HTML são um dos fundamentos mais importantes desse desenvolvimento, pois representam a linguagem básica na qual a estrutura e o design das páginas da Web são construídos. No entanto, não se trata apenas de usar elementos básicos, mas também de considerar o uso de elementos HTML inusitados e inovadores que agreguem atratividade e funcionalidade à experiência do usuário.
Como desenvolvedor da Web, você deve ser bem versado em elementos HTML comuns, como E E Que representa a estrutura e o conteúdo das páginas da web. No entanto, o HTML oferece muito mais do que isso!
Ao explorar esses elementos exclusivos, você pode melhorar a funcionalidade dos aplicativos da Web que criar, destacando-os da concorrência. Verificar Razões pelas quais aprender HTML é essencial para todo desenvolvedor.
Links Rápidos
1. E
Imagine que você tem uma ampla informação ou conteúdo com o qual não deseja que o leitor fique imediatamente sobrecarregado. Elementos vão te salvar E !
Eles trabalham juntos para criar uma seção expansível de um título ou resumo em que os usuários do site podem clicar para revelar mais detalhes. Por padrão, o conteúdo dentro de um elemento não será exibido , que mantém sua página limpa e organizada.
O visitante pode clicar facilmente no resumo para acessar as informações ocultas.
<detalhes>resumo> Clique para revelar mais informaçõesresumo>p>Isto o conteúdo ficará oculto por padrão, mas aparecerá quando o usuário clicar no resumo.</p> </detalhes>Com esses elementos, você pode ocultar grandes seções de texto, código ou outras informações, proporcionando uma experiência fácil de usar, mantendo um design limpo. Esses itens também podem ajudá-lo Melhore suas habilidades como designer front-end.
2.
O item é dado a você Destaque partes específicas do seu conteúdo, destacando-as visualmente. ao usar um item Os navegadores geralmente aplicam uma cor de fundo amarela ao texto dentro dele, o que chama a atenção do leitor para ele.
Esse recurso é especialmente útil quando você deseja enfatizar palavras-chave, frases ou resultados de pesquisa importantes em sua página da web.
<p> Você pode usar omarca>marca</marca> etiqueta para Destaque palavras ou frases importantes. </p>Por exemplo, se o seu site tiver uma função de pesquisa, você pode usar um elemento Para destacar correspondências de 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 deseja visualizá-lo para fins históricos ou para indicar mudanças ao longo do tempo?
Conheça o elemento ! Ele representa o texto tachado e exibe qualquer conteúdo dentro do elemento em uma fonte tachada.
<p>
Este produto é <s>Sem estoque</s> Atualmente disponível com desconto!
</p>Neste exemplo, fora de estoque será exibido como texto tachado, 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 Ele virá a calhar.
Com 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>
A Declaração de Independência foi assinada em
<tempodatetime="1776-07-04">4 de julho de 1776</tempo>.
</p>usando um item , você dá mais estrutura ao conteúdo e o torna acessível a uma gama maior de usuários, incluindo pessoas com deficiência que usam leitores de tela.
5.
Gerenciar texto em vários idiomas em uma página da Web às vezes pode ser um desafio, especialmente quando cada parte requer uma formatação diferente.
O item será apresentado a você Ajude isolando um trecho de texto que o navegador deve tratar de maneira diferente devido a diferentes requisitos de idioma.
<p><bdi>5,000</bdi> pessoas compareceram à conferência.
</p>Neste exemplo, o elemento envolve com o número 5000. Isso garante que, se o texto ao redor estiver em um idioma diferente ou exigir um formato diferente, ele não se sobrepõe ao número.
6. , ,
Para escrever em países do Leste Asiático, onde dicas de pronúncia, furigana ou outras anotações são comumente usadas acima ou abaixo das letras, os elementos tocam E E este papel.
<p>
eu estou aprendendo
<rubi>chinês<rt>pode</rt></rubi>Word<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p>Neste exemplo, o elemento contém o caractere 漢 (kanji) e contém o elemento Sobre a pronúncia かん (era). Itens fornecidos Chaves de backup para navegadores que não suportam anotações em vermelho.
7.
Quando você tem palavras longas que podem atrapalhar a formatação, o Element está aqui para ajudar. Ele sugere a chance de uma quebra de linha (a chance de quebrar palavras) em uma palavra longa, onde o navegador pode optar por quebrar o texto.
Este é um exemplo de uma URL longa: https://www.example.org/ with/a/long/path/and/a?query=string.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. Verificar Um guia para iniciantes para imagens HTML responsivas.
8. e
Para símbolos científicos ou matemáticos, fórmulas químicas ou notas de rodapé, você pode usar os elementos e para subscrito e sobrescrito, respectivamente.
<p>
A fórmula química da água é H<abaixo>2</abaixo>O, e o teorema de Pitágoras é um<cear>2</cear> + B<cear>2</cear> = c<cear>2</cear>.
</p>Este exemplo usa um elemento para exibir o 2 em H2O como um subscrito, enquanto exibe o elemento exponencial no teorema de Pitágoras.
9.
Precisa representar métricas numéricas dentro de um intervalo conhecido, como uso de disco, classificações ou pontuações de teste? O elemento irá ajudá-lo .
Usando os atributos de valor, mínimo e máximo, você pode especificar o valor atual, o valor mínimo e o valor de medição máximo, respectivamente.
<meter value="75"min="0"max="100">75%Neste exemplo, um elemento Pontuação do teste de 75%.
10.
Quando você precisa criar uma caixa de diálogo, janela de sobreposição condicional ou interações pop-up modais, o é o caminho a percorrer. Você pode usar o atributo abertoMostra a caixa de diálogo por padrão.
<diálogoaberto><p>Esta é uma caixa de diálogo!</p><botão>Fechar</botão></diálogo>Neste exemplo, uma caixa de diálogo simples com um parágrafo e um botão Fechar aparece quando a página é carregada, graças ao tema aberto. Você pode personalizar o conteúdo e o comportamento da caixa de diálogo usando JavaScript para interações mais avançadas.
11.
Usar um item Agrupa opções relacionadas em um item suspenso . O que permite organizar e categorizar opções para facilitar a navegação e a seleção.
- É um elemento container que coleta tags relacionado dentro de um elemento .
- Ajuda a organizar as opções criando um agrupamento ou categorização visual no menu suspenso.
- requer sinal Um atributo de rótulo que especifica o nome ou o título do grupo de opções.
- Pode conter um elemento um ou mais subitens, que representam escolhas individuais dentro do grupo.
Por exemplo:
<selecionar><grupo de opçõesrótulo="Ásia"><opçãovalor="kr">Coreia do Sul</opção></grupo de opções><grupo de opçõesrótulo="Europa"><opçãovalor="de">Alemanha</opção></grupo de opções></selecionar>Este exemplo agrupa o menu suspenso de seleção em duas partes: Ásia e Europa. Cada grupo contém itens que representam diferentes países dentro dessa região.
Aumente sua eficiência no desenvolvimento web
Aprender os elementos HTML menos conhecidos pode melhorar muito suas habilidades de desenvolvimento web. Embora não reconhecidos, eles oferecem recursos valiosos para contextos específicos.
Adicionar esses elementos ao seu conjunto de habilidades melhora a interatividade, a acessibilidade e agiliza o processo de desenvolvimento da web. Lembre-se, embora possa não ser familiar, tem um grande impacto em sua jornada como desenvolvedor web. Você pode ver agora Código em movimento: melhores aplicativos de edição de HTML para Android.
