Módulo 7 de 21
🏛️

Módulo 7: Semântica e Estrutura Profissional

2. Resumo da Aula Anterior

No último módulo, aprendeste a criar a porta de comunicação com o utilizador: os Formulários. Agora que já sabemos adicionar todo o tipo de conteúdo, precisamos de aprender a dar-lhe sentido profundo. Escrever HTML semântico é o que separa um amador de um mestre da web.

3. O Que Vais Aprender Hoje

Nesta aula, vais aprender a construir a "Espinha Dorsal" de um site moderno e acessível:

4. Teoria: O Código Com Significado

O Problema do "Divitis"

Antigamente, tudo era feito com <div>. Uma div é uma caixa genérica; para o Google, ela não significa nada. O HTML5 introduziu tags que explicam o que está lá dentro, permitindo que robôs e leitores de ecrã "vejam" a estrutura do teu site.

A Espinha Dorsal

  • <header>: Não é apenas o topo do site. Pode ser o topo de um artigo também! Contém introduções e navegação.
  • <nav>: Apenas para os blocos de links de navegação principais.
  • <main>: O conteúdo único daquela página. Só deve existir um por página!
  • <aside>: Conteúdo relacionado, mas não vital (barras laterais, anúncios, curiosidades).
  • <footer>: Informações de autor, copyright e links secundários.

🗞️ Analogia: O Jornal de Papel

Imagina um jornal clássico:

  • <article>: Uma notícia completa. Se a recortares do jornal, ela ainda faz sentido sozinha.
  • <section>: Uma secção do jornal (Desporto, Economia) ou uma parte da notícia (Entrevistas, Estatísticas).
  • <time>: A data da edição impressa de forma que um arquivo digital a consiga classificar.

Regra de Ouro: Div para Estilo, Tags para Sentido

Só deves usar uma <div> se não houver nenhuma outra tag que descreva o conteúdo e se precisares dela apenas para aplicar cores ou posicionamento com CSS.

5. Exemplos de Código

Exemplo 1: Página de Blog Semântica

<header>
  <h1>Blog do Dev</h1>
  <nav>...</nav>
</header>

<main>
  <article>
    <header>
      <h2>Aprenda HTML5</h2>
      <time datetime="2025-05-20">20 de Maio</time>
    </header>
    <p>Conteúdo do post...</p>
  </article>
  <aside>Newsletter e Anúncios</aside>
</main>

Exemplo 2: A Tag Time

<!-- Para humanos: 15h -->
<!-- Para máquinas: 2025-12-25T15:00 -->
<time datetime="2025-12-25T15:00">Natal às 15:00</time>

6. Agora é a Tua Vez! (Estruturando um Artigo)

Vamos transformar um texto simples numa estrutura profissional. Segue estes passos:

  1. Raiz: Cria um elemento <main> para conter a tua página.
  2. Artigo: Dentro do main, cria um <article> sobre o teu hobby favorito.
  3. Cabeçalho do Artigo: Dentro do artigo, usa um <header> com o título (h1) e a data (time).
  4. Corpo: Divide o teu texto em duas <section>: uma para "Origens" e outra para "Como Praticar".
  5. Extra: Adiciona um <aside> fora do artigo mas dentro do main com um link para "Saber Mais".
  6. Rodapé: Termina a página (fora do main) com um <footer> contendo os teus contactos.

7. Verificação de Conhecimento

O Google está a observar! Mostra que sabes dar sentido ao teu código.

Carregando quiz...

8. Resumo do Que Aprendemos

9. Desafios Práticos

Desafio 1: O Detetive de Sidebars

Se tiveres de colocar links de "Posts Relacionados" no fim de um artigo, que tag usarias?

Solução: A tag <aside> é perfeita para isso, ou uma <section> dentro do artigo chamada "Conteúdo Relacionado".

Desafio 2: Div vs Section

Um designer pede-te para criar uma caixa apenas para colocar uma borda vermelha à volta de 3 parágrafos aleatórios. Usas section ou div?

Solução: Usas <div>! Se a caixa serve apenas para "efeito visual" e não agrupa um tema lógico, a div é a escolha certa.

Desafio 3: O Endereço

Pesquisa qual é a tag semântica específica para indicar informações de contacto de um autor ou empresa.

« Aula Anterior Próxima Aula »