APRENDER. PRATICAR. EVOLUIR.Documento e contexto
Começa por identificar o que a página representa. Num guia de operações, o documento completo tem uma língua principal, um título reconhecível fora do site e uma área de conteúdo. O DOCTYPE curto evita a seleção de modos legados por omissão.
Não é um número de versão da aplicação nem uma garantia de HTML correto: um documento pode ter DOCTYPE e continuar a conter erros de estrutura.
Metadata com uma função concreta
No exemplo, title distingue o guia R7 de outros separadores, enquanto H1 introduz o assunto dentro da página. A descrição resume o conteúdo; não substitui o texto principal nem garante uma determinada apresentação num motor de pesquisa. Declarar charset comunica a codificação pretendida.
Ao diagnosticar texto corrompido, considera também os bytes e a resposta HTTP, em vez de alterar headings que apenas tornam o erro visível.
Língua principal e exceções
A frase inglesa do exemplo mantém a sua língua original através de lang no span. O resto do documento herda pt-PT do html. Uma classe chamada english não comunica essa informação por si só.
Esta decisão ajuda tecnologias que dependem da língua do texto, mas não traduz o conteúdo. Se o template for reutilizado numa página inglesa, atualiza a declaração principal e marca apenas as exceções reais.
Área dominante e unidades de conteúdo
O main reúne o conteúdo dominante. Não coloques um main em cada cartão visível: vários relatórios independentes podem ser article dentro da mesma área principal. Uma section corresponde a um agrupamento temático identificável; um wrapper criado apenas para espaçamento pode ser div.
O nav identifica um bloco de navegação importante, não cada frase que contém uma ligação. Estas escolhas devem continuar a fazer sentido quando se retiram os estilos.
Hierarquia e ordem
O guia tem um H1 e dois H2 porque preparação e sequência são subtemas do mesmo assunto. Neste exemplo não há mecanismos adicionais de alteração do nível, como headingoffset ou aria-level; mudar o tamanho por CSS também não muda a hierarquia.
A lista ol conserva uma sequência em que trocar passos altera a intenção. A lista ul agrupa recursos sem essa dependência. Escolhe os elementos pela relação entre as informações, depois trata a apresentação.
Identidade e árvore analisada
Os ids preparacao e sequencia são únicos no documento e permitem referências precisas. Se um componente repetir o mesmo id, a relação deixa de identificar inequivocamente uma instância. Outro problema é escrever um div ou uma lista dentro de p: o modelo de conteúdo não admite essa composição e o parser pode fechar o parágrafo antes do bloco.
Compara a árvore DOM com o HTML recebido; uma regra display não repara a estrutura original.
Revisão orientada por intenção
Numa revisão, descreve primeiro o erro observável: títulos indistinguíveis no histórico, headings sem hierarquia ou uma ligação que aponta para ids repetidos. Escolhe a alteração que trata essa relação e conserva o conteúdo necessário. Um aspeto visual correto numa captura não comprova todas as relações semânticas nem a acessibilidade integral.
As perguntas desta aula pedem a decisão e a justificação a partir dos excertos, sem execução de código.
<!DOCTYPE html>
<html lang="pt-PT">
<head>
<meta charset="utf-8">
<title>Recuperar o serviço R7 | Guia de operações</title>
<meta name="description" content="Sequência de preparação e recuperação do serviço R7.">
</head>
<body>
<header><p>Guia de operações</p></header>
<nav aria-label="Principal"><a href="/guias/">Guias</a></nav>
<main id="conteudo">
<h1>Recuperar o serviço R7</h1>
<section aria-labelledby="preparacao">
<h2 id="preparacao">Preparação</h2>
<p>Confirmar o responsável e o ponto recuperável.</p>
<ul><li>Responsável de turno</li><li>Cópia identificada</li></ul>
</section>
<section aria-labelledby="sequencia">
<h2 id="sequencia">Sequência acordada</h2>
<ol><li>Isolar a entrada</li><li>Recuperar</li><li>Validar o resultado</li></ol>
<p>A mensagem do fornecedor é <span lang="en">Recovery complete</span>.</p>
</section>
</main>
<footer><p>Confirmar sempre os critérios específicos do serviço.</p></footer>
</body>
</html>O documento descreve um guia fictício em PT-PT. O title identifica-o também num separador; o H1 introduz o conteúdo visível. Há um main e dois H2 associados às respetivas secções.
A sequência numerada representa dependências de ordem; os contactos e recursos não dependem dessa ordem. O exemplo ensina marcação e não define um procedimento técnico suficiente para recuperar um serviço real.
Armadilhas comuns
Escolher headings pelo tamanho; repetir ids em componentes; usar section só para padding; confundir title com H1; declarar uma língua que não corresponde ao texto; colocar listas ou div dentro de p e esperar que o DOM reproduza essa intenção.
Tópicos relacionados: Ligações, imagens e significado do conteúdo · Cascata, herança e contratos dos seletores · Diagnóstico de estilos e entrega
HTML descreve relações e funções. Metadata identifica o documento, headings comunicam hierarquia e elementos adequados representam navegação, conteúdo e listas. Quando o resultado difere do template, inspeciona o HTML e a árvore analisada antes de tratar o problema como apresentação.
Referência: HTML document metadata · HTML Living Standard; modular CSS