Unit 6 Website Development - Tutorial 1
1.7 Use headings correctly from h1 to h3
Continue the School Coding Club website by adding clear heading levels to each page.
Why Headings Matter
Headings organise content into sections. They help users scan the page and help accessibility tools understand the page structure.
Use headings in order. The main page heading should usually be <h1>. Main sections can use <h2>. Smaller subsections can use <h3>.
Correct Heading Structure
<h1>School Coding Club</h1>
<h2>About the club</h2>
<p>We meet after school to learn web development and programming.</p>
<h3>Who can join</h3>
<p>Students who are interested in coding can join.</p>
<h2>Projects</h2>
<p>Members build websites, games and coding challenges.</p>
Heading Rules
- Use one clear
<h1>for the main page title. - Use
<h2>for major sections. - Use
<h3>for subsections inside a major section. - Do not choose a heading just because of its size. Use CSS to change appearance.
Build It Yourself
- Open
index.html,about.html,timetable.htmlandcontact.html. - Check each page has one clear
<h1>. - Add at least two
<h2>section headings across the website. - Add one
<h3>subsection under a relevant<h2>. - Add a short paragraph under each new heading.
Common Mistakes
- Skipping from
<h1>straight to<h3>without a reason. - Using headings only to make text larger.
- Using several unrelated
<h1>headings on one page. - Writing headings that are too vague, such as More information.
Success Checklist
- Your page has a clear
<h1>. - Your main sections use
<h2>. - Your subsections use
<h3>. - The heading order makes sense when read from top to bottom.