Pular para conteúdo

Aula 03 - Estrutura e Semântica 🧱

Organizando a Web com Significado

👋 Olá!

Hoje vamos aprender a diferença entre um site "amador" e um site profissional.

A palavra mágica de hoje é: Semântica. 🧠

Agenda de Hoje 📅

  1. O que é HTML Semântico?
  2. Tags de Estrutura
  3. O Conteúdo (Section vs Article)
  4. Hierarquia de Títulos (H1-H6)
  5. Acessibilidade e SEO
  6. Prática Profissional

1. O que é Semântica? 🧐

  • Na linguística: o estudo do significado.
  • No HTML: escolher a tag que descreve o que o conteúdo é.

Antes vs Depois 🔄

  • Antes: Tudo era <div> (sem significado).
  • Hoje: Cada parte tem seu nome correto (<header>, <main>, <footer>).

🚀 Por que usar Semântica?

  • SEO: O Google entende melhor seu site.
  • Acessibilidade: Leitores de tela para cegos funcionam melhor.
  • Manutenção: Código muito mais fácil de ler.

🏗️ 2. Tags de Estrutura

Header (Cabeçalho) 顶部

  • Fica no topo da página ou de seções.
  • Contém logos, títulos e navegação.
  • Bloco que contém os links principais do site.
  • Menu superior ou lateral.

Main (Conteúdo Principal) 🏠

  • O "recheio" exclusivo da sua página.
  • REGRA: Apenas UM <main> por página!
  • Final da página.
  • Direitos autorais, contato, redes sociais.

📊 Arquitetura Visual

graph TD
    BODY[body] --> H[header]
    BODY --> M[main]
    BODY --> F[footer]
    H --> N[nav]

📰 3. Section vs Article

A grande dúvida!

Section (Seção) 📦

  • Um agrupamento temático de conteúdo.
  • Geralmente tem um título próprio.
  • Ex: "Nossos Preços", "Sobre a Empresa".

Article (Artigo) 📝

  • Conteúdo que faz sentido sozinho.
  • Pode ser "reutilizado" em outro lugar.
  • Ex: Post de blog, notícia, comentário.

🔝 4. Hierarquia de Títulos

H1 ao H6

A Regra de Ouro 👑

  • H1: O título mais importante. Use apenas um!
  • H2-H6: Subtítulos organizados por importância.

Não use para Estilo! ❌

  • Títulos definem a estrutura, não o tamanho da letra.
  • Para mudar tamanho e cor, usamos CSS futuramente.

📊 Exemplo de Hierarquia

  • H1: Receitas Iniciais
    • H2: Sobremesas
      • H3: Pudim de Leite
      • H3: Mousse de Chocolate
    • H2: Pratos Salgados

👨‍💻 5. Código Real

<header>
  <h1>Logo</h1>
  <nav>Menu</nav>
</header>
<main>
  <article>Conteúdo</article>
</main>
<footer>Rodapé</footer>

Resumo da Aula ✅

  • Semântica = Significado.
  • Tags Estruturais = Header, Main, Footer.
  • Conteúdo = Section e Article.
  • Títulos = Escada lógica (H1 -> H6).

Próxima Aula 🔗

Vamos aprender a conectar o mundo com Hyperlinks!

Dúvidas? 🤔

"Um código bem estruturado é como um livro bem escrito: qualquer um consegue entender a história."