The video is part of the full course
In this lesson you will
- Choose elements by meaning, not by looks
- Build a heading outline that never skips a level
- Write useful alt text, and know when it should be empty
- Add a skip link and labelled landmarks
Semantic HTML means picking the element that describes what something is. A screen reader announces a <nav> as navigation and lets its user jump straight to <main>. Search engines read headings to understand a page's structure. None of that works if everything is a <div>. In this lesson we rework the bakery page so its structure is clear to people, assistive technology and search engines alike.
The reworked page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sunrise Bakery | Fresh bread every morning</title>
<meta name="description" content="Sunrise Bakery bakes bread, buns and cakes fresh every morning. See today's menu, opening hours and how to find us.">
</head>
<body>
<!-- 1. Keyboard users can jump straight past the navigation. -->
<a href="#main">Skip to main content</a>
<header>
<img src="logo.svg" alt="" width="64" height="64">
<p><strong>Sunrise Bakery</strong></p>
<!-- 2. aria-label names this landmark for screen readers. -->
<nav aria-label="Main">
<ul>
<li><a href="#menu">Menu</a></li>
<li><a href="#hours">Hours</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="main">
<h1>Fresh bread, every morning</h1>
<p>We start baking at 5 a.m. so the bread on our shelves is never more than a few hours old.</p>
<section id="menu" aria-labelledby="menu-title">
<h2 id="menu-title">Today's menu</h2>
<article>
<h3>Sourdough loaf</h3>
<p>Slow-fermented for 24 hours.</p>
<p><data value="180">₹180</data> a loaf</p>
</article>
<article>
<h3>Butter buns</h3>
<p>Soft, golden, sold in sixes.</p>
<p><data value="120">₹120</data> for six</p>
</article>
<figure>
<img src="logo.svg" alt="The Sunrise Bakery sun rising over a loaf-shaped horizon" width="120" height="120">
<figcaption>Our logo, drawn by a regular customer.</figcaption>
</figure>
</section>
<section id="hours" aria-labelledby="hours-title">
<h2 id="hours-title">Opening hours</h2>
<dl>
<dt>Monday to Saturday</dt>
<dd><time datetime="07:00">7 a.m.</time> to <time datetime="20:00">8 p.m.</time></dd>
<dt>Sunday</dt>
<dd>Closed</dd>
</dl>
</section>
<section id="contact" aria-labelledby="contact-title">
<h2 id="contact-title">Contact</h2>
<address>
Sunrise Bakery, 12 Example Road, Lucknow<br>
<a href="tel:+910000000000">+91 00000 00000</a> ·
<a href="mailto:hello@example.com">hello@example.com</a>
</address>
</section>
</main>
<footer>
<p><small>© 2026 Sunrise Bakery</small></p>
</footer>
</body>
</html>Continue with the full course
The rest of this lesson, the narrated video, the PDF and the exercise are part of Web Development Foundations. One payment, lifetime access.
Buy the course$39.00
Already bought it? Sign in with the email you paid with.