Welcome to this HTML5 semantic layout tutorial. Instead of building pages with plain <div> everywhere, HTML5 gives us meaningful tags that describe what each part of a page actually is.
This is Tutorial 6 of 8 in our complete HTML series on Tutorials Ocean’s HTML category. If you missed it, check out Tutorial 5: HTML Forms first.
Why Semantic HTML Matters
A <div> tells the browser nothing about its content. A semantic tag like <nav> or <footer> tells the browser, screen readers, and search engines exactly what that section is for.
This is the main reason every modern HTML5 semantic layout tutorial recommends semantic tags over generic divs — better accessibility, better SEO, and cleaner code that’s easier to read.
The Core Semantic Tags
<header>...</header>
<nav>...</nav>
<main>...</main>
<section>...</section>
<article>...</article>
<aside>...</aside>
<footer>...</footer>| Tag | Purpose |
|---|---|
| <header> | Top section — usually logo, title, or intro content |
| <nav> | Navigation links/menu |
| <main> | The primary content of the page (only one per page) |
| <section> | A themed group of content, usually with its own heading |
| <article> | Self-contained content — a blog post, news story, or card |
| <aside> | Side content — related links, ads, author bio |
| <footer> | Bottom section — copyright, contact info, social links |
Section vs Article: The Common Confusion
Most beginners mix these two up in every HTML5 semantic layout tutorial, so let’s clear it up simply.
Use <article> when the content makes sense completely on its own — like a blog post that could be shared or read separately. Use <section> when you’re just grouping related content together within a page, like a “Services” block on a homepage.
<section>
<h2>Our Services</h2>
<article>
<h3>Web Development</h3>
<p>We build custom websites.</p>
</article>
<article>
<h3>AI Automation</h3>
<p>We automate business workflows.</p>
</article>
</section>For the full official reference, check the MDN documentation on HTML sectioning elements.
Building a Complete Page Skeleton
Here’s how a real page structure looks once you put all the semantic tags together.
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>Some content here.</p>
</section>
</main>
<aside>
<h3>Related Links</h3>
</aside>
<footer>
<p>© 2026 My Website</p>
</footer>
</body>Notice there’s no <div> anywhere in this skeleton — every part of the layout now has real meaning. This structure is the backbone of any solid HTML5 semantic layout tutorial.
When to Still Use div and span
Semantic tags don’t replace <div> and <span> completely. Use them when there’s no semantic meaning to describe — like a purely visual wrapper for styling purposes with CSS.
Practice Exercise
Rebuild your index.html file from Tutorials 1 to 5 using proper semantic structure instead of plain divs.
Requirements:
- Wrap your name and a nav menu inside <header>
- Put your “About Me”, “Skills”, and “Schedule” sections inside <main>, each wrapped in its own <section>
- Wrap your “Contact Me” form inside its own <section> as well
- Add an <aside> with a short “Fun Fact About Me”
- Add a <footer> with a copyright line and your email link
Bonus challenge: Add an <article> tag for one specific project you’re proud of, with its own heading and description.
Save your file, refresh your browser, and compare how much cleaner and more organized your code looks now.
What’s Next?
This completes Tutorial 6 of our HTML5 semantic layout tutorial series. In Tutorial 7, we’ll cover HTML meta tags, attributes, and SEO basics every developer should know.
This HTML5 semantic layout tutorial is part of the complete HTML series on Tutorials Ocean — practical, beginner-friendly web development tutorials. Follow along and build real projects as you learn.
