Sites com várias páginas e conteúdo semântico

Navegação blog currículo tabelas e formulários

Transforme uma página isolada em um site organizado e acessível com navegação consistente conteúdos variados e páginas especializadas.

Como usar este capítulo

Você já sabe criar uma página e publicar arquivos estáticos. Agora o projeto crescerá. Cada unidade acrescenta uma página ou um tipo de conteúdo ao Caderno de Trilhas. Faça uma cópia da pasta ao começar; assim você poderá comparar as versões e recuperar um arquivo se algo der errado.

O foco continua sendo HTML. O CSS aparecerá apenas como uma folha pronta ou em ajustes pequenos. O capítulo seguinte explica as regras de estilo com mais profundidade.

Objetivos de aprendizagem

• Estruturar páginas com elementos semânticos.
• Criar navegação consistente e indicar a página atual.
• Resolver caminhos relativos entre pastas.
• Montar uma página Sobre e um blog estático.
• Usar elementos de texto menos básicos sem perder acessibilidade.
• Criar tabelas que expressem dados e cabeçalhos corretamente.
• Estruturar um currículo e um formulário.
• Revisar a experiência de navegação por mouse teclado e leitor de tela.

Sumário

**1. **Estrutura semântica

**2. **Folha de estilo compartilhada

**3. **Página Sobre e navegação

**4. **Caminhos entre pastas

**5. **Blog estático

**6. **Elementos de texto

**7. **Conteúdo expansível e complementar

**8. **Tabelas

**9. **Currículo em HTML

**10. **Formulários acessíveis

**11. **Consistência e manutenção

**12. **Projeto e avaliação

Unidade 1 Estrutura semântica

HTML semântico descreve a função de cada área. Um <header> apresenta uma página ou seção. <nav> reúne links principais. <main> contém o assunto exclusivo daquela página. <footer> encerra o documento ou uma seção. Esses elementos não determinam a aparência; eles criam estrutura compreensível para navegadores, mecanismos de busca e tecnologias assistivas.

HTML

<body>
  <header>
    <h1>Caderno de Trilhas</h1>
    <p>Notas de caminhos, leituras e pequenos projetos.</p>
  </header>

  <nav aria-label="Navegação principal">
    <a href="index.html" aria-current="page">Início</a>
    <a href="sobre.html">Sobre</a>
  </nav>

  <main>
    <h2>Notas recentes</h2>
    <p>Conteúdo principal da página.</p>
  </main>

  <footer>
    <p>Conteúdo atualizado periodicamente.</p>
  </footer>
</body>

Elementos de agrupamento

<section> reúne conteúdo ligado por um assunto e normalmente possui título. <article> representa um conteúdo que faz sentido sozinho, como uma notícia, postagem ou comentário. <aside> guarda informação complementar, e não a ideia central.

HTML

<main>
  <section>
    <h2>Artigos recentes</h2>

    <article>
      <h3>Como planejei uma caminhada curta</h3>
      <p>Resumo do artigo.</p>
    </article>
  </section>

  <aside>
    <h2>Antes de sair</h2>
    <p>Consulte a previsão do tempo.</p>
  </aside>
</main>

Não troque todo <div> por <section>. Use um elemento semântico quando ele descreve de verdade o conteúdo. <div> continua útil como recipiente sem significado próprio, principalmente para layout com CSS.

Um único conteúdo principal

Cada página deve ter um <main> visível. Cabeçalho, navegação e rodapé compartilhados ficam fora dele. Isso permite que tecnologias assistivas saltem diretamente para o assunto principal.

Unidade 2 Folha de estilo compartilhada

Uma folha de estilo externa evita repetir CSS em cada página. Crie a pasta css e o arquivo styles.css. Depois ligue o arquivo dentro de <head>.

HTML

<link rel="stylesheet" href="css/styles.css">

Comece com um CSS curto. Ele cria uma largura confortável, imagens flexíveis e tipografia legível sem exigir classes em cada elemento.

CSS

:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

body {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
}

