O documento e suas partes

Neste capítulo você vai reconhecer os metadados e organizar o conteúdo com elementos semânticos.

Seu ponto de partida

Estude depois do capítulo 01. O exemplo deste capítulo é 02-documento-semantico, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Abra index.html da cópia com dois cliques. Edite o mesmo arquivo num editor de texto simples. Abrir no disco não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

O começo informa como ler

Doctype identifica o documento HTML. Lang informa o idioma. Charset informa UTF-8, necessário para representar corretamente os acentos. Viewport permite que a página use a largura real da tela pequena. Title dá nome à aba e não substitui h1.

Head contém informações sobre a página. Body contém o conteúdo apresentado. A referência completa já inclui esses itens. Você vai mudar um valor de cada vez para reconhecer seus efeitos.

Faça no seu exemplo

Confira o começo de index.html.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Conferência de Estilos</title>
</head>

Mude uma coisa e preveja

Troque somente o texto de title por Evento de prática.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

A aba muda de nome; o h1 do corpo não muda.

Se não acontecer

Se aparecer texto no corpo, confira se editou title dentro de head, e não h1.

Dê função às partes

Header é o cabeçalho; nav reúne navegação; main guarda o conteúdo principal; footer fecha a página. Section reúne conteúdo com um tema e deve ter um título útil. Article é uma unidade que pode fazer sentido sozinha, como uma apresentação de palestra.

Use um main por página. O link Pular para o conteúdo aponta para seu identificador. Esse atalho ajuda quem navega por teclado a chegar ao conteúdo sem percorrer o menu inteiro.

Faça no seu exemplo

Localize main e seu título de seção.

<main id="conteudo" tabindex="-1">
  <section aria-labelledby="sobre">
    <h2 id="sobre">Sobre o evento</h2>
    <p>Um evento fictício para aprender fazendo.</p>
  </section>
</main>

Mude uma coisa e preveja

Troque somente o texto Sobre o evento por Nossa proposta. Preserve o id.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O título da seção muda e o atalho continua chegando ao conteúdo.

Se não acontecer

Se o atalho não funcionar, confira conteudo no href e no id. Os nomes precisam coincidir.

Organize títulos por assunto

H1 apresenta a página; h2 abre seus principais assuntos; h3 abre um assunto dentro de h2. A hierarquia ajuda leitura e navegação por tecnologias assistivas. Não pule níveis para obter uma letra menor: depois o CSS cuidará da aparência.

Uma página clara continua compreensível sem estilo. Leia os títulos em voz alta e confira se eles descrevem o percurso.

Faça no seu exemplo

Confira os títulos existentes no corpo.

<h1>Conferência de Estilos</h1>
<h2>Sobre o evento</h2>

Mude uma coisa e preveja

Acrescente uma section irmã com h2 chamado Como participar e um parágrafo fictício.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

Surge um segundo assunto no mesmo nível de Sobre o evento.

Se não acontecer

Não coloque uma section dentro do parágrafo. Termine p antes de abrir outro bloco.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Explique title e h1.

2. Confira o idioma e o viewport.

3. Crie uma segunda seção com título.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. Title nomeia a aba; h1 apresenta o conteúdo principal.

2. A referência usa pt-BR e width=device-width.

3. Uma section com h2 e p mantém um assunto claro.

Quando seguir

Você reconhece head, body e a hierarquia do conteúdo. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

Referência do exemplo 02-documento-semantico, 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>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Conferência de Estilos</h1><p>Pequenos passos para aprender HTML &amp; CSS.</p></header>
<main id="conteudo" tabindex="-1"><section aria-labelledby="sobre"><h2 id="sobre">Sobre o evento</h2><p>Um evento fictício para aprender fazendo.</p></section></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/stylesheets/main.css

:focus-visible { outline: 3px solid #b04d00; outline-offset: 3px; }
.pular { position: absolute; left: -10000px; }
.pular:focus { position: static; display: block; padding: 1rem; background: white; }