Semântica HTML

Este capítulo ensina a escolher a tag pelo significado, não pelo “tamanho da letra”. O site da Oficina Costeira, coletivo fictício de design em João Pessoa, ganha documento de verdade. O exemplo correspondente é 09-semantica-html, no pacote que acompanha o volume.

Este volume tem 52 capítulos. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Montar elemento, tag e atributo.
• Estruturar o documento com lang="pt-BR".
• Usar listas, citações, links e imagens com alt.
• Marcar header, nav, main e footer.
• Separar section e article.
• Escrever entidades (&, <) e skip-link.

Sintaxe: o que é uma tag

HTML é texto. O navegador lê as tags e monta a página. Sem navegador, o arquivo continua sendo texto no disco.

Elemento, tag e atributo

O elemento junta abertura, conteúdo e fechamento. A tag é o nome entre < e >. O atributo entra na abertura: nome, igual, valor entre aspas.

<a href="projetos.html">Projetos</a>

a é a tag. href é o atributo. “Projetos” é o conteúdo. Alguns elementos são vazios: img, meta, br.

Erro comum: href=projetos.html sem aspas, ou <A HREF=...>. Padronize minúsculas e aspas.

O documento

Todo arquivo deste volume começa assim. Do capítulo 09 em diante, página completa leva skip-link.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Início — Oficina Costeira</title>
  </head>
  <body>
    <a class="skip" href="#conteudo">Pular para o conteúdo</a>
    <main id="conteudo">
      <h1>Oficina Costeira</h1>
    </main>
  </body>
</html>

head e body

DOCTYPE declara HTML atual. lang="pt-BR" informa o idioma ao navegador e ao leitor de tela. O head guarda charset, viewport e título da aba. O body guarda o que aparece.

O skip-link é o primeiro foco. Ele aponta para id="conteudo" no main. Tab, Enter, o foco salta o menu.

Salve como index.html. Mude só o title. Preveja a aba. Recarregue. Confira.

Pai, filho e irmão

O elemento de fora é o pai. O de dentro é o filho. Dois filhos do mesmo pai são irmãos.

<main>
  <h1>Oficina Costeira</h1>
  <p>Coletivo fictício de design em João Pessoa.</p>
</main>

h1 e p são filhos de main e irmãos entre si. Indentação de 2 espaços mostra essa árvore. O capítulo 10 aprofunda.

Um h2 é subtítulo de um h1. Não pule de h1 para h3 sem h2. Pense no sumário da página.

Listas, citações e ênfase

Listas

ul quando a ordem não importa. ol quando a ordem importa. li em cada item. dl para termo (dt) e descrição (dd).

<ul>
  <li>Farol da Restinga</li>
  <li>Guia da Lagoa</li>
  <li>Ateliê da Pedra</li>
</ul>
<dl>
  <dt>Lina Vasconcelos</dt>
  <dd>Direção de arte (personagem fictícia).</dd>
</dl>

Citações e ênfase

blockquote para citação longa. cite para a fonte. q para trecho curto. em para ênfase falada. strong para importância. i e b não são “itálico e negrito”: são significado (outro idioma, palavra-chave).

<blockquote>
  <p>A orla ensina o espaço em branco.</p>
  <footer>— <cite>Caderno fictício da Oficina Costeira</cite></footer>
</blockquote>

Links e imagens

Links

href relativo para página do site. Absoluto com https:// para outro sítio. #id para âncora na mesma página. mailto: e tel: existem; neste volume use só endereços fictícios, se usar.

<a href="projetos.html">Projetos</a>
<a href="#equipe">Ir à equipe</a>

No menu da página atual, aria-current="page" no link ativo.

Imagens

O arquivo da foto não entra “dentro” do HTML. O atributo src aponta. alt descreve a informação. Se a figura tiver figcaption que já descreve, alt="" pode bastar.

<figure>
  <img src="assets/imagens/marca.svg" alt="Marca da Oficina Costeira, sol e linha de costa">
  <figcaption>Marca fictícia do coletivo em João Pessoa.</figcaption>
</figure>

Erro comum: alt="imagem" ou alt="foto1". Não descreve nada.

header, nav, main, footer

São as quatro peças de toda página completa da Oficina Costeira.

<header>
  <p><a href="index.html">Oficina Costeira</a></p>
  <nav aria-label="Principal">
    <ul>
      <li><a href="index.html" aria-current="page">Início</a></li>
      <li><a href="projetos.html">Projetos</a></li>
      <li><a href="equipe.html">Equipe</a></li>
      <li><a href="agenda.html">Agenda</a></li>
      <li><a href="contato.html">Contato</a></li>
    </ul>
  </nav>
</header>
<main id="conteudo">
  <h1>Início</h1>
  <p>Coletivo fictício de design em João Pessoa.</p>
</main>
<footer>
  <p>Oficina Costeira — João Pessoa. Conteúdo fictício. Nada é enviado a um servidor.</p>
</footer>

header é o masthead. nav é só navegação. main é único por página: o motivo da visita. footer é o menos central. aside guarda o que dá para pular.

div e span não têm significado. Use quando precisar agrupar para CSS, não no lugar de section.

section, article e entidades

section e article

section agrupa conteúdo com título próprio. Sem h2, não use section. article é conteúdo que faria sentido sozinho: um projeto, um post.

<main id="conteudo">
  <section>
    <h2>Projetos</h2>
    <article>
      <h3>Farol da Restinga</h3>
      <p>Identidade fictícia para um festival de fotografia.</p>
    </article>
  </section>
</main>

br só quando a quebra é do conteúdo (endereço, verso). hr é quebra temática, não “uma linha bonita”. Linha visual é regra CSS.

Entidades

<, > e & no texto visível precisam de entidade. Senão o navegador acha que começou uma tag.

<p>HTML usa &lt;tag&gt; e o comercial vira &amp;amp; no código.</p>
<p>João&nbsp;Pessoa sem quebrar o nome no meio.</p>

&lt; <, > >, & &,   espaço rígido.

Abra o exemplo. Troque um h2 por div. Preveja: o visual pode até parecer igual. O sumário da página piora. Recarregue. Confira no inspetor, não só no olho.

Arquivo no disco: tags. Página no navegador: região e título. Teste em 127.0.0.1: o skip-link deve ser o primeiro Tab. Publicação pública não é pedida.

Atividades

1. Qual a diferença entre tag e atributo no link de Projetos?
2. Por que lang="pt-BR" vai no html e não no h1?
3. Quando usar section em vez de div na home da Oficina?
4. No exemplo, ative o skip-link com Tab e Enter. O foco foi para onde?

Respostas comentadas

1. A tag é a. O atributo href diz o destino. O texto “Projetos” é o conteúdo do elemento.
2. Porque o idioma vale para o documento inteiro: aba, leitor de tela, hifenização. Um h1 em português não declara a página.
3. section quando aquele bloco tem título próprio. div só agrupa sem significado, em geral para CSS.
4. Para main#conteudo (ou o id equivalente). Se o foco ficou no menu, o href do skip ou o id não batem.

Referências

• Sintaxe básica de HTML
• HTML semântico
• Elemento main
• Elemento nav
• Referência de elementos HTML

O arquivo completo

Referência do exemplo 09-semantica-html, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}