{}
Learn web design and development
Free interactive courses
← Back to HTML
09

Semantic HTML: Structure with Meaning

Use elements such as `header`, `nav`, `main`, `section`, `article`, `aside` and `footer` to make a page easier to navigate, maintain and understand.

How much do you know about HTML?

📘 Theory

A Small Map of Core Semantic Elements

These elements give the page a clearer outline.

  • `header` introduces the page or a section.
  • `nav` groups real navigation links.
  • `main` contains the unique main content.
  • `section` groups related content within a topic.
  • `article` works for self-contained content units.
  • `aside` holds complementary information.

A Common Semantic Layout Pattern

This structure already covers many article, blog and landing-page scenarios.

🧪 Learn by doing

Example Guided Example: Replace Generic Wrappers See how a layout becomes clearer when blocks reflect their role.
⌄

🏁 Challenges

Challenge Challenge: Replace Div Wrappers with Semantic Elements Turn a vague layout into a more meaningful one.
⌄

🧰 Resources

Useful links

web.dev: Learn HTML - Semantic HTML MDN: HTML elements reference MDN: <main>
Test

Check your knowledge with a test about HTML.

Test for HTML
Course resources 27
📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets
‹
Lesson 08
Global Attributes in HTML: `id`, `class`, `title`, `hidden` and `data-*`
Lesson 10
Images: `src`, `alt` and Responsive Basics
›

What is this?

I'm Cristian Eslava and I sometimes build websites so both you and I can learn and experiment. culTest

I made this in February 2026 to make learning easier for my students. The idea is to learn web development by practicing and to keep expanding the project with new topics, tests and challenges.

It draws inspiration from MDN, W3Schools, CodePen, Manz and many other web development references. I wanted to combine useful theory, runnable examples, challenges and the testing system I had already built for culTest. culTest

If you liked it, if you didn't, or if you want to get in touch, write to me at cristianeslava@gmail.com