Jefferson Santos
5 HTML Melhores praticas na construção de sites modernos
Um código HTML limpo, consistente e reutilizável é a chave para a manutenção de um aplicativo da web e para uma colaboração suave com outros desenvolvedores. Um código HTML limpo, consistente e reutilizável é a chave para a manutenção de um aplicativo da web e para uma colaboração suave com outros desenvolvedores. Isso torna importante para um desenvolvedor da Web conhecer algumas práticas recomendadas que garantirão um projeto HTML bem escrito. Além disso, um código HTML bem escrito que segue as convenções de codificação aumenta a acessibilidade para usuários de aplicativos da web. Aqui estão 5 práticas recomendadas para um ótimo projeto HTML:
1. Sempre declare um DOCTYPE
A declaração de tipo de documento HTML, referida como DOCTYPE, é a primeira linha de código colocada no início de cada documento HTML padrão. É uma instrução para o navegador da Web sobre em qual versão do HTML a página foi escrita e garante que a página da Web seja exibida da mesma maneira por diferentes navegadores da Web. É assim que se declara o DOCTYPE em um documento HTML:
<!DOCTYPE html>
2. Sempre use uma tag semântica
Tags semânticas são tags que descrevem explicitamente a finalidade dos elementos HTML. Eles reforçam o significado das informações na página da Web, e não apenas a apresentação ou aparência. Além de tornar seu código mais limpo e legível, eles aumentam a acessibilidade dos usuários de leitores de tela, permitindo que eles naveguem pelas páginas da web com eficiência. As tags semânticas também melhoram a otimização do mecanismo de pesquisa (SEO). Em vez de usar muitos elementos div, considere substituí-los pela tag semântica apropriada.
Prática ruim:
<body> <div class="header"> <div class="nav"> <ul> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Contact</a></li> </ul> </div> </div> </body>Melhor prática:
<body> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Contact</a></li> </ul> </nav> </body>3. Sempre feche suas tags
É uma boa prática fechar todas as tags criadas em seu código. Nunca se esqueça de fechar as tags pai ou aninhadas, exceto se forem tags de fechamento automático como <img> ou <input>. Isso ocorre porque seu código HTML pode não gerar um erro ao ser renderizado em seu navegador. No entanto, os navegadores da Web têm regras exclusivas que determinam como eles se comportam. Enquanto alguns podem adivinhar corretamente um elemento com uma tag de fechamento ausente, outros podem interpretá-lo como parte do elemento anterior, causando um erro de validação. Você pode evitar isso usando o IntelliSense ou outras ferramentas de conclusão de código em seu ambiente de desenvolvimento de integração (IDE).
Prática ruim:
<p> <a href="#"> How to shop on a budget </a>Melhor prática:
<p> <a href="#"> How to shop on a budget </a> </p>4. Sempre adicione um atributo alt a um elemento de imagem
Adicionar um atributo alt relevante ao elemento <img> é uma prática padrão no desenvolvimento web. O atributo alt especifica um texto alternativo para uma imagem se a imagem não puder ser exibida, provavelmente devido a uma conexão lenta, um erro na fonte ou se o usuário usar um leitor de tela. Isso permite que os usuários acessem informações alternativas na imagem.
Prática ruim:
<img src="cat.png" width="500" height="600">Best practice:
<img src="cat.png" alt="A street cat on an alleyway" width="500" height="600">5. Evite comentários desnecessários
Os comentários desempenham um papel importante na programação, no entanto, devem ser usados criteriosamente. Isso ocorre porque comentários excessivos tornam seu código “sujo” e podem ser muito perturbadores. O objetivo de todo programador deve ser escrever código de maneira que facilite o uso e a manutenção, uma prática conhecida como código limpo. Há um ditado que diz que o código limpo é autodocumentado. Se você tiver que dar muitas explicações sobre o que seu código está fazendo, considere refatorar seu código. Uma forma de evitar comentários desnecessários é usar tags semânticas e nomes descritivos para entidades (variáveis, classes e funções).
Espero que tenha gostado desse post, afinal, todos temos que aprender a base para contribuir com o futuro da web melhor. Obrigado.
Jefferson Santos
Estudante de programação, com sonhos e buscando sempre evoluir cada dia mais