Skip to content

Refactor to semantic HTML: replace divs with header, nav, main, artic… #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ananthu-tp wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactor to semantic HTML: replace divs with header, nav, main, artic… #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 63 additions & 57 deletions exercise-1-semantic-refactor/src/DivSoupPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,69 +3,75 @@ import React from 'react';
function DivSoupPage() {
return (
<div className="container">
<div className="top-bar">
<header className="top-bar">
<div className="brand">My Awesome Blog</div>
<div className="menu">
<div className="menu-item">Home</div>
<div className="menu-item">Articles</div>
<div className="menu-item">About</div>
<div className="menu-item">Contact</div>
</div>
</div>
<div className="content-area">
<div className="primary-content">
<div className="content-top">
<div className="big-title">Understanding Semantic HTML</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">
<div className="info-item">By Jane Doe</div>
<div className="info-item">January 23, 2026</div>
<span className="info-item">By <strong>Jane Doe</strong></span>
<time className="info-item" dateTime="2026-01-23">January 23, 2026</time>
</div>
</div>
<div className="text-content">
<div className="text-block">
</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.
</div>
<div className="text-block">
</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.
</div>
<div className="text-block">
</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.
</div>
</div>
<div className="content-bottom">
<div className="pill-group">
<div className="pill">HTML</div>
<div className="pill">Accessibility</div>
<div className="pill">Web Development</div>
</div>
</div>
</div>
<div className="secondary-content">
<div className="box">
<div className="box-title">Related Articles</div>
<div className="box-item">
<div className="item-title">CSS Best Practices</div>
<div className="item-subtitle">Jan 20, 2026</div>
</div>
<div className="box-item">
<div className="item-title">React Fundamentals</div>
<div className="item-subtitle">Jan 15, 2026</div>
</div>
<div className="box-item">
<div className="item-title">JavaScript Tips</div>
<div className="item-subtitle">Jan 10, 2026</div>
</div>
</div>
</div>
</div>
<div className="bottom-bar">
<div className="link-row">
<div className="text-link">Privacy Policy</div>
<div className="text-link">Terms of Service</div>
<div className="text-link">FAQ</div>
</div>
<div className="small-text">© 2026 My Awesome Blog. All rights reserved.</div>
</div>
</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>
);
}
Expand Down