Skip to main content

Phase 2 Exercises: Building Structure 🏗️

Mentor's Note: These exercises take you from a plain document to a properly structured news article page. You'll master semantic HTML5 tags that give meaning to your content — think of them as the scaffolding that makes your web page well-organised and accessible!

📍 Prerequisites​

Before attempting these exercises, complete these lessons:

🎯 Exercise Flow​

🔰 Starter Challenge: Convert Plain Text to Semantic HTML​

Title​

Convert a Plain Text Document into Semantic HTML

Description​

Take the following plain text document and mark it up using semantic HTML5 tags. Replace generic <div> elements with <header>, <main>, <footer>, and <section>. This exercise teaches you to think about the meaning of each content block, not just its visual appearance.

Learning Objectives​

  • Identify the logical sections of a document
  • Use <header> for introductory content
  • Use <main> for primary page content
  • Use <footer> for closing metadata
  • Use <section> to group related content
  • Understand why semantic tags matter for accessibility and SEO

HTML Starter Code​

<!-- Plain text to convert: -->
My Blog
Welcome to my blog about web development.
Today I learned about semantic HTML.
Semantic HTML means using tags that describe the content.
Some examples: header, main, footer, article, section.
Contact me at: [email protected]
© 2026

<!-- Convert this into a proper semantic HTML page -->
<!DOCTYPE html>
<html>
<head>
    <title>My Blog - Semantic HTML</title>
</head>
<body>
    <!-- TODO: Add <header> with the blog title -->
    <!-- TODO: Add <main> with an <article> about semantic HTML -->
    <!-- TODO: Add <footer> with contact and copyright -->
</body>
</html>

Expected Output​

A browser page showing:

  • A <header> with the main blog title
  • A <main> section containing an <article> with paragraphs
  • A <footer> with copyright and contact information
  • Proper heading hierarchy (h1 in header, h2 in article)

Reference Solution Hint​

<header>
    <h1>My Blog</h1>
</header>
<main>
    <article>
        <h2>Learning Semantic HTML</h2>
        <p>Semantic HTML means using tags that describe the content.</p>
    </article>
</main>
<footer>
    <p>Contact: [email protected]</p>
    <p>&copy; 2026</p>
</footer>

⭐ Medium Challenge: Blog Article Layout​

Title​

Build a Blog Article Layout with Table of Contents

Description​

Create a complete blog article page with a semantic layout. Include a header with site title, a main content area with an article, a table of contents linking to sections within the article, and a data table showing blog post statistics.

Learning Objectives​

  • Combine <header>, <main>, <article>, and <footer> in one page
  • Build a Table of Contents using anchor links (href="#id")
  • Create a data table with <table>, <thead>, <tbody>, <th>, <td>
  • Use <section> inside <article> to split content
  • Add a sidebar or supplementary section with <aside>

HTML Starter Code​

<!DOCTYPE html>
<html>
<head>
    <title>My Blog - Web Development Tips</title>
</head>
<body>

    <header>
        <h1>The Dev Corner</h1>
        <p>A blog about web development for beginners</p>
    </header>

    <main>
        <article>
            <h2>Getting Started with HTML5</h2>
            <p>Published on: March 1, 2026</p>

            <!-- Table of Contents -->
            <h3>Table of Contents</h3>
            <ul>
                <li><a href="#intro">Introduction</a></li>
                <li><a href="#what-is">What is HTML5?</a></li>
                <li><a href="#why-semantic">Why Semantic Tags?</a></li>
            </ul>

            <section id="intro">
                <h3>Introduction</h3>
                <p>HTML5 is the latest version of HTML...</p>
            </section>

            <section id="what-is">
                <h3>What is HTML5?</h3>
                <p>HTML5 introduces new semantic elements...</p>
            </section>

            <section id="why-semantic">
                <h3>Why Semantic Tags?</h3>
                <p>Semantic tags improve accessibility and SEO...</p>
            </section>

            <!-- Data Table -->
            <h3>Blog Statistics</h3>
            <table border="1">
                <thead>
                    <tr>
                        <th>Month</th>
                        <th>Posts</th>
                        <th>Visitors</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>January</td>
                        <td>5</td>
                        <td>1200</td>
                    </tr>
                    <tr>
                        <td>February</td>
                        <td>3</td>
                        <td>980</td>
                    </tr>
                    <tr>
                        <td>March</td>
                        <td>4</td>
                        <td>1500</td>
                    </tr>
                </tbody>
            </table>
        </article>

        <aside>
            <h3>About the Author</h3>
            <p>Hi! I'm a web development enthusiast sharing what I learn.</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 The Dev Corner. All rights reserved.</p>
    </footer>

