Day 1: Semantic HTML5 Elements

Daily Objective

Master semantic HTML5 tags to structure web content clearly for browsers, screen readers, and search engines.

1. Why Semantics Matter

Semantic markup uses tags that describe their meaning and purpose rather than generic dividers like <div>. This enhances accessibility, improves SEO, and makes code maintainable.

<header>
  <h1>Tech Chronicles</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#articles">Articles</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="articles">
    <h2>Recent Posts</h2>
    <article>
      <h3>Introduction to Semantic Markup</h3>
      <p>Semantic tags help screen readers navigate pages with ease.</p>
    </article>
  </section>

  <aside>
    <h3>About the Author</h3>
    <p>Web developer passionate about accessible technology.</p>
  </aside>
</main>

<footer>
  <p>&copy; 2026 Tech Chronicles. All rights reserved.</p>
</footer>

Daily Hands-on Practice (70%)

1. Take your Week 1 “About Me” page and wrap sections in <header>, <nav>, <main>, <section>, and <footer>.
2. Add an <aside> section containing fun facts or quick contact links.