Published lesson · 30 minutes

Organise content into sections

Objective: Group related information with semantic sections and a heading hierarchy that supports navigation.

Understand the idea

Organise content into sections works best when the learner can explain the reason behind each step, not just copy a result. HTML landmarks and headings describe the organisation of a page; a heading level follows the outline instead of being chosen for its default size.

A neighbourhood service page groups opening hours, location and contact details under meaningful headings so a visitor can jump directly to the detail they need. Treat the names and details as invented practice information; the example is for learning a method and does not describe a live service.

A dependable sequence is: Keep one main page topic, use section headings in order, and choose sectioning elements because of their meaning rather than their appearance. Write down the important decision before you begin so another person can follow the reasoning.

Check the outline by reading only the headings. Each one should predict the content that follows and make sense without visual styling. Compare the result with the objective, then change one thing at a time if the first attempt does not work.

Build a short page outline and choose a semantic element for each group of related information. Explain one assumption that would need checking before anyone used a similar result outside the classroom.

Keep a short record of the choices you made and the evidence you used to check them. A useful practice result is understandable by another learner, stays within the stated scope and makes its limitations visible before anyone relies on it.

Worked examples

Organise content into sections: practice example

Explore how organise content into sections supports the lesson objective with a small synthetic example.

index.html

<main><h1>Community resources</h1><section aria-labelledby="hours"><h2 id="hours">Opening hours</h2><p>Tuesday and Thursday, 10:00–14:00</p></section><section aria-labelledby="location"><h2 id="location">Location</h2><p>Practice example only</p></section></main>

Practice tasks

  1. Explore organise content into sections

    Use the worked example for “Organise content into sections”. Change one small detail to suit a different synthetic community situation, then explain what you expected and how you checked whether the change still met the lesson objective.

  2. Build a HTML practice example

    Create a small practice result that demonstrates this objective: Group related information with semantic sections and a heading hierarchy that supports navigation. Use only synthetic information, keep the first version focused, and write down one limitation that a later version should address.

  3. Review and explain the result

    Review your “Organise content into sections” result as if another learner will use it without your explanation. Identify one strength, one exact point that may be unclear, and a revision that would make the result easier to understand or use.

Organise content into sections becomes easier when you keep one main page topic, check the result and explain the choice to another learner.

Course overview