A webpage should make sense even when someone cannot see its colors, pictures, or layout.
What You Need to Know
Semantic HTML gives a page a meaningful shape. A screen reader can announce its main navigation, main content, and other regions instead of making someone read everything from the top.
In this example: refactor a div-only page to semantic regions.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<header><h1>School news</h1></header>
<nav aria-label="Main menu"><a href="/news">News</a></nav>
<main>
<article>
<h2>New science club</h2>
<p>Students meet every Friday.</p>
</article>
</main>
<footer><p>School newspaper</p></footer>Let’s Read the Code
- <h1>: A top-level heading explains what the page is about.
- <nav>: Navigation elements identify groups of important links.
- aria-label: Aria-label supplies an accessible name when a visible one is not available.
- href: Href is the URL to a related resource or destination.
What the example shows: Header, nav, main, article, and footer name real parts of the page rather than simply creating anonymous containers.
What Happens in the Browser?
Try this with Tab and Shift+Tab. If you can, inspect the accessibility tree too; appearance alone does not tell the whole story.
What does assistive technology receive? The example includes aria-label. These relationships can explain names, states, or descriptions when used correctly. They do not automatically move focus, listen for clicks, or create keyboard handling.
Your Turn
Replace main with div and compare the landmarks exposed to assistive technology.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- Not every visually separated box needs an article or section element.
Key Takeaways
- Semantic HTML gives a page a meaningful shape.
- <h1>: A top-level heading explains what the page is about.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.