HTML: 5 dicas que nunca ninguém te ensinou

dicas html

Vou-te deixar aqui 5 dicas que não vêm nos livros nem nos vídeos do YouTube. São 5 dicas simples que vão enriquecer o teu código, poupar-te trabalho e ajudar-te a dar mais um passinho no desenvolvimento do HTML.

Lazy Load de Imagens

Isto previne que imagens que não aparecem logo no ecrã sejam carregadas. Cada imagem é carregada apenas quando fazemos scroll e nos aproximamos dela.

<img src="imagem.png" loading="lazy" width="100%">

Sugestões de Input

Este truque permite sugerir ao utilizador termos relevantes para inserir num input de formulário.

<input list="carroslist" name="carros" id="carros">
<datalist id="carroslist">
  <option value="volvo">Volvo XC90</option>
  <option value="saab">Saab 95</option>
  <option value="mercedes">Mercedes SLK</option>
  <option value="audi">Audi TT</option>
</datalist>

Refresher

Este meta vai fazer refresh e redirecionar o utilizador para um URL fornecido dentro do período de tempo definido em “content” (segundos).

<meta http-equiv="refresh" content="4"; URL="https://www.sergiomartins.pt"/>

Base URL

Esta tag é super útil se a página tiver muitas tag <a> ligar a um URL específico que comece sempre da mesma forma.

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

<body>
    <a href="xgaizkax">Insta do Sérgio</a>
    <a href="sergiomartins.pt">Insta do Sérgio Martins</a>
    <a href="canalbalneario">Insta do Balneário</a>
</body>

Neste exemplo os 3 links ligam a páginas do instagram, sem termos que estar sempre a escrever http://www.instagram.com, pois já definimos isso na tag base.

Tag Picture

Usar vai permitir adicionar diferentes imagens com diferentes tamanhos em vez de ter apenas uma imagem que será aumentada e diminuída.

<picture>
  <source media="(min-width:650px)" srcset="img_grande.jpg">
  <source media="(min-width:465px)" srcset="img_pequena.jpg">
  <img src="img_normal.jpg" alt="Imagem" style="width:auto;">
</picture>

Assim a imagem irá ser alterada em função da janela e do seu tamanho. À medida que a janela é reduzida em tamanho a imagem mudará.

Comentários Facebook