Pular para o conteúdo
murad.guide

As Três Camadas

Capítulo 2

Texto e estrutura HTML

4 min de leitura 798 palavras 2 gravuras

Este capítulo marca o significado do conteúdo. Você vai separar cabeçalho, miolo e rodapé, escolher títulos pelo papel e oferecer um atalho de teclado. O exemplo está em exemplos/02-estrutura/. Abra index.html e também sobre.html.

A Oficina do Farol ganha mais de uma página. Os textos continuam fictícios. CSS ainda espera o capítulo 4: hoje o navegador usa a aparência padrão.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

Um assunto por página

O h1 é o assunto desta página, não um “texto grande”. A aba usa o title. O corpo usa o h1. Os dois podem ter o mesmo texto; não precisam.

Uma página tem um h1. As seções usam h2. As partes dessas seções usam h3. Não pule de h1 para h3 só porque o h3 “parece menor”. Tamanho é trabalho do CSS, mais adiante.

<h1>Oficina do Farol</h1>
<h2>Próximas turmas</h2>
<h3>Cerâmica</h3>

p marca um parágrafo. Dois assuntos diferentes pedem dois p, não um br no meio.

Pare e experimente. Em exemplos/02-estrutura/index.html, troque o h1 por um h2. Recarregue. A página ainda “parece” um título, mas o assunto principal some da árvore de títulos. Recoloque o h1.

As regiões da página

Uma tag semântica escolhe o elemento pelo papel. div é uma caixa genérica: use só quando nenhum nome específico servir.

Cabeçalho, navegação, conteúdo e rodapé como regiões distintas

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sobre — Oficina do Farol</title>
  </head>
  <body>
    <a class="pular" href="#conteudo">Pular para o conteúdo</a>
    <header>
      <p><a href="index.html">Oficina do Farol</a></p>
      <nav aria-label="Principal"></nav>
    </header>
    <main id="conteudo" tabindex="-1">
      <h1>Sobre o espaço</h1>
      <p>A Oficina do Farol não existe fora deste curso.</p>
    </main>
    <footer>
      <p><small>Conteúdo fictício para estudo</small></p>
    </footer>
  </body>
</html>

O menu desta etapa ainda pode estar vazio. O capítulo 3 coloca os links. O nav já marca o lugar.

Ênfase e importância

strong marca importância. em marca ênfase, o tom que muda o sentido da frase. b e i existem, mas não substituem esses dois quando o sentido importa.

<p>Você <strong>não</strong> precisa informar dados pessoais.</p>
<p>A gente aprende olhando e <em>depois</em> sujando a própria mão.</p>

Não use strong em um parágrafo inteiro só para “ficar grosso”. Se tudo é importante, nada se destaca.

Abertura e fechamento de uma tag em volta do texto

Citação

blockquote envolve uma citação longa, em bloco. cite marca o título de uma obra; o nome de uma pessoa fica em texto comum. Os nomes deste volume são inventados.

<blockquote>
  <p>A gente aprende olhando o vizinho fazer e depois sujando a própria mão.</p>
  <p>Lia Nogueira, coordenadora fictícia</p>
</blockquote>

O exemplo sobre.html já traz esse bloco. Não invente um e-mail real nem um telefone seu.

O skip-link é o primeiro foco do teclado. Ele leva ao main. Quem navega com Tab não precisa atravessar o menu em toda página.

O texto fica “Pular para o conteúdo”. O href aponta para #conteudo. O main precisa do mesmo id.

Os arquivos de referência já têm um estilo de apoio: o link aparece quando recebe foco. O capítulo 5 explica como escrever essa regra e o contorno de 3 px.

Erro comum: pôr o skip-link no meio do header ou esquecer o id no main. O Tab chega no link, a pessoa aperta Enter e nada salta.

Pare e experimente. Abra sobre.html, aperte Tab uma vez e Enter. O foco deve ir ao miolo. Se a barra de endereço ganhar #conteudo e a página não se mover, o id está em outro elemento.

Atividades

  1. Por que um título visual feito só com p e CSS não substitui o h1?
  2. Qual a diferença de papel entre section e article?
  3. O skip-link aponta para onde, e o que precisa existir no destino?
  4. No exemplo 02-estrutura, quantos h1 existem em index.html?

Respostas comentadas

  1. O h1 entra na árvore de títulos. Leitor de tela e buscador usam esse nome. CSS só muda o tamanho.
  2. section agrupa um tema da página. article é um bloco autônomo, como o cartão de uma oficina. Um article pode viver dentro de uma section.
  3. Aponta para #conteudo. O main (ou o destino) precisa de id="conteudo".
  4. Um. O assunto da home é “Oficina do Farol”.

Referências

O arquivo completo

Referência do exemplo 02-estrutura, 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 content="width=device-width, initial-scale=1" name="viewport"/>
<title>Oficina do Farol</title>
<style>body{overflow-wrap:anywhere}img,input,textarea,select,iframe{max-width:100%}img{height:auto}fieldset,.cartao{min-width:0}pre{max-width:100%;overflow:auto}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}.atalho-conteudo{position:absolute;left:.5rem;top:-6rem;background:white;color:#172f50;padding:.5rem;z-index:999}.atalho-conteudo:focus{top:.5rem}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}</style></head>
<body><a class="atalho-conteudo" href="#conteudo">Pular para o conteúdo</a>
<header class="principal">
<p class="logo"><a href="index.html">Oficina do Farol</a></p>
<p class="tagline">Olinda — espaço cultural fictício</p>
</header>
<main id="conteudo" tabindex="-1">
<h1>Oficina do Farol</h1>
<p>Espaço cultural fictício no Alto da Sé, em Olinda. Oficinas de cerâmica, xilogravura e fotografia para quem quer fazer com as mãos.</p>
<div class="">
</div>
</main>
<footer class="principal">
<p><small>Oficina do Farol — conteúdo fictício para estudo</small></p>
</footer>
</body>
</html>