5 dicas de HTML que ninguém está falando

dicas de HTML

Todos os desenvolvedores da web precisam usar HTML (Hyper Text Markup Language) extensivamente, independentemente da estrutura ou linguagem de back-end que você escolher e neste artigo vamos mostrar algumas dicas de HTML que podem lhe ajudar.Frameworks e linguagens de programação podem ir e vir, mas o HTML veio para ficar. Mas, apesar desse amplo uso, ainda existem tags e propriedades que a maioria dos desenvolvedores não conhece. E embora existam vários mecanismos de modelagem como o Pug disponíveis, você ainda precisa ter um bom domínio de HTML e CSS.

Na nossa opinião, é melhor usar recursos HTML sempre que possível, em vez de alcançar a mesma funcionalidade usando JavaScript, embora que escrever HTML pode se tornar repetitivo e enfadonho. Mesmo que muitos desenvolvedores usem HTML diariamente, eles não tentam melhorar seu jogo e realmente aproveitar alguns dos recursos raramente falados do HTML.

Abaixo estão 5 dicas de HTML e atributos que você deve saber:

1. Imagem de carregamento lento

O carregamento lento de suas imagens pode ajudar a aumentar o desempenho e a capacidade de resposta do seu site. O carregamento lento impede o carregamento de imagens que não são realmente necessárias na tela imediatamente. No entanto, conforme você rola para baixo ou mais perto da imagem, ela começa a carregar.

Em outras palavras, a imagem é carregada quando o usuário rola e a imagem se torna visível, caso contrário, ela não é carregada. Isso pode ser alcançado por HTML simples facilmente.

Tudo que você precisa fazer é adicionar a propriedade loading = “lazy” aos seus arquivos de imagem. Seu elemento de imagem deve ter a seguinte aparência depois de adicionar a propriedade:

<img src="imagem.png" loading="lazy" alt="…" width="200" height="200">

Você pode obter alguns insights sobre os bytes que você salvará com este truque usando a ferramenta Lighthouse do Google.

2. Sugestões de entrada

Obter sugestões úteis e relevantes quando você está tentando pesquisar algo é realmente útil. Sugestões de entrada e preenchimento automático são bastante comuns hoje em dia e você deve ter notado isso em sites como Google e Facebook.

Você pode usar JavaScript para adicionar sugestões de entrada, definindo um ouvinte de evento no campo de entrada e, em seguida, combinando o termo pesquisado com as sugestões predefinidas. No entanto, o HTML permite que você mostre um conjunto de sugestões predefinidas também, usando a tag <datalist>.

Lembre-se de que o atributo de ID dessa tag deve ser o mesmo que o atributo da lista de campos de entrada.

3. Marca da imagem

Você já teve problemas com imagens que não aumentavam tão bem quanto você esperava? Certamente, muitas vezes. Isso geralmente acontece quando você está tentando criar sites de galeria ou usando uma imagem grande e exibindo-a como uma imagem em miniatura.

Ao alterar a largura da janela de visualização, você pode notar que certas imagens não aumentam ou diminuem conforme o esperado. Felizmente, o HTML dá aos desenvolvedores a oportunidade de corrigir isso facilmente usando a tag <picture>, que permite adicionar várias imagens que cabem em larguras diferentes, em vez de ter uma única escala para cima e para baixo.

Seu código será parecido com este:

<picture>
  <source media="(min-width:768px)" srcset="med_flag.jpg">
  <source media="(min-width:495px)" srcset="small_flower.jpg">
  <img src="high_flag.jpg" alt="Flags" style="width:auto;">
</picture>

Como você pode ver, especificamos as larguras mínimas em que uma determinada imagem deve ser exibida. Esta tag é muito semelhante à tag <audio> e <video>.

4. URL base

Esta é uma das nossas tags favoritas ao criar um índice de sites ou um mapa do site. Esta tag é útil quando você tem muitas tags âncora redirecionando para um determinado URL e todos os URLs começam com o mesmo endereço base.

Por exemplo, se eu quiser especificar a URL para os identificadores do Twitter da PR Nethost e Google, o início da URL (o domínio) será o mesmo, mas o que segue serão seus respectivos IDs. Normalmente, precisa colar o link duas vezes com o mesmo nome de domínio. No entanto, o HTML tem uma tag <base> que permite definir um URL base, conforme mostrado abaixo:

<head>
  <base href="https://www.twitter.com/" target="_blank">
</head>

<body>
<img src="prnethost" alt="PR Nethost">
<a href="Google">Google</a>
</body>

O código acima irá gerar uma imagem redirecionando para “https://www.twitter.com/prnethost” e uma tag âncora redirecionando para “https://www.twitter.com/google”.

A tag <base> deve ter “href” ou um atributo de destino presente.

5. Atualização de documento

Se quiser redirecionar o usuário para outra página após um período de inatividade ou mesmo imediatamente, você pode fazer isso facilmente usando nada além de HTML simples.

Você deve ter notado esse recurso ao abrir certos sites e algo parecido com “Você será redirecionado em 5 segundos” apareceu.

Esse comportamento é incorporado ao HTML e você pode usá-lo por meio da tag <meta> e definindo http-equiv = “refresh” nela.

<meta http-equiv = “refresh” content = “4; URL = ‘https://prnethost.com.br’ />

Aqui, a propriedade content especifica os segundos após os quais o redirecionamento deve acontecer.

É importante notar que, embora o Google alega tratar essa forma de redirecionamento como outros redirecionamentos, não é aconselhável usar esse tipo de redirecionamento, a menos que seja realmente necessário. Portanto, use-o apenas em certos casos, como redirecionar a página após uma quantidade significativa de inatividade.

Conclusões

HTML e CSS são bastante poderosos e você pode construir sites fantásticos usando apenas os dois. No entanto, apesar do uso intenso dessas duas linguagens, muitos desenvolvedores não se aprofundam e se divertem com elas. Existem muitas dicas de HTML e truques, além dos poucos que foram compartilhados acima e com certeza valem a pena experimentá-los em seu projeto.

Se você planeja usar JavaScript também, certifique-se de verificar meu blog recente, discutindo algumas das dicas de HTML que podem economizar seu tempo.

Ouvir o artigo
Listen to
this article
Text to speech by Listencat
Text to speech
by Listencat
Fechar Menu