Prerequisites

Before starting this lesson, you should be able to create a complete HTML document, connect the supplied stylesheet, save your files, open the page through the local server, inspect the document, and validate the saved HTML. These skills were covered in Modules 1 and 2.

You do not need to know CSS. The stylesheet in this lesson is supplied so that the page is comfortable to read. Formal CSS teaching begins in Module 7.

Starting files

Create a folder named semantic-workshop-guide. Inside it, create these two files:

semantic-workshop-guide/
├── index.html
└── style.css

Place the following complete code in index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Community Workshop Guide</title>
    <meta name="description" content="A clear guide to preparing for, attending, and following up after a community workshop.">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <main class="page">
      <p>Community Workshop Guide</p>
      <p>This guide explains how to prepare for a practical workshop, take part safely, and record what you learned.</p>

      <p>Before the workshop</p>
      <p>Good preparation gives you more time to learn during the session.</p>
      <p>Choose one item</p>
      <p>Bring one item that you can carry safely and that the workshop accepts.</p>
      <p>Describe the problem</p>
      <p>Write down what happens, when it happens, and what you have already tried.</p>

      <p>During the workshop</p>
      <p>Listen to the opening instructions before you begin. Ask for help if a task is outside your knowledge or requires specialist equipment.</p>
      <p>Work through one change at a time</p>
      <p>Inspect the item, make one controlled change, and then test again. This makes the result easier to understand.</p>
      <p>The final part of the session has a different purpose. Record what changed, what still needs attention, and whether the item is safe to use.</p>

      <p>After the workshop</p>
      <p>Keep your notes with the item. Clear notes can help you or another person understand the work later.</p>
    </main>
  </body>
</html>

Place the following supplied code in style.css:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: #1f2933;
  background-color: #f3f6f8;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
  background-color: #ffffff;
}

.intro {
  font-size: 20px;
}

hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid #9aa8b4;
}

Start the local server from the semantic-workshop-guide folder, open the page, and confirm that all text is present. The content is readable, but its structure is unclear because every line is marked as an ordinary paragraph.

1. Understand content hierarchy

A long page normally contains ideas at different levels. The page has one overall subject. That subject can contain major sections, and a major section can contain smaller subsections. This arrangement is a content hierarchy.

Imagine a document with the title “Community Workshop Guide.” It has three main sections: “Before the workshop,” “During the workshop,” and “After the workshop.” The “Before” section also has smaller topics called “Choose one item” and “Describe the problem.” Those smaller topics belong inside the larger “Before” topic.

HTML headings communicate these levels. The elements are named h1, h2, h3, h4, h5, and h6. The number describes the heading level. It does not mean “large,” “medium,” or “small.” Default browser styles often make higher-level headings look larger, but CSS can change that appearance. The HTML level must still describe the content correctly.

For this page, use one h1 for the overall page heading:

<h1>Community Workshop Guide</h1>

Using one clear h1 for the page is a simple and reliable course pattern. It makes the main subject easy to identify. The HTML language can support more complex heading arrangements, but you do not need them for this page.

The three major parts of the guide are level-two headings:

<h2>Before the workshop</h2>
<h2>During the workshop</h2>
<h2>After the workshop</h2>

The smaller topics inside “Before the workshop” are level-three headings:

<h3>Choose one item</h3>
<h3>Describe the problem</h3>

The page now follows this hierarchy:

h1 Community Workshop Guide
├── h2 Before the workshop
│   ├── h3 Choose one item
│   └── h3 Describe the problem
├── h2 During the workshop
│   └── h3 Work through one change at a time
└── h2 After the workshop

This small tree is a planning view, not HTML code. It shows which topics belong inside other topics. A new h2 ends the preceding h2 topic and starts another topic at the same level. A new h3 starts a smaller topic inside the current h2 topic.

Avoid choosing h3 because it happens to look attractive. Also avoid jumping directly from h1 to h4 when the content only needs a normal subsection. W3C accessibility guidance recommends nesting headings by rank and avoiding skipped ranks where possible because unexpected jumps can confuse people who use headings to understand or navigate the page.

You do not have to use all six levels. Most simple pages need only h1, h2, and sometimes h3. Add a deeper level only when the content really contains a deeper subsection.

