Structure a Semantic HTML Article: Worked Workshop

This self-study workshop turns a fictional repair-café report into a readable HTML structure. Your output is a small document whose main story, supporting sections and evidence note remain distinguishable when visual styling is removed. The exercise concerns the organisation of meaning before colours, columns or decorative effects.

The MDN article reference describes article as an independently reusable composition, normally identified by a heading. It can contain sections; nested articles represent related independent compositions.

Sort the fictional content before choosing tags

Imagine five supplied pieces: a report title, an opening account, a methods explanation, a results paragraph and a note about the counting rule. The report describes twelve invented objects brought to an imaginary repair event. Seven were repaired, three were referred elsewhere and two remained unresolved. These are teaching data, not records of a real service.

Your first task is to write a two-level outline in plain text. Then ask whether each heading describes its following content. “Information” is too vague for the methods section: it does not tell a reader whether the section contains instructions, background or results. “How objects were counted” describes an actual purpose in this invented document.

Worked markup and complete interpretation

The following standalone learning fragment is displayed as text. Its first heading belongs to the fictional example; it is not an additional live heading in this workshop. The host page supplies this workshop’s own title.

<article>
  <h1 id="report-title">Repair-café trial</h1>
  <p>Twelve fictional objects were assessed.</p>
  <section>
    <h2 id="methods-title">How objects were counted</h2>
    <p>Each object received one final category.</p>
  </section>
  <section>
    <h2 id="results-title">Results</h2>
    <p>Seven repaired, three referred, two unresolved.</p>
  </section>
</article>

The worked answer contains one report and two named sections. The opening paragraph belongs to the report as a whole. The counting rule belongs inside methods because it explains how the reported categories were assigned. Results follows methods in the reading order. A reader can therefore identify the conclusion and inspect the counting assumption that supports it.

Check the arithmetic as well as the tags. Seven plus three plus two equals twelve, so the categories account for the supplied denominator. The repaired proportion is seven divided by twelve, approximately 58.3%. Calling it seven out of ten would silently remove unresolved objects and answer a different question. A meaningful structure makes this kind of inconsistency easier to locate; it does not correct the numbers automatically.

Diagnose three plausible mistakes

First, suppose every paragraph becomes a separate article. The output then suggests several independently reusable compositions even though most fragments depend on the surrounding report. Keep the unit of composition aligned with the editorial task instead of treating a tag as a visual box.

Second, suppose results appears first visually but remains last in the source because columns were rearranged. For this exercise, keep the reading order methods then results and record any later presentation change separately. Your acceptance criterion is that the unstyled sequence still tells the intended story.

Third, suppose both sections reuse the same identifier. A link to that identifier becomes ambiguous. The model answer uses three distinct identifiers for the report and its sections. Write an identifier inventory beside the outline and check that each intended reference has exactly one target.

For a second practice round, add a genuine independent fictional reader response containing its own heading and complete statement. Explain why that unit could stand alone, whereas a one-line counting note cannot. There is no requirement to add a comment system or collect a real response.

Submission checklist and questions

Keep the plain-text outline, final fragment, identifier inventory and denominator calculation together. A successful answer preserves all supplied content, distinguishes the two section purposes and explains why the report is one composition. It also states that semantic structure alone is not a complete accessibility evaluation.

This is an original INTIAU editorial self-study activity; no qualification is awarded. For institutional information, use Courses or Contact.

View the study diagram