</body>
</html>

Expected Output​

A browser page showing:

  • A header with blog title and tagline
  • A table of contents with clickable links to article sections
  • Three article sections with headings and paragraphs
  • A data table with 3 columns and 4 rows (header + 3 data rows)
  • An aside about the author
  • A footer with copyright

🏆 Hard Challenge: Complete News Article Page​

Title​

Create a Complete News Article Page

Description​

Build a full news article page that mirrors a real news website. It must include a site header with navigation links, the main article content, an aside with related articles and advertisement placeholder, and a complex table using colspan and rowspan for a schedule or scores table.

Learning Objectives​

  • Build a complete page with <header>, <nav>, <main>, <article>, <aside>, <footer>
  • Use colspan and rowspan to merge table cells
  • Create a multi-link navigation bar
  • Design a realistic news layout with primary and secondary content
  • Use semantic tags exactly as they are intended

HTML Starter Code​

<!DOCTYPE html>
<html>
<head>
    <title>Daily Tech News - Breaking Stories</title>
</head>
<body>

    <header>
        <h1>Daily Tech News</h1>
        <nav>
            <a href="#world">World</a> |
            <a href="#tech">Tech</a> |
            <a href="#science">Science</a> |
            <a href="#sports">Sports</a> |
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main>
        <article>
            <h2>HTML5 Reaches New Milestone</h2>
            <p><strong>By Jane Doe</strong> | March 15, 2026</p>

            <section>
                <h3>The Evolution of Web Standards</h3>
                <p>HTML5 has become the backbone of modern web development...</p>
                <p>With new features like native video support and semantic elements...</p>
            </section>

            <section>
                <h3>What This Means for Developers</h3>
                <p>Developers can now build more accessible websites...</p>
            </section>

            <!-- Complex Table: Weekly Schedule -->
            <h3>Conference Schedule</h3>
            <table border="1">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Room A</th>
                        <th>Room B</th>
                        <th>Room C</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>9:00 AM</td>
                        <td colspan="2">Keynote Address (Rooms A & B)</td>
                        <td>Workshop: Intro to HTML</td>
                    </tr>
                    <tr>
                        <td>10:30 AM</td>
                        <td>Semantic HTML</td>
                        <td>CSS Grid</td>
                        <td rowspan="2">JavaScript Basics</td>
                    </tr>
                    <tr>
                        <td>11:30 AM</td>
                        <td>Forms & Validation</td>
                        <td>Responsive Design</td>
                    </tr>
                    <tr>
                        <td>1:00 PM</td>
                        <td colspan="3">Lunch Break (All Rooms)</td>
                    </tr>
                </tbody>
            </table>
        </article>

        <aside>
            <h3>Related Articles</h3>
            <ul>
                <li><a href="#">CSS3: The Complete Guide</a></li>
                <li><a href="#">JavaScript for Beginners</a></li>
                <li><a href="#">Web Accessibility Basics</a></li>
            </ul>

            <h3>Advertisement</h3>
            <img src="https://via.placeholder.com/200x200" alt="Advertisement placeholder">
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 Daily Tech News. All rights reserved.</p>
        <nav>
            <a href="#">Privacy Policy</a> |
            <a href="#">Terms of Service</a> |
            <a href="#">Contact Us</a>
        </nav>
    </footer>

</body>
</html>

Expected Output​

A browser page showing:

  • A header with site title and 5-link navigation bar
  • A main article with author byline and date
  • Two sections of article content
  • A complex conference schedule table with merged cells:
    • Keynote spans 2 columns (colspan="2")
    • JavaScript Basics spans 2 rows (rowspan="2")
    • Lunch Break spans all 3 columns (colspan="3")
  • An aside with related article links and an ad placeholder
  • A footer with copyright and footer navigation

💡 Tips for Success​

  • Test your page with a screen reader to experience semantic HTML benefits
  • Use the W3C Nu HTML Checker for validation
  • Remember: colspan merges horizontally, rowspan merges vertically
  • Keep navigation consistent between pages

← Back to HTML Exercises