Aula 03 - Estrutura e Semântica 🧱

Objetivo

Objetivo: Compreender a importância do HTML Semântico para SEO e acessibilidade, e aprender a utilizar as tags corretas para cada parte da estrutura de uma página web moderna.

1. O que é HTML Semântico? 🧐

Semântica é o estudo do significado. No HTML, usar tags semânticas significa escolher etiquetas que descrevem claramente o que o conteúdo é, não apenas como ele deve parecer.

Antigamente (Não Semântico): Usava-se <div> para tudo. O Google e leitores de tela ficavam "cegos".
Hoje (Semântico): Usamos tags como <header>, <nav> e <footer>.

[!DICA] Um site semântico é muito melhor ranqueado no Google e é acessível para pessoas que usam leitores de tela.

2. As Tags de Estrutura Principal 🏗️

Imagine a estrutura de um jornal ou blog:

<header>: O cabeçalho da página ou de uma seção. Geralmente contém o logo e o título principal.
<nav>: Define um conjunto de links de navegação (o menu).
<main>: O conteúdo principal e exclusivo da página. Só deve haver um por página!
<footer>: O rodapé. Contém informações de copyright, contato e links secundários.

📊 Mapa Semântico

graph TD
    BODY[body] --> HEADER[header - Logo/Menu]
    BODY --> MAIN[main - Conteúdo Único]
    BODY --> FOOTER[footer - Info/Rodapé]
    MAIN --> SECTION[section - Bloco de Assunto]
    SECTION --> ARTICLE[article - Conteúdo Independente]
    HEADER --> NAV[nav - Links de Navegação]

3. Entendendo Section e Article 📰

Muitas pessoas confundem essas duas:

<section>: Representa um agrupamento genérico de conteúdo, normalmente com um título. Ex: "Sobre nós", "Nossos Serviços".
<article>: Representa uma composição independente e auto-contida. Se você puder "recortar" esse conteúdo e publicar em outro lugar e ele ainda fizer sentido, use <article>. Ex: Um post de blog, um comentário, um card de produto.

4. Hierarquia de Títulos (h1 a h6) 🔝

Os títulos não servem para aumentar o tamanho da letra (isso é tarefa do CSS!). Eles definem a importância da informação.

<h1>: O assunto principal da página (use apenas UM por página).
<h2> a <h6>: Subtítulos em ordem decrescente de importância.

[!IMPORTANT] Nunca pule níveis! Não passe de um <h1> direto para um <h3>. Siga a escada lógica.

5. Prática: Organizando o Código 🚀

Vamos estruturar um layout profissional no terminal:

$ mkdir aula-03
$ cd aula-03
$ touch index.html
$ # Vamos abrir o arquivo e criar a estrutura semântica básica...

Exemplo de Estrutura Correta:

<body>
    <header>
        <h1>Meu Blog Tech</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Posts</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Destaques</h2>
            <article>
                <h3>O Poder do HTML5</h3>
                <p>Neste post, exploramos a semântica...</p>
            </article>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 - Desenvolvido com ❤️</p>
    </footer>
</body>

6. Mini-Projeto: Estrututra de Notícias 📰

Crie um documento HTML completo.
Adicione um <header> com o nome de um portal de notícias.
Crie um <main> com duas <section>.
Dentro de cada seção, coloque um <article> com um título <h3> e um parágrafo.
Finalize com um <footer>.

7. Exercícios Progressivos 📝

Básicos

Qual a tag usada para definir o menu de navegação?
Quantas vezes devemos usar a tag <h1> em uma única página?

Intermediários

Explique a principal diferença entre a tag <section> e a tag <article>.
Por que usar <div> para tudo é considerado uma má prática hoje em dia?

Desafio 🧠

Pesquise sobre a tag <aside>. Em que situações ela deve ser utilizada em um layout semântico?

Próxima Aula: Vamos aprender a trabalhar com Textos e Links! 🔗