HTML Semântico e Estrutura da Página

Até agora, você aprendeu como construir elementos em uma página web. Agora, vamos melhorar como seu conteúdo é estruturado e compreendido.

O que é HTML Semântico?

HTML semântico significa utilizar elementos que descrevem claramente o propósito do seu conteúdo. Em vez de usar contêineres genéricos como <div>, utilize tags significativas como:

• <header>;
• <nav>;
• <section>;
• <article>;
• <footer>.

Por que isso é importante

• Auxilia navegadores e desenvolvedores a entenderem a estrutura da sua página;
• Melhora a acessibilidade (leitores de tela dependem disso);
• Ajuda os mecanismos de busca a interpretarem melhor o seu conteúdo.

Elementos Semânticos Comuns

<header>

Representa a parte superior de uma página ou seção (logo, título, navegação).

<header>
  <h1>My Website</h1>
</header>

<nav>

Define links de navegação.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

<section>

Agrupa conteúdos relacionados.

<section>
  <h2>Services</h2>
  <p>We offer web development...</p>
</section>

<article>

Representa conteúdo independente (por exemplo, postagem de blog).

<article>
  <h2>Blog Post</h2>
  <p>Content goes here...</p>
</article>

<footer>

Define a parte inferior de uma página.

<footer>
  <p>&copy; My Website</p>
</footer>

Como fica tudo junto