Learning intentions
- Understand what HTML is and how it is used to structure web pages
- Know the difference between elements, tags, and attributes
- Know the essential elements needed for a valid HTML page
- Know and correctly use the key semantic and structural HTML elements
- Create ordered and unordered lists in HTML
Success criteria
- I can write a complete, valid HTML page skeleton including
<!DOCTYPE>,<html>,<head>,<title>, and<body> - I can use semantic elements —
<header>,<nav>,<main>,<section>,<footer>— to divide a page into logical sections - I can add headings (
<h1>–<h6>), paragraphs (<p>), and lists (<ul>/<ol>/<li>) to a page - I can identify and fix common HTML errors (missing closing tags, incorrect nesting)
Answer before the lesson begins.
1. What does HTML stand for?
2. In HTML, which of the following is a correctly written opening tag for a paragraph?
3. Which HTML element is used for the most important heading on a page?
Key vocabulary
<p>Hello</p> is a paragraph element.<p>. Closing tag: </p>.<p class="intro"> — class is the attribute, "intro" is its value.<header> means "this is the page header". Semantic HTML improves accessibility and readability.<!DOCTYPE html><head><body><ul> / <ol><li>.HTML: Semantic Elements and Structure
What is HTML?
HTML (HyperText Markup Language) is the language used to create the structure and content of web pages. Every website you visit — from Google to BBC News — is built on HTML. HTML tells the browser what each piece of content is: "this is a heading", "this is a paragraph", "this is a list". CSS then controls how it looks, and JavaScript makes it interactive.
HTML uses tags — keywords wrapped in angle brackets — to label content. Most elements have an opening tag and a closing tag, with content in between:
<p>This is a paragraph of text.</p>
The closing tag has a forward slash (/) before the tag name. Always close your tags — unclosed tags cause unpredictable display errors.
The structure of a valid HTML page
Every HTML page must follow this basic structure:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Page Title</title> </head> <body> <!-- Visible content goes here --> </body> </html>
| Element | Purpose |
|---|---|
<!DOCTYPE html> | Tells the browser this is HTML5. Must be the very first line. |
<html> | The root element — wraps the entire page. lang="en" tells screen readers the language. |
<head> | Contains invisible metadata: charset, title, stylesheet links. |
<meta charset="UTF-8"> | Sets the character encoding so special characters display correctly. |
<title> | The page title — appears in the browser tab. Not visible on the page itself. |
<body> | Contains all visible content: headings, paragraphs, images, links, lists. |
Semantic structural elements
HTML5 introduced semantic elements that describe the purpose of each part of the page. Using semantic elements makes the code easier to read and improves accessibility for screen readers:
| Element | Meaning / purpose |
|---|---|
<header> | The page header — usually contains the site logo, name, and main navigation. |
<nav> | A block of navigation links. Tells screen readers "this is the navigation". |
<main> | The main content area of the page. There should be only one per page. |
<section> | A thematic grouping of content within the main area. |
<footer> | The page footer — usually contains copyright, contact info, additional links. |
<div> | A generic container with no semantic meaning. Use when no semantic element fits. |
Semantic elements divide the page into meaningful sections
Every HTML page follows this nesting structure
Text elements
Inside the <body>, the most common text elements are:
| Element | Purpose | Example |
|---|---|---|
<h1>–<h6> | Headings, h1 = most important | <h1>Welcome</h1> |
<p> | Paragraph of text | <p>Hello world.</p> |
<strong> | Bold (important text) | <strong>Warning</strong> |
<em> | Italic (emphasised text) | <em>Note:</em> |
<br> | Line break (no closing tag) | Line one<br>Line two |
<hr> | Horizontal rule / dividing line | <hr> |
Lists
HTML has two types of list. Unordered lists (<ul>) produce bullet points. Ordered lists (<ol>) produce numbered items. Each item in either list uses <li> (list item):
<!-- Unordered (bullet) list --> <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> </ul> <!-- Ordered (numbered) list --> <ol> <li>First step</li> <li>Second step</li> <li>Third step</li> </ol>
Attributes
Attributes give extra information about an element. They go inside the opening tag, written as name="value":
<p class="intro">Paragraph with a class.</p> <p id="main-text">Paragraph with an ID.</p>
The class attribute is used to apply CSS styles to multiple elements at once. The id attribute identifies a single unique element. You will use src, href, and alt attributes when adding images and links (covered in WDD5).
Nesting rules
HTML elements can be placed inside each other — this is called nesting. The rule is: always close the inner element before closing the outer element.
<!-- CORRECT nesting --> <p>This has <strong>bold</strong> text.</p> <!-- WRONG — tags overlap --> <p>This has <strong>bold</p> text.</strong>
Worked examples
Here is a fully valid HTML5 page for a hobby website:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Hobby: Photography</title> </head> <body> <header> <h1>Photography by Alex</h1> <nav> <p>Home | Gallery | Contact</p> </nav> </header> <main> <section> <h2>About Me</h2> <p>I am a hobbyist photographer based in Edinburgh.</p> </section> </main> <footer> <p>© 2026 Alex — all rights reserved</p> </footer> </body> </html>
Write the HTML for a page section titled "My Favourite Films" containing an ordered list of three film titles.
<section> tags.<h2>My Favourite Films</h2><ol> for an ordered (numbered) list — films have a ranking.<li> tags. Close every tag.<section> <h2>My Favourite Films</h2> <ol> <li>Jurassic Park</li> <li>The Lion King</li> <li>Interstellar</li> </ol> </section>
Identify the errors in this code snippet:
<body>
<h1>Welcome to my site
<p>This is <strong>important</p></strong> text.</p>
<ul>
<li>Item one<li>
</ul>
</body>
<h1> is never closed. Should be <h1>Welcome to my site</h1>.<strong> opens inside <p> but </p> closes before </strong>. The closing tags overlap. Should be <strong>important</strong> before </p>.<li>Item one<li> uses an opening tag to "close" the item. Should be </li> (with forward slash).Write the HTML skeleton for a page titled "My Hobby". The visible page should contain:
- A
<header>with an<h1>heading "My Hobby: Cycling" - A
<main>area with two paragraphs about cycling, followed by an unordered list of three pieces of cycling equipment - A
<footer>with a copyright paragraph
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Hobby</title> </head> <body> <header> <h1>My Hobby: Cycling</h1> </header> <main> <p>Cycling is my favourite way to explore the city.</p> <p>I ride at least three times a week, mostly on weekends.</p> <ul> <li>Helmet</li> <li>Cycling gloves</li> <li>Water bottle</li> </ul> </main> <footer> <p>© 2026 My Hobby Site</p> </footer> </body> </html>
<head> with <header>. <head> is invisible metadata (title, charset, CSS links). <header> is visible page content — the banner at the top of the page. These are completely different elements.<!DOCTYPE html>. Without DOCTYPE, browsers may render the page in "quirks mode" — an older compatibility mode that can cause unpredictable display issues. It must be the very first line of every HTML file.<br> and <meta>). Unclosed tags cause the browser to guess where elements end, often breaking the layout.<p><strong>text</p></strong> is wrong. The inner element (<strong>) must close before the outer element (<p>). Correct: <p><strong>text</strong></p>.<head>. Headings, paragraphs, and all visible content must go inside <body>. Content placed in <head> is invisible and may cause validation errors.HTML questions at N5 often ask you to "write the HTML" for a given description, or "identify the error" in a code snippet. For write questions, always:
- Start with
<!DOCTYPE html>if asked for a complete page - Include
<html>,<head>,<title>,<body> - Use the correct semantic element —
<header>not<div id="header"> - Close every tag you open
For error-spotting questions, check in order: (1) Is DOCTYPE present? (2) Are all tags closed? (3) Are tags correctly nested (not overlapping)? (4) Is the right element used for the job?
Questions 1–4 are auto-checked. Questions 5–10 are self-marked — write HTML in the code areas, then reveal the model answer. Type your answers in the text boxes below each question.
1. Which element contains all the visible content of a web page? TYPE 1
2. What is the correct HTML element for an unordered (bullet point) list? TYPE 1
3. A pupil writes: <p>Hello <strong>world</p></strong>. What is wrong with this code? TYPE 1
4. Which HTML element would you use to mark up the navigation links on a page, to help screen readers identify them? TYPE 1
5. Write the HTML for a complete page structure (skeleton only — no content needed inside body). Include: DOCTYPE, html, head (with charset meta and a title "Millbank Library"), and body. (4 marks) TYPE 2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Millbank Library</title> </head> <body> </body> </html>Marks: DOCTYPE (1), html+head+body structure (1), meta charset (1), correct title (1).
6. Write the HTML for a page section with: heading "Our Team" (level 2); a paragraph "We are a dedicated team of three."; an unordered list of three names. (3 marks) TYPE 2
<section>
<h2>Our Team</h2>
<p>We are a dedicated team of three.</p>
<ul>
<li>Alice</li>
<li>Bob</li>
<li>Carol</li>
</ul>
</section>
7. Identify the three errors in this HTML snippet and explain how to fix each one. (3 marks) TYPE 2
<body>
<h1>Welcome
<p>Check out my <em>favourite</p></em> things.</p>
<ul>
<li>Coffee<li>
<li>Books</li>
</ul>
<body>
2. Incorrect nesting — <em> opens inside <p> but </p> closes before </em>. Fix: <em>favourite</em> must close before </p>
3. <li>Coffee<li> uses a second opening tag instead of a closing tag — change to <li>Coffee</li>
(Bonus: the final <body> should be </body> — missing forward slash. Accept as a 4th error if spotted.)
8. Explain the difference between <head> and <header>. (2 marks) TYPE 2
<head> is a structural element that contains invisible metadata about the page — such as the character encoding, page title, and links to stylesheets. Its content does not appear on screen.<header> is a semantic element inside <body> that contains visible content — typically the site name, logo, and navigation. It appears at the top of the visible web page.
9. What is an HTML attribute? Give one example of an attribute and explain what it does. (2 marks) TYPE 2
name="value".Example:
class="highlight" — the class attribute assigns the element to a group called "highlight", which can then be targeted by CSS to apply styling. Other valid examples: id, src, href, alt.
10. Write the complete HTML for a page about a school club. Include: full page skeleton; a <header> with the club name as an h1; a <main> with a section containing a paragraph and an ordered list of three meeting times; a <footer>. (5 marks) TYPE 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chess Club</title>
</head>
<body>
<header>
<h1>Chess Club</h1>
</header>
<main>
<section>
<p>We meet three times a week to play and learn chess.</p>
<ol>
<li>Monday 3:30pm</li>
<li>Wednesday 3:30pm</li>
<li>Friday 3:30pm</li>
</ol>
</section>
</main>
<footer>
<p>© 2026 Chess Club</p>
</footer>
</body>
</html>
Marks: DOCTYPE + skeleton (1), header with h1 (1), main with section + paragraph (1), ordered list with 3 items (1), footer (1).
Suggested timing: This lesson spans two periods — Tuesday (1hr theory, WE1–3 + now you try) and Friday (2hr practical, task set). Do not rush into the task set on Tuesday.
Key misconception: head vs header. Write both on the board with arrows to clarify: "<head> = invisible metadata | <header> = visible page banner". This comes up every year.
Live coding: Type a page from scratch in VS Code (or Notepad++) with the projector on. Start with DOCTYPE and work down. Open the file in a browser after each addition so pupils see the effect. This is more effective than any slide for this lesson.
Q10 is a practical task: Pupils should type their Q10 answer into a real .html file in VS Code/Notepad++ and open it in a browser to check it renders correctly. The textarea is for recording their code — the real test is whether it displays as expected.
SQA command words: "write the HTML" (must produce working code, tags must be correct and closed), "identify the error" (must name the specific problem and line), "explain the difference" (two contrasting descriptions required).