LEARN. PRACTICE. GROW.Document and context
Start by identifying what the page represents. In an operations guide, the complete document has a main language, a title recognizable outside the site and a content area. The short DOCTYPE avoids legacy-mode selection through omission.
It is neither an application version number nor a guarantee of correct HTML: a document can have a DOCTYPE and still contain structural errors.
Metadata with a concrete purpose
In the example, title distinguishes the R7 guide from other tabs, while H1 introduces the subject within the page. The description summarizes content; it neither replaces main text nor guarantees a particular search-engine presentation. Declaring charset communicates intended encoding.
When diagnosing corrupted text, also consider bytes and the HTTP response rather than changing headings that merely reveal the error.
Main language and exceptions
The example’s English phrase retains its original language through lang on span. The rest of the document inherits pt-PT from html. A class named english does not communicate that information by itself.
This decision helps technologies depending on text language but does not translate content. If the template is reused for an English page, update the main declaration and mark only actual exceptions.
Dominant area and content units
main gathers dominant content. Do not place a main in each visible card: several self-contained reports can be article elements within one main area. A section corresponds to an identifiable thematic group; a wrapper created only for spacing can be div. nav identifies an important navigation block rather than every sentence containing a link. These choices should still make sense when styles are removed.
Hierarchy and order
The guide has one H1 and two H2 elements because preparation and sequence are subtopics of the same subject. This example has no additional level-changing mechanisms such as headingoffset or aria-level; changing CSS size does not change hierarchy either.
The ol list retains a sequence where swapping steps changes intent. The ul list groups resources without that dependency. Choose elements by the relationship among information, then address presentation.
Identity and the parsed tree
The preparacao and sequencia ids are unique within the document and permit precise references. If a component repeats an id, the relationship no longer identifies one instance unambiguously. Another problem is writing a div or list inside p: the content model does not allow that composition and the parser can close the paragraph before the block.
Compare the DOM tree with received HTML; a display rule does not repair original structure.
Review guided by intent
In a review, first describe the observable error: indistinguishable history titles, headings without hierarchy or a link targeting repeated ids. Choose the change addressing that relationship while retaining necessary content. A correct visual appearance in one capture proves neither all semantic relationships nor complete accessibility.
This lesson’s questions ask for the decision and rationale from excerpts without code execution.
<!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>The document describes a fictional PT-PT guide. Its title identifies it in a tab; H1 introduces visible content. One main and two H2 elements identify the corresponding sections.
The numbered sequence represents order dependencies; contacts and resources do not depend on that order. The example teaches markup and does not define a sufficient technical procedure for recovering a real service.
Common pitfalls
Choosing headings by size; repeating ids across components; using section only for padding; confusing title with H1; declaring a language inconsistent with text; placing lists or div inside p and expecting the DOM to reproduce that intent.
Related topics: Links, images and content meaning · Cascade, inheritance and selector contracts · Diagnosing styles and delivery
HTML describes relationships and functions. Metadata identifies the document, headings communicate hierarchy and appropriate elements represent navigation, content and lists. When output differs from the template, inspect HTML and the parsed tree before treating the problem as presentation.
Reference: HTML document metadata · HTML Living Standard; modular CSS