WDD4 - HTML Semantic Elements and Page Structure

James Gillespie's High School · Higher Computing Science 2026-27

Completed:

Task set completed:

File in OneNote: Higher Computing Science > Web Design & Development > WDD4

Web Design & Development · Lesson 4 of 17
Web Design & Development · HTML

WDD4 - HTML: semantic elements and page structure

Tue 17 Nov 2026 · P3 (single)
Compressed core lesson · planned content is double-scoped
Learning intentions
Success criteria
Warm up - from wireframe to HTML

WDD3 planned page areas. WDD4 turns those areas into semantic HTML structure.

WU1
In a wireframe, which area is most likely to become the <nav> element in HTML?
  • That might become an image later, not navigation.
  • Correct. Navigation links belong inside nav.
  • That is content shown to the user, not navigation.
  • Footer content belongs in footer.
WU2
Fill the gap: HTML is used for page ___, while CSS is used for appearance.
 
WU3
In WDD3's workshop enquiry wireframe, where would the confirmation message output area belong once turned into semantic HTML?
  • Nav is for navigation links, not page output.
  • Correct. The confirmation message is unique content for this page.
  • Footer is for closing content like contact details, not the form's output.
  • Header is for introductory content, not form results.

Key vocabulary

Semantic HTML
HTML that uses elements whose names describe the meaning or role of the content.
<header>
Introductory area for a page or section, often containing a logo, title or heading.
<nav>
A section containing navigation links.
<main>
The main unique content of the page. There should normally be one main element.
<section>
A meaningful grouped section of related content, usually with its own heading.
<footer>
Closing area for a page or section, often containing contact, copyright or secondary links.

Semantic page structure

Why semantic elements matter

Semantic HTML tells the browser, search engines, assistive technologies and other developers what each part of a page means. A page made only from generic boxes can still appear on screen, but its structure is harder to understand. A page using <header>, <nav>, <main>, <section> and <footer> communicates the role of each area clearly.

<header>

Use for introductory content such as the site name, logo or main heading.

<nav>

Use for the main set of links that lets the user move around the site.

<main>

Use for the unique content of this page. Do not put repeated site-wide navigation here.

<section>

Use for a meaningful group of related content, such as "Plan your visit" or "Animal profiles".

<footer>

Use for closing content such as contact details, copyright or secondary links.

<header> site name and page heading
<nav> Home | Visit | Animals | Schools | Support Us
<main> unique content for this page
<section> Plan your visit
<section> Current campaigns
<footer> contact details and copyright

Element rules and common structure mistakes

A page should normally include only one <main> element, because it marks the single unique content area of that page. Having two would make it unclear which one a search engine or screen reader should treat as the page's primary content. <section> is not simply a renamed <div>: a <div> carries no meaning at all and is used only as a generic styling or layout box, while a <section> should represent one themed, self-contained group of content that would make sense as its own entry in a document outline, usually introduced by its own heading. If a group of elements exists only to apply CSS spacing or layout and does not represent a distinct topic, <div> is still the correct choice, not <section>. <nav> is reserved for major navigation blocks such as the main site menu, not for every single link on a page - one link inside a paragraph does not need to be wrapped in <nav>.

Worked examples

Example 1 - Basic semantic skeleton
<header>
  <h1>Meadows Wildlife Centre</h1>
</header>

<nav>
  <a href="index.html">Home</a>
  <a href="visit.html">Visit</a>
  <a href="animals.html">Animals</a>
  <a href="schools.html">Schools</a>
</nav>

<main>
  <section>
    <h2>Plan your visit</h2>
    <p>Find opening times, prices and accessibility information.</p>
  </section>
</main>

<footer>
  <p>Contact Meadows Wildlife Centre</p>
</footer>
OK
Each major page area uses an element that describes its purpose.
Example 2 - Choosing the right element
1
The links "Home, Visit, Animals, Schools" belong in <nav> because they help users move between pages.
2
The animal profile content belongs in <main> because it is the unique content of that page.
3
A group of related conservation facts can sit inside <section>, ideally with its own heading.
OK
Choose elements by meaning, not by how you want them to look.
Example 3 - Fixing non-semantic structure
<!-- Weak: the element names do not explain the page areas -->
<div>Meadows Wildlife Centre</div>
<div>Home | Visit | Animals | Schools</div>
<div>Animal profile content</div>
<!-- Better: semantic elements describe the content -->
<header>Meadows Wildlife Centre</header>
<nav>Home | Visit | Animals | Schools</nav>
<main>
  <section>Animal profile content</section>
</main>
Now you try

Choose the best semantic element for each wireframe area: site title, main page links, workshop enquiry content, "How to prepare for your visit" content group, and contact details at the bottom.

  • Site title: <header>
  • Main page links: <nav>
  • Workshop enquiry content: inside <main>
  • How to prepare for your visit: <section>
  • Contact details at the bottom: <footer>
Common mistakes
Exam tip

If asked why semantic elements are useful, say that they describe the purpose of each page area. If asked to implement structure, use the exact element names from the specification: <header>, <nav>, <main>, <footer> and <section>.

Task Set A - Core questions

Task Set A - Core questions
Complete all questions. Written answers reveal a model answer for self-assessment.
A1
Which semantic element should contain the main navigation links?
 
A2
Which statement about <main> is correct?
  • Footer content belongs in footer.
  • Navigation links belong in nav.
  • Correct.
  • CSS controls colours.
A3
Which semantic element should be used for closing page content such as contact details or copyright?
 
A4
Which use of <section> is best?
  • That is not a meaningful section.
  • Correct. It is a meaningful group of related content.
  • That belongs in nav.
  • That is not section content.
A5
Explain what is meant by semantic HTML and why it is useful.
Model answer
A6
Describe a semantic HTML structure for the wildlife centre home page.
Model answer
A7
Fill the gap: a page should normally contain only one ___ element, since it marks the single unique content area of that page.
 
A8
A pupil wraps three unrelated design-only spacing boxes in <section> tags purely to help with CSS layout, with no heading and no shared topic. What is wrong with this?
  • They are not interchangeable - section carries meaning, div does not.
  • Correct. Use div for layout-only boxes with no shared topic.
  • Section has no such requirement.
  • The issue is element choice, not element count.

Task Set B - Extension or homework

Task Set B - Extension
Use this if time allows, or set as homework because WDD4 is squeezed into a single slot.
B1
Plan the semantic HTML structure for the Workshop Enquiry page. Include at least header, nav, main, section and footer.
One possible answer
B2
A pupil's Animal Profile page has two <main> elements: one for the animal photo and facts, one for a related-animals list. Explain why this breaks the semantic HTML rule, and suggest a better structure using <section> instead.
One possible answer
B3
Explain how semantic HTML structure could help a visually impaired visitor using a screen reader navigate the wildlife centre website more efficiently than if the whole page were built only from <div> elements.
One possible answer

File this in OneNote under:
Higher Computing Science > Web Design & Development > WDD4

Teacher notes - Shift+T to toggle

Pacing warning: WDD4 was planned as double-scoped but lands on a Tuesday single. Keep the live lesson to the five semantic elements and one skeleton build. Push Task Set B to homework if needed.

Do not skip section: <section> is spec-mandated Higher content and should be taught explicitly here, not left as an aside.

Scope control: no CSS styling yet. CSS starts in WDD6; this lesson is HTML meaning and structure only.

File in OneNote: Higher Computing Science > Web Design & Development > WDD4 · James Gillespie's High School · Higher Computing Science 2026-27