Texto e links

A Oficina da Lia é um ateliê fictício de papelaria em Olinda. Neste volume você termina uma etapa pequena do site. Abra exemplos/03-texto-links/index.html. Use a cópia inicio/ para experimentar e os arquivos ao lado para comparar.

O que você vai aprender

• Criar títulos e listas.
• Ligar três páginas e marcar a página atual.

Texto: títulos, parágrafos e listas

O h1 diz o assunto daquela página. Não repita o mesmo h1 em todas as páginas só para “ficar grande”. h2 abre seções dentro do main.

<h1>Oficina da Lia</h1>
<p>Cadernos costurados à mão no Alto da Sé, em Olinda.</p>
<ul>
  <li>Encadernação</li>
  <li>Papéis coloridos</li>
  <li>Kits de carta</li>
</ul>

Lista numerada usa ol quando a ordem importa. blockquote marca citação longa.

Pare e experimente. Copie a lista da página. Mude apenas ul para ol nas duas tags. Preveja os marcadores, recarregue e confira. Restaure ul se a ordem não importar.

Semântica em linha

strong é importância. em é ênfase. abbr explica sigla. time marca data. code marca trecho de código. Não use essas tags só para deixar itálico: isso é CSS.

<p>A oficina abre de <time datetime="2026-09-14">14 de setembro de 2026</time>.</p>

Pare e experimente. Copie o parágrafo com time para index.html. Mude apenas o texto visível da data, preveja e confira. Veja no editor que datetime não mudou; restaure a data para não deixar duas informações diferentes.

Links

O elemento a precisa de href. Caminho relativo aponta para outro arquivo da mesma pasta: sobre.html. Caminho absoluto começa com https:// e sai do seu disco.

<nav aria-label="Principal">
  <ul>
    <li><a href="index.html" aria-current="page">Início</a></li>
    <li><a href="sobre.html">Sobre</a></li>
    <li><a href="contato.html">Contato</a></li>
  </ul>
</nav>

aria-current="page" marca o item da página atual. Em target="_blank", acrescente rel="noopener noreferrer".

Erro comum: href="#" em todo o menu. O aluno clica e não vai a lugar nenhum. Cada item precisa do arquivo correspondente.

Pare e experimente. Copie o link Sobre do exemplo. Mude só o href para ausente.html. Preveja o destino, clique, confira a falha e restaure sobre.html antes de avançar.

Atividades

1. Onde muda o título da aba?
2. O link Sobre abre qual arquivo?
3. Quando uma lista precisa de ordem?
4. Onde fica aria-current?

Respostas comentadas

1. Em title, no head; h1 nomeia o conteúdo visível.
2. sobre.html na mesma pasta; confira o caminho antes de recarregar.
3. Quando a sequência importa; use ol.
4. Só no link da página atual, não em todo o menu.

O arquivo completo

Referência do exemplo 03-texto-links, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Oficina da Lia</title>
  
<style>img,input,select,textarea{max-width:100%;height:auto}fieldset{min-width:0}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}body{overflow-wrap:anywhere}</style></head>
<body>
  <a class="saltar" href="#conteudo">Saltar para o conteúdo</a>
  <header class="topo">
    <p class="marca"><a href="index.html">Oficina da Lia</a></p>
    <nav aria-label="Principal">
      <ul class="menu">
        <li><a href="index.html" aria-current="page">Início</a></li>
        <li><a href="sobre.html">Sobre</a></li>
        <li><a href="contato.html">Contato</a></li>
      </ul>
    </nav>
  </header>
  <main id="conteudo" tabindex="-1"><h1>Oficina da Lia</h1><p>Atelie ficticio de papelaria em Olinda.</p><h2>O que fazemos</h2><ul><li>Encadernacao</li><li>Papeis coloridos</li><li>Kits de carta</li></ul></main>
  <footer>
    <p>Oficina da Lia — Olinda, PE. Conteúdo fictício para estudo. Não publique estes arquivos.</p>
  </footer>
</body>
</html>