Lesson 2: Semantic HTML | Markup Mason

Using Semantic Elements for Better Structure

Semantic elements convey the role of each part of a webpage. Instead of generic <div> tags, use:

<header>
  <h1>My Website</h1>
</header>

<nav>
  <ul>
    <li><a href=\"/\">Home</a></li>
    <li><a href=\"/about\">About</a></li>
  </ul>
</nav>

<main>
  <article>
    <h2>Blog Post Title</h2>
    <p>Post content goes here.</p>
  </article>
</main>

<footer>
  <p>&copy; 2025 My Website</p>
</footer>

Key Semantic Tags

<header> — Introductory content or site header
<nav> — Navigation links
<main> — Main content of the page
<article> — Self-contained composition (e.g. a blog post)
<section> — Thematic grouping of content
<aside> — Sidebar or complementary content
<footer> — Footer for page or section