Boas Práticas no HTML5

Estrutura Semântica

Use Elementos Semânticos Sempre Que Possível

Evite usar <div> e <span> quando houver um elemento semântico disponível.

Incorreto	Correto
`<div id="menu">`	`<nav>`
`<div id="header">`	`<header>`
`<div id="conteudo">`	`<main>` ou `<section>`
`<div id="rodape">`	`<footer>`
`<div class="artigo">`	`<article>`

Melhora a legibilidade do código.
Favorece SEO.
Melhora a acessibilidade (leitores de tela entendem melhor a hierarquia do conteúdo).

Acessibilidade

Utilize Sempre o Atributo `alt` nas Imagens

<img src="logo.png" alt="Logotipo da Empresa">

Melhora SEO.
Essencial para usuários com deficiência visual.

Utilize Labels nos Formulários

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Melhora a navegação por teclado e leitores de tela.

Utilize Elementos de Cabeçalho na Ordem Correta

Apenas um <h1> por página (normalmente o título principal).
Siga a hierarquia: <h1> → <h2> → <h3>.

SEO (Search Engine Optimization)

Use Tags Semânticas

Melhora o entendimento dos buscadores sobre a estrutura da página.

Utilize `<title>` e `<meta description>`

<head>
  <title>Serviços de Desenvolvimento Web</title>
  <meta name="description" content="Criamos sites rápidos, responsivos e otimizados.">
</head>

Use Textos Descritivos nos Links

Evite: <a href="servicos.html">Clique aqui</a>
Prefira: <a href="servicos.html">Veja nossos serviços</a>

Utilize Cabeçalhos Bem Estruturados

Isso ajuda mecanismos de busca a entenderem quais são as partes mais importantes do conteúdo.

Performance

Otimize Imagens

Utilize formatos modernos como .webp.
Reduza a resolução para o tamanho adequado.
Comprima as imagens antes de subir para o servidor.

Minimize Recursos

Minifique CSS, JavaScript e HTML.
Utilize CDN quando possível.

Utilize Lazy Loading

Para imagens:

<img src="foto.jpg" loading="lazy" alt="Descrição da imagem">

Melhora performance em páginas longas.

Combine e Adie Scripts

Scripts no fim do <body> ou usando defer:

<script src="script.js" defer></script>

Organização do Código

Indente Corretamente

Utilize 2 ou 4 espaços de indentação (seja consistente).
Nunca misture espaços e tabs.

Escreva Código Limpo

Use nomes de classes e IDs significativos:

<div class="menu-principal"></div>

Evite nomes genéricos como:

<div class="caixa1"></div>

Utilize Comentários Quando Necessário

<!-- Menu de navegação principal -->
<nav>...</nav>

Acessibilidade Avançada

Utilize aria-label e outros atributos ARIA quando necessário.

Exemplo de botão acessível:

<button aria-label="Fechar Menu">X</button>

Utilize contraste adequado entre fundo e texto.
Verifique a acessibilidade utilizando ferramentas como:
- Wave
- Lighthouse

Checklist de Boas Práticas

Estrutura semântica correta.
Uso adequado de <alt>, <label>, <title> e <meta>.
Hierarquia correta de cabeçalhos (h1 a h6).
Otimização de imagens e recursos.
Lazy loading implementado.
Scripts organizados e otimizados.
Acessibilidade validada.
SEO básico aplicado.

Exemplo Prático com Boas Práticas Aplicadas

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Desenvolvimento Web Profissional</title>
  <meta name="description" content="Empresa especializada em desenvolvimento web moderno e acessível.">
</head>
<body>

  <header>
    <h1>Minha Empresa</h1>
    <nav>
      <ul>
        <li><a href="#servicos">Serviços</a></li>
        <li><a href="#sobre">Sobre</a></li>
        <li><a href="#contato">Contato</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="servicos">
      <h2>Serviços</h2>
      <p>Desenvolvimento de sites, aplicações web e SEO.</p>
    </section>

    <section id="sobre">
      <h2>Sobre</h2>
      <p>Empresa com 10 anos de experiência em desenvolvimento web.</p>
    </section>

    <section id="contato">
      <h2>Contato</h2>
      <form action="enviar.php" method="post">
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <button type="submit">Enviar</button>
      </form>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Minha Empresa. Todos os direitos reservados.</p>
  </footer>

</body>
</html>

Conclusão

Aplicar boas práticas no HTML5 não é apenas uma questão estética. É um compromisso com a qualidade, acessibilidade, desempenho, manutenção e otimização do projeto. Um código bem feito entrega uma experiência muito melhor tanto para os usuários quanto para os motores de busca.

Próximo Passo

O próximo módulo aborda Integração com CSS e JavaScript, onde veremos como aplicar estilos, tornar o site interativo e entender a relação entre HTML, CSS e JS no desenvolvimento web moderno.