img,
video {
  max-width: 100%;
  height: auto;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

a[aria-current] {
  font-weight: 700;
}

**DICA: **É possível usar um framework CSS sem classes, mas manter um arquivo próprio ajuda a entender o que muda e reduz dependências externas. Se você usar um framework, baixe uma cópia estável ou siga a documentação oficial da versão escolhida.

Unidade 3 Página Sobre e navegação

Crie sobre.html na mesma pasta de index.html. Copie a estrutura completa da página inicial e altere <title>, <h1> e o conteúdo de <main>.

HTML

<title>Sobre o projeto | Caderno de Trilhas</title>

HTML

<main>
  <h1>Sobre o projeto</h1>
  <p>
    O Caderno de Trilhas reúne anotações de estudo e roteiros de passeios.
    O site serve como exercício de organização de conteúdo na web.
  </p>

  <h2>O que você encontra aqui</h2>
  <ul>
    <li>Artigos curtos.</li>
    <li>Listas de preparação.</li>
    <li>Registros de aprendizado.</li>
  </ul>
</main>

Menu principal

Inclua o mesmo menu nas páginas. Em index.html, indique Início como atual. Em sobre.html, mova o atributo para Sobre.

HTML

<!-- index.html -->
<nav aria-label="Navegação principal">
  <a href="index.html" aria-current="page">Início</a>
  <a href="blog/index.html">Blog</a>
  <a href="sobre.html">Sobre</a>
</nav>

HTML

<!-- sobre.html -->
<nav aria-label="Navegação principal">
  <a href="index.html">Início</a>
  <a href="blog/index.html">Blog</a>
  <a href="sobre.html" aria-current="page">Sobre</a>
</nav>

aria-current="page" informa que o link representa a página aberta. O CSS pode usar esse atributo para criar destaque visual. Não coloque o atributo em mais de um item do mesmo menu.

Figura com legenda

Adicione uma imagem quando ela tiver relação com o conteúdo. Use <figure> e <figcaption> para ligar a legenda à figura.

HTML

<figure>
  <img
    src="imagens/trilha-mirante.webp"
    alt="Caminho estreito cercado por árvores"
    width="1200"
    height="800"
  >
  <figcaption>Início do percurso até o Mirante.</figcaption>
</figure>

Unidade 4 Caminhos entre pastas

Quando uma página entra em uma subpasta, os caminhos relativos mudam. Considere esta estrutura.

PLAINTEXT

caderno-trilhas/
├── index.html
├── sobre.html
├── css/
│   └── styles.css
├── imagens/
│   └── trilha-mirante.webp
└── blog/
    ├── index.html
    └── primeira-caminhada.html

Em index.html, a folha de estilo está abaixo da pasta atual.

HTML

<link rel="stylesheet" href="css/styles.css">

Em blog/index.html, o arquivo precisa subir um nível antes de entrar em css.

HTML

<link rel="stylesheet" href="../css/styles.css">

O mesmo vale para voltar à página Sobre.

HTML

<a href="../sobre.html">Sobre</a>

Caminho relativo e caminho a partir da raiz

Um caminho relativo depende da localização do arquivo atual. Um caminho iniciado por / parte da raiz do site publicado.

HTML

<a href="/sobre.html">Sobre</a>
<link rel="stylesheet" href="/css/styles.css">

Caminhos a partir da raiz facilitam menus compartilhados, mas podem falhar quando você abre o HTML diretamente do disco ou publica o projeto dentro de uma subpasta. Nesta fase, use caminhos relativos. O capítulo de PHP mostrará uma forma de trabalhar com raiz em um servidor local.

Unidade 5 Blog estático

Um blog pode existir sem banco de dados. Crie uma página para listar artigos e um arquivo para cada publicação. A manutenção é manual, mas a estrutura é transparente e adequada para um projeto pequeno.

PLAINTEXT

blog/
├── index.html
├── 2026-09-10-primeira-caminhada.html
└── 2026-09-18-organizando-as-notas.html

Página inicial do blog

Use uma lista de artigos. <time> registra uma data num formato legível por máquinas pelo atributo datetime.

HTML

<main>
  <h1>Notas recentes</h1>

  <article>
    <h2>
      <a href="2026-09-10-primeira-caminhada.html">
        Como planejei uma caminhada curta
      </a>
    </h2>
    <p><time datetime="2026-09-10">10 de setembro de 2026</time></p>
    <p>Um roteiro simples para sair cedo e voltar antes do almoço.</p>
  </article>
</main>

Artigo individual

Um post pode usar <article> como recipiente principal. Coloque o título em <h1>, a data em <time> e as seções em <h2>.

HTML

<main>
  <article>
    <header>
      <h1>Como planejei uma caminhada curta</h1>
      <p><time datetime="2026-09-10">10 de setembro de 2026</time></p>
    </header>

    <p>A preparação começou com um mapa simples e uma previsão do tempo.</p>

    <h2>Escolha do percurso</h2>
    <p>O trajeto precisava caber no tempo disponível e ter saída conhecida.</p>

    <p><a href="index.html">Voltar para o blog</a></p>
  </article>
</main>

Ordem das publicações

Em um blog estático, você decide a ordem no HTML da listagem. Colocar a data no nome do arquivo ajuda a ordenar arquivos, mas o navegador não cria a lista automaticamente. Quando publicar um artigo, atualize também blog/index.html.

Unidade 6 Elementos de texto

Citações

Use <blockquote> para uma citação em bloco. O atributo cite pode guardar a URL da fonte, mas ele normalmente não fica visível; forneça a origem também no texto.

HTML

<blockquote cite="https://example.com/texto">
  <p>A melhor rota é aquela que você consegue concluir com segurança.</p>
  <footer><cite>Guia de caminhada de demonstração</cite></footer>
</blockquote>

Para uma obra ou título citado no meio do texto, use <cite>. Para uma frase curta, use <q>.

HTML

<p>O guia recomenda <q>começar pelo percurso conhecido</q>.</p>

Código e texto pré formatado

<code> identifica código. <pre> preserva espaços e quebras. Combine os dois para um bloco.

HTML

<pre><code>&lt;h1&gt;Caderno de Trilhas&lt;/h1&gt;</code></pre>

No conteúdo textual, escape os sinais < e > para que o navegador não tente interpretar a demonstração como marcação.

Abreviações e definições

HTML

<p><abbr title="HyperText Markup Language">HTML</abbr> estrutura a página.</p>
<p><dfn>URL</dfn> é o endereço de um recurso na web.</p>

O atributo title não substitui uma explicação visível. Ele pode ser difícil de acessar em telas sensíveis ao toque. Explique termos importantes no próprio texto.

Marcação de alterações

<mark> destaca um trecho relevante no contexto. <del> indica algo removido e <ins> algo inserido.

HTML

<p>Horário: <del>8h</del> <ins>7h30</ins>.</p>
<p>Leve <mark>dois litros de água</mark> em dias quentes.</p>

Não use essas tags apenas para escolher cor. O significado deve fazer sentido mesmo sem CSS.

Separação temática

<hr> representa uma mudança de assunto dentro de um conteúdo. Não é uma ferramenta genérica para desenhar linhas. Para bordas decorativas, use CSS.

Unidade 7 Conteúdo expansível e complementar

<details> cria uma área que pode ser aberta e fechada. <summary> define o controle visível. O navegador fornece interação por mouse e teclado sem JavaScript.

HTML

<details>
  <summary>O que levar numa caminhada curta</summary>
  <p>Água, proteção solar, documento e mapa salvo no telefone.</p>
</details>

Use essa dupla para perguntas frequentes, detalhes opcionais e explicações longas. Não esconda uma informação necessária para concluir uma tarefa.

Conteúdo complementar

<aside> é apropriado quando o trecho tem relação com o conteúdo, mas pode ser removido sem quebrar a ideia principal.

HTML

<aside>
  <h2>Vocabulário</h2>
  <p>Desnível é a diferença de altitude ao longo do percurso.</p>
</aside>

Se o texto faz parte do argumento central, use um parágrafo ou uma seção comum.

Unidade 8 Tabelas

Tabelas servem para dados que precisam ser comparados por linhas e colunas. Não use <table> para montar o layout de uma página.

HTML

<table>
  <caption>Comparação de percursos</caption>
  <thead>
    <tr>
      <th scope="col">Percurso</th>
      <th scope="col">Distância</th>
      <th scope="col">Nível</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Mirante</th>
      <td>4 km</td>
      <td>Leve</td>
    </tr>
    <tr>
      <th scope="row">Cachoeira</th>
      <td>9 km</td>
      <td>Moderado</td>
    </tr>
  </tbody>
</table>

<caption> identifica a tabela. <thead> agrupa o cabeçalho e <tbody> agrupa os dados. <tr> cria uma linha, <th> uma célula de cabeçalho e <td> uma célula de dado. scope="col" e scope="row" tornam a relação mais explícita para leitores de tela.

Células combinadas

colspan faz uma célula ocupar colunas; rowspan faz ocupar linhas. Use com cautela, pois tabelas muito complexas são difíceis de entender em tela pequena e com tecnologia assistiva.

HTML

<tr>
  <th colspan="3">Percursos de fim de semana</th>
</tr>

Quando os dados não precisam de comparação entre eixos, uma lista ou conjunto de parágrafos costuma ser mais claro.

Unidade 9 Currículo em HTML

Um currículo web combina seções, datas, listas e links. O exemplo é fictício e serve apenas para praticar marcação.

HTML

<main>
  <article>
    <header>
      <h1>Currículo de demonstração</h1>
      <p>Desenvolvimento web e produção de conteúdo.</p>
    </header>

    <section>
      <h2>Conhecimentos</h2>
      <ul>
        <li>HTML semântico</li>
        <li>CSS responsivo</li>
        <li>Acessibilidade básica</li>
      </ul>
    </section>

    <section>
      <h2>Projetos selecionados</h2>
      <article>
        <h3>Caderno de Trilhas</h3>
        <p>Site estático criado durante este curso.</p>
      </article>
    </section>
  </article>
</main>

Datas e contato

Use <time> quando a data ou período for relevante. <address> identifica informações de contato relacionadas ao autor da página ou do artigo; ele não serve para qualquer endereço postal mencionado no texto.

HTML

<p><time datetime="2024-03">Março de 2024</time> até o presente</p>

<address>
  <a href="mailto:contato@example.com">contato@example.com</a>
</address>

Preparar para impressão

A mesma página pode receber regras @media print para esconder navegação e remover fundos. Não coloque dados sensíveis no arquivo esperando que o CSS os esconda; código e conteúdo continuam disponíveis.

CSS

@media print {
  nav,
  footer {
    display: none;
  }

  body {
    max-width: none;
    color: #000;
    background: #fff;
  }
}

Unidade 10 Formulários acessíveis

Um formulário recolhe dados, mas o HTML sozinho não decide onde eles serão guardados. O atributo action aponta o endereço que processará o envio, e method define como os dados serão transmitidos.

HTML

<form action="/enviar-contato" method="post">
  <p>
    <label for="nome">Nome</label>
    <input id="nome" name="nome" type="text" autocomplete="name" required>
  </p>

  <p>
    <label for="email">E-mail</label>
    <input id="email" name="email" type="email" autocomplete="email" required>
  </p>

  <p>
    <label for="mensagem">Mensagem</label>
    <textarea id="mensagem" name="mensagem" rows="6" maxlength="1000" required></textarea>
  </p>

  <button type="submit">Enviar mensagem</button>
</form>

Label id e name

for="email" no <label> aponta para id="email" no campo. Essa associação permite clicar no rótulo para focar o controle e faz o leitor de tela anunciar o nome correto. name é a chave enviada ao servidor.

Tipos de campo

Para opções relacionadas, use <fieldset> e <legend>.

HTML

<fieldset>
  <legend>Como prefere receber a resposta</legend>

  <label>
    <input type="radio" name="resposta" value="email" checked>
    E-mail
  </label>

  <label>
    <input type="radio" name="resposta" value="telefone">
    Telefone
  </label>
</fieldset>

Validação

required, minlength, maxlength, min, max e pattern criam restrições no navegador. Eles ajudam a pessoa a corrigir o preenchimento, mas não protegem o servidor. Todo dado recebido precisa ser validado novamente no lado do servidor.

HTML

<input
  id="codigo"
  name="codigo"
  type="text"
  minlength="4"
  maxlength="12"
  required
>

**ATENÇÃO: **Nunca confie em dados enviados pelo navegador. Validação em HTML melhora a experiência, mas pode ser contornada. O sistema que recebe os dados deve validar, limitar e tratar cada valor.

Unidade 11 Consistência e manutenção

Em um site estático, o menu costuma ser repetido em todas as páginas. Quando adicionar um item, procure por <nav na pasta inteira e atualize cada ocorrência. O editor permite busca e substituição entre arquivos.

Lista de páginas

Navegação por teclado

Use Tab para percorrer links, botões e campos. O foco precisa ser visível. A ordem deve seguir a leitura da página. Ative um link com Enter e um botão com Enter ou Espaço. Se algum controle depende apenas do mouse, há um problema.

Conteúdo sem estilo

Desative temporariamente o CSS nas ferramentas do navegador. A página ainda deve ter títulos em ordem, listas coerentes, rótulos e uma sequência de leitura natural. Essa prova simples mostra se o HTML carrega o significado, em vez de depender da aparência.

Atualização no servidor

Ao publicar novas páginas, envie também a navegação modificada, o CSS e as imagens usadas. Se o site possui cinco cópias do menu e só quatro foram atualizadas, a experiência ficará inconsistente.

Unidade 12 Projeto e avaliação

Etapa prática

Amplie o projeto iniciado na primeiro capítulo. Crie:

• sobre.html com objetivo do site e uma figura com legenda.
• blog/index.html com ao menos dois artigos listados.
• Um arquivo de artigo dentro de blog.
• curriculo.html com conteúdo fictício ou informações que você tenha autorização para publicar.
• contato.html com nome e mail mensagem e botão.
• Uma navegação consistente em todas as páginas.
• Uma tabela simples com legenda e cabeçalhos.
• Um bloco <details> com informação opcional.

Teste de caminhos

Abra cada página e confirme:

**1. **O CSS carrega tanto na raiz quanto na pasta blog.

**2. **Todos os itens do menu abrem o destino correto.

**3. **A página atual recebe aria-current="page".

**4. **Imagens continuam visíveis nas subpastas.

**5. **O link de volta ao blog funciona dentro do artigo.

Questões de revisão

**1. **Qual é a diferença entre <section> e <article>?

**2. **Por que <main> não deve envolver o menu compartilhado?

**3. **O que muda no caminho do CSS quando a página está dentro de blog?

**4. **Para que serve aria-current="page"?

**5. **Quando usar <blockquote>?

**6. **Por que <table> não deve montar o layout da página?

**7. **Qual é a função de scope="col" em um <th>?

**8. **Como o <label> se liga a um campo?

**9. **Por que a validação do navegador não substitui a validação no servidor?

Respostas comentadas

**1. **<section> agrupa uma parte temática; <article> representa conteúdo independente que pode ser lido ou distribuído sozinho.

**2. **<main> guarda o conteúdo principal exclusivo. Menu, cabeçalho global e rodapé repetem-se entre páginas.

**3. **O caminho precisa subir um nível: ../css/styles.css.

**4. **Ele identifica o item que representa a página aberta para pessoas e tecnologias assistivas.

**5. **Quando uma citação longa precisa ser separada do parágrafo ao redor.

**6. **Tabela expressa relações entre dados; usá-la para layout mistura apresentação com estrutura e prejudica adaptação e acessibilidade.

**7. **Informa que a célula é cabeçalho de uma coluna.

**8. **O for do <label> recebe o mesmo valor do id do controle.

**9. **A validação no navegador pode ser desativada ou contornada; o servidor deve tratar todo valor recebido como não confiável.

Referências técnicas