01 | MEANING BEFORE APPEARANCE

A browser can display both a div and a heading as a large coloured box. But only the heading tells software that the content is a heading. Semantic HTML means choosing elements for their meaning and purpose.

People may navigate using a keyboard, a screen reader or a small screen. Meaningful elements make the structure available beyond its visual appearance.

CSS controls presentation. HTML describes the content. A pink background does not make a box a warning, and a large font does not turn a div into a heading.

02 | GIVE THE PAGE A RECOGNIZABLE STRUCTURE

<header>
  <p>Robotics Club</p>
  <nav aria-label="Main navigation">
    <a href="index.html">Home</a>
    <a href="projects.html">Projects</a>
  </nav>
</header>

<main id="main-content">
  <h1>Our robotics projects</h1>
  <p>Explore what the club is building.</p>
</main>

<footer>
  <p>Contact the club leader for meeting details.</p>
</footer>

• header: introductory content for a page or section. It is not the same as the document head.
• nav: a major navigation area, not every group of links.
• main: the page’s main content. Use one visible main element in these pages.
• footer: closing information for a page or section.

Page-level header and footer can provide landmarks. Header and footer nested in sectioning content have a more local role. The placement and context of an element matter.

03 | SECTION, ARTICLE AND ASIDE

<section aria-labelledby="projects-heading">
  <h2 id="projects-heading">Current projects</h2>

  <article>
    <h3>Delivery robot</h3>
    <p>A self-contained project update.</p>
  </article>

  <article>
    <h3>Robot hand</h3>
    <p>Another project update.</p>
  </article>
</section>

<aside>
  <h2>Related reading</h2>
  <p>Explore guides to choosing sensors.</p>
</aside>

A section groups a thematic part of a document, usually with a heading. An article is a self-contained composition, such as a news post or project report, that could make sense independently. An aside contains related content that is separate from the main discussion.

Do not turn every layout box into an article or section. Ask what the content means. If a container is only needed for styling and has no better semantic role, a div is appropriate.

aria-labelledby in this example gives the section an accessible name by referring to the heading’s id. ARIA is a supporting tool; meaningful native HTML remains the starting point.

04 | HEADINGS AND READING ORDER

Use one clear h1 for this beginner page, h2 for its main sections and h3 for subsections. Do not choose a heading level to get a smaller font. CSS can change its appearance without changing its meaning.

Put content in a logical source order. A screen reader or keyboard user may encounter that order even when a visual layout positions elements differently.

<main>
  <h1>Robotics Club</h1>
  <section>
    <h2>Projects</h2>
    <h3>Delivery robot</h3>
    <p>Project details.</p>
  </section>
  <section>
    <h2>How to join</h2>
    <p>Joining instructions.</p>
  </section>
</main>

Keep link text descriptive and retain useful alternative text for images. Landmarks help people move between areas, while headings help them explore the content within those areas.

05 | LINKS NAVIGATE, BUTTONS ACT

<a href="projects.html">View our projects</a>
<button type="button">Reveal project details</button>

Use a link to go to a destination. Use a button for an action, such as revealing information. A button’s text does not make it perform that action automatically; behaviour may need JavaScript.

Native links and buttons have built-in keyboard behaviour. Do not replace them with clickable div elements just because they can be styled similarly. A div does not automatically become keyboard-operable or gain button semantics.

Use clear labels. A button called “Reveal project details” is more useful than an unexplained icon. Do not put a button inside a link or a link inside a button.

06 | HELP KEYBOARD USERS REACH THE CONTENT

<a class="skip-link" href="#main-content">Skip to main content</a>

<header>
  <nav aria-label="Main navigation">
    <a href="index.html">Home</a>
    <a href="projects.html">Projects</a>
  </nav>
</header>

<main id="main-content" tabindex="-1">
  <h1>Our projects</h1>
  <p>Main content begins here.</p>
</main>

A skip link lets people bypass repeated navigation. Place it near the beginning of the body. For this first version, leave it visible. Later, CSS can show it on focus, but it must remain usable.

tabindex="-1" makes this main element focusable without adding it to the normal Tab sequence. Do not add positive tabindex values to force a custom order; logical source order is generally easier to maintain.

Do not remove focus indicators. Keyboard users need to see which link or control currently has focus.

07 | A COMPLETE SEMANTIC PAGE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Robotics Club projects</title>
</head>
<body>
  <a href="#main-content">Skip to main content</a>
  <header>
    <p>Robotics Club</p>
    <nav aria-label="Main navigation">
      <a href="index.html">Home</a>
      <a href="projects.html">Projects</a>
    </nav>
  </header>

  <main id="main-content" tabindex="-1">
    <h1>Our projects</h1>
    <section aria-labelledby="current-projects">
      <h2 id="current-projects">Current projects</h2>
      <article>
        <h3>Delivery robot</h3>
        <p>We are testing a robot that carries parcels.</p>
      </article>
      <article>
        <h3>Robot hand</h3>
        <p>We are building a hand with moving fingers.</p>
      </article>
    </section>
  </main>

  <aside>
    <h2>Related reading</h2>
    <p><a href="resources.html">Explore our robotics resources</a></p>
  </aside>
  <footer>
    <p>Ask the club leader about joining.</p>
  </footer>
</body>
</html>

The example uses an aside for supplementary reading and articles for independent project updates. A different page may use different elements. Semantic structure should follow the content, not a compulsory template.

08 | TEST, DON’T JUST ASSUME

1. Open your page and use Tab and Shift+Tab to move through links and controls.
2. Check that focus is visible and follows a sensible order.
3. Activate links with Enter. Test native buttons with Enter and Space.
4. Try the skip link and check it reaches the main content.
5. Review the heading hierarchy and the order of the HTML source.
6. Confirm that every id is unique and every reference points to an existing target.

Semantic HTML improves accessibility, but does not guarantee it. Contrast, text alternatives, forms, responsive layouts and interactive behaviour also need attention. This lesson establishes a strong structural foundation.