2. Use paragraphs for complete ideas

The p element represents a paragraph. A paragraph usually contains one connected idea or a small group of closely connected sentences.

The introduction becomes:

<p class="intro">This guide explains how to prepare for a practical workshop, take part safely, and record what you learned.</p>

The class attribute was introduced earlier. Here it connects the introduction to supplied presentation in style.css. It does not change the meaning of the paragraph.

Use separate p elements when one paragraph ends and another begins. Do not place several paragraphs inside one p element by pressing Enter many times. Ordinary HTML whitespace usually collapses, so extra blank lines in the source do not create reliable paragraph structure.

Do not use an empty paragraph to create visual space. Spacing is a presentation decision and will be controlled with CSS later. The HTML should describe the real content.

A paragraph can contain ordinary text and text-level elements that belong inside the sentence. Those text-level elements are taught in Lesson 3.2. A paragraph cannot contain a heading or a list. When a heading or list begins, close the paragraph first.

3. Write headings that describe their content

A useful heading tells the reader what the following content is about. “Describe the problem” is clearer than “More information” because it names the action explained in the paragraph.

Keep headings concise, but do not remove necessary meaning. A heading should still make sense when someone reads it without the surrounding paragraph. This matters because browsers and assistive technologies can let people move through a page by its headings.

Do not mark a complete paragraph as a heading merely to make it visually prominent. A heading labels the content that follows. If a sentence is important but does not label a section, keep it as a paragraph and use the appropriate text-level meaning taught in the next lesson.

4. Use a thematic break only when the topic changes

The hr element represents a thematic break at paragraph level. A thematic break is a meaningful change of topic, scene, time, or phase within the surrounding content.

In the “During the workshop” part, the first paragraphs discuss doing the work. The final paragraph changes to recording the result. Add hr before that final paragraph:

<hr>

<p>The final part of the session has a different purpose. Record what changed, what still needs attention, and whether the item is safe to use.</p>

The hr element is a void element, so it has no end tag and cannot contain text. Write <hr>, not <hr></hr>.

Many browsers show hr as a horizontal line by default, but the line is not its meaning. Do not add hr only because you want a decorative line. Also, you usually do not need hr between every section. The headings already show that a new section has started.

If the change is important enough to need its own label, use an appropriate heading instead. Use hr when a real thematic shift exists but a new named subsection is not necessary.

Complete solution

The completed index.html is:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Community Workshop Guide</title>
    <meta name="description" content="A clear guide to preparing for, attending, and following up after a community workshop.">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <main class="page">
      <h1>Community Workshop Guide</h1>
      <p class="intro">This guide explains how to prepare for a practical workshop, take part safely, and record what you learned.</p>

      <h2>Before the workshop</h2>
      <p>Good preparation gives you more time to learn during the session.</p>

      <h3>Choose one item</h3>
      <p>Bring one item that you can carry safely and that the workshop accepts.</p>

      <h3>Describe the problem</h3>
      <p>Write down what happens, when it happens, and what you have already tried.</p>

      <h2>During the workshop</h2>
      <p>Listen to the opening instructions before you begin. Ask for help if a task is outside your knowledge or requires specialist equipment.</p>

      <h3>Work through one change at a time</h3>
      <p>Inspect the item, make one controlled change, and then test again. This makes the result easier to understand.</p>

      <hr>

      <p>The final part of the session has a different purpose. Record what changed, what still needs attention, and whether the item is safe to use.</p>

      <h2>After the workshop</h2>
      <p>Keep your notes with the item. Clear notes can help you or another person understand the work later.</p>
    </main>
  </body>
</html>

The complete style.css remains:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: #1f2933;
  background-color: #f3f6f8;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
  background-color: #ffffff;
}

.intro {
  font-size: 20px;
}

hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid #9aa8b4;
}

The document frame, metadata, main element, class, and stylesheet connection were explained in earlier lessons. The new code in this lesson is the heading hierarchy and the meaningful hr element.

Browser support and fallback information

The h1 to h6, p, and hr elements are established HTML features supported by current browser engines. They do not require a fallback.

Default heading sizes and the appearance of hr can differ between browsers or stylesheets. This does not change their meaning. The page must not depend on one exact default size, font weight, or line style to communicate its structure.

