10 Dicas de HTML que provavelmente você não sabia

E mais uma dica bônus!


10 Dicas de HTML que provavelmente você não sabia

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.

Lista ordenada a partir do número 11


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


html css javascript


Compartilhe


Nosso canal no Youtube

Inscreva-se


Marcos Oliveira

Marcos Oliveira

Desenvolvedor de software
https://github.com/terroo


Crie Aplicativos Gráficos para Linux e Windows com C++

Aprenda C++ Moderno e crie Games, Programas CLI, GUI e TUI de forma fácil.

Saiba Mais

Receba as novidades no seu e-mail!

Após cadastro e confirmação do e-mail, enviaremos semanalmente resumos e também sempre que houver novidades por aqui para que você mantenha-se atualizado!