header, nav, main, footer: as regiões do portfólio · HTML do zero

O problema que a semântica resolve

Estas duas páginas parecem iguais na tela:

<!-- Sem significado -->
<div class="topo">
  <div class="menu">...</div>
</div>
<div class="conteudo">...</div>
<div class="rodape">...</div>

<!-- Com significado -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

Para quem enxerga, são idênticas. Para todo o resto, não:

um leitor de tela oferece um atalho para saltar direto ao <main>, pulando o menu: e na primeira versão não há <main> para onde saltar;
o buscador entende qual parte é conteúdo e qual é navegação repetida;
o modo leitura do navegador extrai o <main> e ignora o resto.

Nomes de classe como class="conteudo" não significam nada: você poderia escrever class="banana" e o navegador trataria igual.

As regiões

Este é o esqueleto de todas as seis páginas do seu portfólio:

<body>
  <a href="#conteudo">Pular para o conteúdo</a>

  <header>
    <nav aria-label="Menu principal">
      <ul>
        <li><a href="index.html">Início</a></li>
        <li><a href="sobre.html">Sobre</a></li>
        <li><a href="portfolio.html">Portfólio</a></li>
        <li><a href="stack.html">Stack</a></li>
        <li><a href="carreira.html">Carreira</a></li>
        <li><a href="contato.html">Contato</a></li>
      </ul>
    </nav>
  </header>

  <main id="conteudo">
    <h1>Marina Sales</h1>
    <p>Desenvolvedora web em formação</p>

    <section aria-labelledby="projetos">
      <h2 id="projetos">Projetos selecionados</h2>

      <article>
        <h3>Feira do produtor</h3>
        <p>Os horários das bancas, numa página que abre em dois segundos.</p>
        <a href="portfolio.html#feira">Ver o estudo de caso</a>
      </article>

      <article>
        <h3>Horário do barco</h3>
        <p>Uma tabela de saídas que dá para ler em pé, no porto, no celular.</p>
        <a href="portfolio.html#barco">Ver o estudo de caso</a>
      </article>
    </section>
  </main>

  <footer>
    <p>Construo páginas leves, no Alto Solimões.</p>

    <nav aria-label="Navegação do rodapé">
      <ul>
        <li><a href="sobre.html">Sobre</a></li>
        <li><a href="contato.html">Contato</a></li>
      </ul>
    </nav>

    <nav aria-label="Redes sociais">
      <ul>
        <li><a href="https://github.com/marinasales">GitHub</a></li>
        <li><a href="https://www.linkedin.com/in/marinasales">LinkedIn</a></li>
      </ul>
    </nav>

    <p>© 2026 Marina Sales. Todos os direitos reservados.</p>
  </footer>
</body>

Tag	O que significa
`<header>`	o topo: de uma página ou de um artigo
`<nav>`	um bloco de navegação
`<main>`	o conteúdo principal, um por página
`<article>`	conteúdo que faz sentido sozinho
`<section>`	uma parte temática de algo maior
`<aside>`	conteúdo relacionado, mas não essencial
`<footer>`	o rodapé: de uma página ou de um artigo

Repare nos dois <nav> do rodapé, cada um com o seu aria-label. Sem nome, os três blocos de navegação da página seriam anunciados como "navegação, navegação, navegação".

`section` ou `article`?

O teste: isto faria sentido publicado sozinho?

Um cartão de projeto, um cargo na trajetória, um depoimento → <article>
"Sobre", "Como trabalho", "Projetos selecionados" → <section>

Um <article> pode ter <header> e <footer> próprios. É a forma do cartão de projeto completo, com tudo o que as aulas 4, 6 e 7 construíram:

<article id="feira">
  <header>
    <h3>Feira do produtor</h3>
    <p>2026 · estrutura, estilo e publicação</p>
  </header>

  <figure>
    <img
      src="imagens/feira.png"
      alt="Página do site da feira mostrando os horários das bancas por dia"
      width="1200"
      height="750"
    />
    <figcaption>A página inicial, numa tela de celular.</figcaption>
  </figure>

  <p>
    Uma página que responde à pergunta mais feita no grupo do bairro: que dia
    abre e a que horas.
  </p>

  <dl>
    <dt>Situação</dt>
    <dd>No ar</dd>
    <dt>Feito com</dt>
    <dd>HTML</dd>
    <dd>CSS</dd>
  </dl>

  <footer>
    <a href="https://marinasales.github.io/feira/">Abrir o site da feira</a>
  </footer>
</article>

O `aria-labelledby` da seção

<section aria-labelledby="projetos">
  <h2 id="projetos">Projetos selecionados</h2>
  ...
</section>

O atributo aponta para o id do título e diz: o nome desta região é aquele texto. Com ele, o leitor de tela lista "região: Projetos selecionados" no menu de regiões da página, e a pessoa salta direto.

É um atributo por seção e resolve a navegação de uma página inicial longa, que é exatamente o formato de um portfólio.

E a `<div>`?

Continua existindo, e é útil. Ela não significa nada: e é exatamente por isso que serve quando não há significado a expressar, e você só precisa agrupar elementos para posicioná-los com CSS.

<!-- Errado: main é conteúdo principal, não um invólucro qualquer -->
<main class="cartao">
  <p>Ano</p>
</main>

<!-- Certo: agrupar para estilizar, sem inventar significado -->
<div class="cartao">
  <p>Ano</p>
</div>

No curso de CSS você vai precisar de algumas <div> de agrupamento - a que centraliza o conteúdo numa largura máxima, a que envolve o par imagem-texto de um cartão. Elas são legítimas: existem para o layout, e não fingem significar nada.

Pular para o conteúdo

Um atalho pequeno que muda a vida de quem navega por teclado:

<body>
  <a href="#conteudo" class="pular">Pular para o conteúdo</a>

  <header>...menu com seis links...</header>

  <main id="conteudo">...</main>
</body>

Sem ele, quem usa só o teclado precisa passar pelos seis links do menu em toda página antes de chegar ao texto - e são seis páginas. O link costuma ficar escondido até receber foco: e isso é CSS, no curso seguinte, na aula de estados.

No portfólio

Hoje o portfólio inteiro é reescrito por dentro, sem mudar uma palavra do texto:

em cada uma das seis páginas, envolva o conteúdo em <header>, <main id="conteudo"> e <footer>;
o link "Pular para o conteúdo" como primeiro elemento do <body>;
cada <nav> com o seu aria-label: menu principal, rodapé, redes;
cada seção da inicial em <section aria-labelledby="...">, com o id no <h2>;
cada projeto e cada cargo em <article>;
o rodapé completo: sua frase, os dois <nav> e a linha de copyright.

Depois abra o modo leitura do navegador em cada página. Se o que aparece é o seu conteúdo e nada do menu, a semântica está certa. Se aparece vazio, falta o <main>.

Exercícios

Reescreva as seis páginas com <header>, <main>, <footer> e o link de pular.
Transforme cada cartão de projeto num <article> com <header> e <footer> próprios.
Ponha aria-label nos três <nav> do portfólio.
Decida, para cada um destes, se é <section> ou <article>: um cargo da sua trajetória, a seção "Ferramentas", um projeto, a seção "Canais diretos".
Abra o modo leitura do navegador em cada página. O que aparece é o conteúdo?
Procure no seu HTML alguma tag semântica que você escolheu pela aparência dela. Troque por <div> e uma classe.

Referências

Estrutura de documento - MDN - as regiões e quando usar cada uma
<section> vs <article> - MDN - o critério de independência
HTML Semantic Elements - W3Schools - a lista completa, com exemplos