Structure a small original page with semantic HTML

A semantic page uses each tag for what the content is: headings for headings, paragraphs for paragraphs, lists for lists. This skill appears whenever a task asks you to build or edit a web page from supplied text, and it sits under every other web skill in website authoring.

What does a correct page skeleton look like?

Every page has the same outer shape. The head holds information about the page, and the body holds what the reader sees.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo Photo Club</title>
</head>
<body>
  <h1>Demo Photo Club</h1>
  <p>We meet every Thursday after school.</p>
</body>
</html>

Most tags come in pairs: an opening tag such as <p> and a closing tag such as </p>. A few, such as <meta>, stand alone.

How do you build the page step by step?

1. Write the skeleton with doctype, html, head and body.
2. Add the title inside head, plus the character set line.
3. Add one h1 inside body for the main heading.
4. Break the text into sections, each with an h2 and its paragraphs.
5. Turn any list of items into ul (bullets) or ol (numbered steps).
6. Close every tag and indent the children, so a missing closing tag is easy to spot.

Worked example

An invented task supplies this text for the Demo Photo Club: the club name, a sentence about meeting times, and three activities: portraits, landscapes and editing.

Step 1, skeleton and title: as in the block above.

Step 2, main heading: <h1>Demo Photo Club</h1>.

Step 3, first section: <h2>When we meet</h2> followed by <p>Thursday, 3:30 pm in Room 4.</p>.

Step 4, second section: <h2>What we do</h2>, then the three activities as a list:

<ul>
  <li>Portraits</li>
  <li>Landscapes</li>
  <li>Editing</li>
</ul>

The activities are a set of items with no order, so ul fits. If they were numbered steps, ol would be the better choice.

The mistake to watch for

A common slip is picking a heading level for its size.

<h1>Demo Photo Club</h1>
<h4>When we meet</h4>
<p>Thursday, 3:30 pm in Room 4.</p>

The student wanted a smaller heading, so used h4. But the section sits directly under the main heading, so it is an h2, and the structure now skips levels.

The correction is <h2>When we meet</h2>. If the size is wrong, change it later with a stylesheet rule, not by changing the tag.

Check yourself

1. Which element holds the text shown on the browser tab, and where does it go?

2. A page has the steps “Open the file, edit the text, save it” that must be read in that order. Which list tag suits them?

3. Find the fault: <p>Meet at the hall. followed straight by <p>Bring a camera.</p>

Where this leads next

Once the structure is sound, learn how to present it consistently in Use a stylesheet for consistent presentation. Return to the module guide for the full route, and use the practical task and evidence checker to confirm each requirement is met.

Students often follow each step here but lose marks when a longer task hides the same slip inside several pages. Our teachers look for that pattern in online one-to-one ICT tuition.