How to Use Semantic HTML Elements

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Semantic HTML Example</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
    header { background: #3b82f6; color: white; padding: 20px; }
    nav { background: #1e40af; padding: 10px; }
    nav a { color: white; margin-right: 15px; text-decoration: none; }
    main { padding: 20px; }
    article { border: 1px solid #ddd; padding: 15px; margin: 15px 0; }
    aside { background: #f3f4f6; padding: 15px; float: right; width: 200px; }
    footer { background: #374151; color: white; padding: 15px; text-align: center; clear: both; }
  </style>
</head>
<body>
  <header>
    <h1>My Website</h1>
    <p>Welcome to my semantic HTML page</p>
  </header>
  
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
  
  <main>
    <article>
      <h2>First Article</h2>
      <p>This is the first article using semantic HTML.</p>
      <footer>Published on <time datetime="2024-01-15">January 15, 2024</time></footer>
    </article>
    
    <article>
      <h2>Second Article</h2>
      <p>This is the second article.</p>
      <footer>Published on <time datetime="2024-01-16">January 16, 2024</time></footer>
    </article>
    
    <aside>
      <h3>Sidebar</h3>
      <p>Additional information goes here.</p>
    </aside>
  </main>
  
  <footer>
    <p>&copy; 2024 My Website. All rights reserved.</p>
  </footer>
</body>
</html>