DivSoupPage.jsx

import React from 'react';

function DivSoupPage() {
  return (
    <div className="container">
      <header className="top-bar">
        <div className="brand">My Awesome Blog</div>
        <nav className="menu" aria-label="Main navigation">
          <ul>
            <li><a href="#" className="menu-item">Home</a></li>
            <li><a href="#" className="menu-item">Articles</a></li>
            <li><a href="#" className="menu-item">About</a></li>
            <li><a href="#" className="menu-item">Contact</a></li>
          </ul>
        </nav>
      </header>
      <main className="content-area">
        <article className="primary-content">
          <header className="content-top">
            <h1 className="big-title">Understanding Semantic HTML</h1>
            <div className="info-row">
              <span className="info-item">By <strong>Jane Doe</strong></span>
              <time className="info-item" dateTime="2026-01-23">January 23, 2026</time>
            </div>
          </header>
          <section className="text-content">
            <p className="text-block">
              Semantic HTML is the foundation of accessible web development. It provides meaning to your content, making it easier for screen readers, search engines, and developers to understand your page structure.
            </p>
            <p className="text-block">
              When you use semantic elements, you're not just styling your page—you're creating a meaningful document structure that benefits everyone.
            </p>
            <p className="text-block">
              This page is intentionally built with divs to demonstrate what NOT to do. Your task is to refactor it using proper HTML elements.
            </p>
          </section>
          <footer className="content-bottom">
            <nav className="pill-group" aria-label="Article tags">
              <ul>
                <li><a href="#" className="pill">HTML</a></li>
                <li><a href="#" className="pill">Accessibility</a></li>
                <li><a href="#" className="pill">Web Development</a></li>
              </ul>
            </nav>
          </footer>
        </article>
        <aside className="secondary-content">
          <section className="box">
            <h2 className="box-title">Related Articles</h2>
            <article className="box-item">
              <h3 className="item-title"><a href="#">CSS Best Practices</a></h3>
              <time className="item-subtitle" dateTime="2026-01-20">Jan 20, 2026</time>
            </article>
            <article className="box-item">
              <h3 className="item-title"><a href="#">React Fundamentals</a></h3>
              <time className="item-subtitle" dateTime="2026-01-15">Jan 15, 2026</time>
            </article>
            <article className="box-item">
              <h3 className="item-title"><a href="#">JavaScript Tips</a></h3>
              <time className="item-subtitle" dateTime="2026-01-10">Jan 10, 2026</time>
            </article>
          </section>
        </aside>
      </main>
      <footer className="bottom-bar">
        <nav className="link-row" aria-label="Footer navigation">
          <ul>
            <li><a href="#" className="text-link">Privacy Policy</a></li>
            <li><a href="#" className="text-link">Terms of Service</a></li>
            <li><a href="#" className="text-link">FAQ</a></li>
          </ul>
        </nav>
        <small className="small-text">© 2026 My Awesome Blog. All rights reserved.</small>
      </footer>
    </div>
  );
}

export default DivSoupPage;