HTML não é só uma linguagem de formatação, é também uma terapia e a porta de entrada do conhecimento de como o mundo do desenvolvimento funciona ou como devia funcionar: simples, funcional e organizado!
Nós possuímos um vídeo sobre HTML e CSS além de uma série/curso completo e gratuito de desenvolvimento web com diversas tecnologias como:
Além de muitos outros tutoriais que podem servir de complemento para algum projeto particular ou para obter conhecimento para aquela tão sonhada vaga na empresa que você deseja. Tais como: Docker, PHP e MySQL, Laravel e entre outros.
Mas nesse artigo vamos conhecer 10 Dicas de HTML que provavelmente você não sabia , vamos às dicas!
01. Carregamento imagens só quando o usuário for vê-la
Dica de desempenho. Você pode usar o atributo loading=lazy para adiar o carregamento da imagem até que o usuário role até eles.
<img src="imagem.jpg" loading="lazy" alt="Texto para o padrão W3C">02. E-mail, Telefone e SMS
Você pode atribuir ao título e ao corpo do e-mail, sms ou telefone o conteúdo com pré preenchimento dos dados ao usuário clicar:
<a href="mailto:{email}?subject={subject}&body={content}">
Envie-nos um e-mail
</a>
<a href="tel:{phone}">
Me ligue
</a>
<a href="sms:{phone}?body={content}">
Envie-nos uma mensagem
</a>03. Lista ordenada a partir de um determinado número
Caso queira que sua lista comece em um número diferente, basta usar o atributo start para alterar o ponto de partida para suas listas ordenadas.
04. O elemento meter
Você pode usar o elemento <meter> para exibir as quantidades de forma gráfica sem precisar de Javascript/CSS.
See the Pen mdWywMd by Marcos (@marcoscpp) on CodePen.
05. Pesquisa nativa
Outra dica é usar o autocomplete nativo do HTML para exibir as alternativas
See the Pen WNpbOOo by Marcos (@marcoscpp) on CodePen.
06. Fieldset com input radio
Se for fazer um questionário, fica mais bem formatado usando o radio dentro do fieldset
See the Pen eYvmRvy by Marcos (@marcoscpp) on CodePen.
07. Habilitar a verificação ortográfica
Use o atributo spellcheck para definir se o elemento pode ser verificado quanto a erros de ortografia.
See the Pen JjWoJba by Marcos (@marcoscpp) on CodePen.
08. Slide nativo
See the Pen VwpYWag by Marcos (@marcoscpp) on CodePen.
09. HTML Accordion
Você pode usar o elemento details para criar um accordion nativo do HTML.
See the Pen Accordion Nativo do HTML by Marcos (@marcoscpp) on CodePen.
10. O atributo download
Use o atributo download em seus links para baixar o arquivo em vez de navegar até ele.
<a href="caminho/para/o/arquivo" download>
download
</a>
Dica bônus
Use o atributo poster para especificar uma imagem a ser mostrada durante o download do vídeo ou até que o usuário pressione o botão de reprodução.
<video poster="caminho/para/a/imagem">Espero que você tenham gostado das dicas. Caso deseje mais informações sobre HTML e Desenvolvimento Web, sugiro esse vídeo abaixo ou logo essa Playlist completa!
Essas dicas foram retiradas do site: markodenic.com
