Se você é um iniciante ou um expert em Hyper Text Markup Language (HTML) é importante seguir algumas das melhores práticas para manter seus documentos HTML consistentes e organizados. Com tantos elementos, atributos, propriedades, valores e mais – há muito a aprender.
Aqui estão 10 melhores práticas de HTML para ter em mente ao trabalhar no seu próximo projeto.
1. Use a estrutura de documentos apropriada
Documentos HTML ainda funcionarão sem elementos como <html>, <head>, e <body>. No entanto, as páginas não serão renderizadas corretamente em todos os navegadores, então é importante ser consistente usando a estrutura de documentos apropriada.
Exemplo:
2. Declare o doctype correto
Quando criar um documento HTML, a primeira coisa a declarar é o doctype. Isto irá dizer ao navegador os padrões que você está usando para renderizar sua marcação corretamente. O doctype vai antes da tag <html> no topo da página. Se você não tem certeza sobre qual declaração usar, W3.org fornece informações sobre como escolher o doctype correto.
3. Sempre feche tags
Para evitar encontrar erros de validação lembre-se sempre de ter uma tag de fechamento para cada tag que você criar.
4. Não use estilos inline
Pode parecer um caminho fácil para colocar o estilo em linha com o código ao invés de criar uma folha de estilo externa. Entretanto, estilos inline não são uma boa prática de codificação porque torna mais difícil atualizar e manter um website. Ao invés disso, mantenha seus estilos separados da sua marcação HTML.
5. Use o atributo alt com imagens
Não é necessário ter um atributo alt com imagens, o que torna fácil de ignorar. No entanto, é importante ter um atributo alt significativo por razões de validação e acessibilidade. O atributo alt fornece contexto aos leitores de tela, portanto deve ser descritivo do que a imagem contém.
6. Validar frequentemente
Em vez de esperar até que você termine com seu documento HTML, valide seu código várias vezes à medida que você trabalha. Isso ajudará a economizar algum tempo no final, identificando erros antecipadamente, especialmente se o seu documento for longo. Um validador HTML popular a ser usado é o serviço de validação de marcação do W3C.
7. Coloque folhas de estilo externas dentro da tag <head> tag
Embora as folhas de estilo externas possam ser colocadas em qualquer lugar no documento HTML, é melhor colocá-las dentro da tag <head>. Isto permitirá que sua página seja carregada mais rapidamente.
8. Use tags significativas
Cada secção da sua página web deve ser construída usando a tag HTML5 mais apropriada para o conteúdo. É melhor evitar o uso excessivo de tags genéricas, como <div>, quando poderia haver uma tag mais descritiva para o trabalho, como <section>, <article>, e assim por diante.
9. Use a marcação em minúsculas
A sua marcação HTML pode ser escrita em minúsculas ou em maiúsculas e a página web será renderizada corretamente. No entanto, é melhor manter os nomes das tags em letras minúsculas porque é mais fácil de ler e manter.
10. Reduzir o número de elementos em uma página
HTML documentos pode se tornar complicado, especialmente para páginas web com muito conteúdo. Para reduzir o tamanho de suas páginas, verifique as oportunidades de otimizar ainda mais seu código uma vez terminado o markup.
Quer aprender mais sobre as melhores práticas de HTML? Confira estes outros artigos:
- Melhores Práticas em HTML
- Padrões de Código Front-end &Melhores Práticas
- Escrevendo seu melhor código
Não queira fazer isso você mesmo ou precise de ajuda?
TBH Creative sempre trabalha para se manter atualizado sobre as melhores práticas em desenvolvimento web.