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