Capítulo 2: Estrutura HTML

Fundamentos da Estrutura HTML

Hierarquia HTML: Todo documento HTML segue uma estrutura hierárquica rígida, como uma árvore genealógica. Cada elemento tem seu lugar específico e todos devem estar organizados corretamente.

1. A Estrutura Obrigatória do HTML

Todo documento HTML deve começar com esta estrutura básica:

<!DOCTYPE html> - Informa ao navegador que é HTML5

<html> - Elemento raiz (pai de todos)

<head> - Informações sobre a página (não visíveis)

<title> - Título que aparece na aba do navegador
<meta> - Informações sobre codificação, etc.

<body> - Todo o conteúdo visível da página

<h1>, <p>, <header>, etc.

📋 Modelo Base de Todo HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Título da Página</title>
  </head>
  <body>
    <!-- Todo conteúdo visível vai aqui -->
  </body>
</html>
                

Regra de Ouro: Todos os elementos filho devem estar indentados (com espaço/Tab) em relação ao elemento pai. Isso torna o código legível e profissional.

2. Elementos Semânticos - Organizando o Conteúdo

Dentro do <body>, usamos elementos semânticos para dar significado e estrutura ao conteúdo:

Cabeçalho do site
Geralmente contém logo, título principal e navegação principal.

<nav>

Menu de navegação
Links para outras páginas ou seções do site.

<main>

Conteúdo principal
O conteúdo mais importante da página.

Seções do conteúdo
Divide o conteúdo em partes lógicas.

<aside>

Conteúdo lateral
Informações complementares ou barras laterais.

Rodapé do site
Informações de contato, copyright, links extras.

🏗️ Exemplo de Estrutura Semântica Completa:

<body>
  <header>
    <h1>Nome do Site</h1>
    <nav>Menu de Navegação</nav>
  </header>
  
  <main>
    <section>
      <h2>Primeira Seção</h2>
      <p>Conteúdo da seção...</p>
    </section>
  </main>
  
  <footer>
    <p>© 2025 Meu Site</p>
  </footer>
</body>
                

3. Elementos de Título e Parágrafo

Para organizar o conteúdo textual, usamos uma hierarquia de títulos:

<h1> - Título principal da página (apenas um por página)

<h2> - Subtítulos das seções principais

<h3> - Subtítulos das subseções

<p> - Parágrafos de texto

📝 Exemplo de Hierarquia de Títulos:

<main>
  <section>
    <h2>Sobre Nós</h2>
    <p>Somos uma empresa dedicada...</p>
    
    <section>
      <h3>Nossa História</h3>
      <p>Fundada em 2020...</p>
    </section>
  </section>
</main>
                

🎯 Prepare-se para os Exercícios!

Agora você vai praticar criando:

Exercício 1: A estrutura HTML básica com DOCTYPE, html, head e body
Exercício 2: Uma página com elementos semânticos (header, nav, main, footer)
Exercício 3: Hierarquia completa com seções e subseções organizadas

Prática: Criando Estruturas HTML Profissionais

Agora é hora de colocar a mão na massa! Cada exercício abaixo pratica exatamente o que você aprendeu na teoria.

Aula Atual: Estrutura Básica HTML
💡 Dica: Observe como cada exercício aplica os conceitos que você acabou de aprender! Importante: as tags html e body não podem ser usadas no exercício abaixo porque o browser interpreta como uma nova página a ser criada.