Semantic HTML: Structure That Means Something

HTML describes what content is: a heading, a navigation menu, an article, a button. Browsers, search engines and screen readers rely on that meaning, so good HTML is the foundation of accessible, findable sites.

The document skeleton

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Panda Bakery — Fresh bread daily</title>
  <meta name="description" content="Family bakery in Leeds. Order online for pickup.">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>
</body>
</html>

• lang helps screen readers pronounce text and browsers offer translation.
• The viewport meta makes the page scale properly on phones.
• title and description appear in search results.

Semantic elements

A page built only of <div>s works visually but is meaningless to assistive technology.

Headings

One <h1> per page describing it, then <h2> for sections, <h3> inside those. Never skip levels to get a smaller font; style with CSS instead. Screen-reader users navigate by headings.

Links and buttons

<a href="/menu">See our menu</a>
<a href="https://maps.example.com" target="_blank" rel="noopener">Directions</a>
<button type="button">Add to basket</button>

Link text should make sense on its own ("See our menu", not "click here").

Images

<img src="sourdough-800.jpg" alt="Sourdough loaf with a crisp golden crust"
     width="800" height="600" loading="lazy">

• alt describes the image for people who cannot see it. Decorative images get alt="".
• width/height let the browser reserve space, preventing layout jumps.
• loading="lazy" delays off-screen images.

Lists and tables

Use <ul>/<ol> for lists (including navigation menus) and <table> only for tabular data, with <th scope="col"> headers.

Exercise

Write the HTML (no CSS yet) for a one-page bakery site: header with logo and nav, a hero with a heading and call-to-action link, a menu section of product <article>s, opening hours in a table, and a footer with contact details. Check it with the W3C validator (validator.w3.org).

Check yourself

• What does the viewport meta tag do?
• When should you use <button> instead of <a>?
• What should the alt text be for a decorative image?