If the stylesheet fails to load, the headings and paragraphs still keep their HTML meaning. The page will look simpler, but its content hierarchy remains available.

Accessibility and responsive requirements

Headings help all readers scan the page. They are especially useful to people who use software to list headings or move from one heading to the next. Write descriptive headings and keep their rank consistent with the real content structure.

Do not rely only on font size, bold text, colour, or spacing to show the hierarchy. Those are visual signals. Correct heading elements provide structural information in the HTML.

Test the page at 200% zoom and in a narrow window. Confirm that every heading and paragraph remains visible and readable. Long headings must wrap onto another line rather than being clipped. No horizontal scrolling should be required for the text in this example.

This lesson does not claim that a visual check or valid HTML proves accessibility. Keyboard controls are not present on this page. A screen-reader and assistive-technology test was not performed for the supplied solution.

Common mistakes and debugging process

A common mistake is choosing a heading level because of its appearance. Another is using several h1 elements without a clear structural reason, skipping from h1 to h4, using a heading for an ordinary sentence, or inserting hr as decoration between every block.

Use this process when the hierarchy feels unclear:

1. Write the page title and the names of all major topics as plain text.
2. Mark the overall page topic as h1.
3. Mark each major topic as h2.
4. Mark a topic inside an h2 section as h3.
5. Continue to a deeper level only if the content truly has another nested topic.
6. Read only the headings from top to bottom. Confirm that they form a useful summary.
7. Check that every paragraph is outside the heading tags and contains a complete idea.
8. Confirm that every hr marks a real thematic shift.
9. Save the file, validate the complete document, and correct confirmed source errors.
10. Inspect the page in a narrow window and at 200% zoom.

If a paragraph appears as part of a heading, inspect the end tag. For example, <h2>During the workshop<p>…</p> is missing </h2>. Correct it to <h2>During the workshop</h2> before changing any CSS.

Independent exercise

Create a folder named study-session-guide with an index.html file and a copy of the supplied style.css.

Build a page with this hierarchy:

• The page topic is “Independent Study Session.”
• The major topics are “Before studying,” “While studying,” and “After studying.”
• “While studying” contains the smaller topics “Focus on one task” and “Check your understanding.”
• Add two paragraphs under each major topic.
• Add one thematic break inside “After studying” before a final paragraph about planning the next session.

Choose heading elements according to this structure. Do not use an empty paragraph for spacing.

Tested exercise solution

The complete exercise index.html is:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Independent Study Session</title>
    <meta name="description" content="A simple guide to planning, completing, and reviewing an independent study session.">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <main class="page">
      <h1>Independent Study Session</h1>
      <p class="intro">A clear plan can make a short study session more useful.</p>

      <h2>Before studying</h2>
      <p>Choose one subject and decide what you want to understand or complete.</p>
      <p>Prepare the materials you need and remove avoidable distractions.</p>

      <h2>While studying</h2>
      <p>Work at a pace that lets you understand the material instead of only finishing it.</p>

      <h3>Focus on one task</h3>
      <p>Complete one small part before moving to another part.</p>

      <h3>Check your understanding</h3>
      <p>Explain the main idea in your own words and identify anything that remains unclear.</p>

      <h2>After studying</h2>
      <p>Write a short note about what you completed and what still needs work.</p>
      <p>Put your materials where you can find them for the next session.</p>

      <hr>

      <p>Before you finish, choose the first task for your next study session.</p>
    </main>
  </body>
</html>

Use the same complete style.css supplied earlier in this lesson.

The complete starting document, lesson solution, and exercise solution passed the v.Nu 26.8.6 HTML conformance checker on 10 August 2026. The supplied stylesheet passed csstree-validator 4.0.1. A real-browser visual, keyboard, screen-reader, assistive-technology, mobile-device, and physical-device test was not performed. Complete the manual checks in your own browser.

Completion checklist

• You selected heading levels according to content structure rather than appearance.
• Your page has one clear main heading and logically nested subheadings.
• Every paragraph contains a complete idea and is outside the heading tags.
• Your hr marks a real thematic break and has no end tag.
• You read the headings alone and confirmed that they summarise the page.
• You validated the complete saved HTML.
• You checked the page in a narrow window and at 200% zoom.
• You completed and checked the independent exercise.