DS & II

capitulo_10_semantica

Leitura de 2 min

Capítulo 10: As Divisões do Reino (Semântica) 🏛️🗺️

Neste capítulo, vamos aprender a usar as tags semânticas do HTML5 para dar sentido e organização à estrutura da nossa página, usando o tema As Províncias do Império!

📖 O que é Semântica?

Escrever código semântico significa usar a tag certa para a coisa certa! Em vez de usar <div> (que não significa nada) para tudo, o HTML5 trouxe tags que dizem exatamente o que são:

  • <header>: O topo da página (onde fica o logo e o menu).
  • <nav>: A área de navegação (os links do menu).
  • <main>: O conteúdo principal da página (o mais importante).
  • <article>: Um conteúdo independente (como um post de blog ou notícia).
  • <section>: Um grupo de conteúdos relacionados.
  • <footer>: O rodapé da página (direitos autorais, contato).

📖 Exemplo Guiado: O Castelo Organizado

Vamos estruturar uma página completa usando semântica.

  1. Crie o arquivo castelo.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Meu Castelo</title>
</head>
<body>
    <header>
        <h1>Castelo de Camelot</h1>
        <nav>
            <a href="#">Início</a> | <a href="#">Sobre</a>
        </nav>
    </header>
 
    <main>
        <section>
            <h2>Sala do Trono</h2>
            <p>Onde o Rei toma as decisões.</p>
        </section>
 
        <section>
            <h2>Os Estábulos</h2>
            <p>Onde ficam os cavalos.</p>
        </section>
    </main>
 
    <footer>
        <p>&copy; 2026 Reino de Camelot. Todos os direitos reservados.</p>
    </footer>
</body>
</html>

📊 Ilustração Visual: Layout Semântico

graph TD
    A[header] --> B[nav]
    A --> C[main]
    C --> D[section 1]
    C --> E[section 2]
    C --> F[footer]

🛠️ Prática Obrigatória 1: Estrutura do Seu Site

Crie um arquivo chamado meu_site.html. Crie uma estrutura contendo <header>, <main> e <footer>. Dentro do main, coloque uma <section> com um título e um parágrafo!

🔑 Gabarito de Código

Prática 1: meu_site.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Meu Site Semântico</title>
</head>
<body>
    <header>
        <h1>Blog do Herói</h1>
    </header>
 
    <main>
        <section>
            <h2>Minha Primeira Postagem</h2>
            <p>Hoje comecei a aprender HTML5 semântico!</p>
        </section>
    </main>
 
    <footer>
        <p>Criado por um futuro Dev.</p>
    </footer>
</body>
</html>

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo X) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.
  3. ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
  4. No Microsoft Teams:
    • Copie o link do seu repositório.
    • Cole na tarefa correspondente no Teams.
    • Clique em Entregar.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks