Goal
You’ll build a complete, genuinely semantic and accessible page structure from scratch, directly applying the planning process from the previous lesson and the specific element choices from every earlier Part of this course.
Learn
Let’s build the blog homepage planned conceptually in the previous lesson, applying real choices from across this entire course:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog</title>
<meta name="description" content="Thoughts on web development, design, and building things.">
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<a href="/">Home</a>
<a href="/about.html">About</a>
</nav>
</header>
<main>
<article>
<h2>My First Post</h2>
<p>Post preview text goes here...</p>
<a href="/post1.html">Read more</a>
</article>
</main>
<aside>
<h2>Recent Comments</h2>
</aside>
<footer>
<p>© 2026 My Blog</p>
</footer>
</body>
</html>
Notice how directly this reflects earlier lessons: viewport and meta description (Part 4.4), semantic header/nav/main/article/aside/footer (Part 2.3), a single genuine <h1> with <h2> for each post following proper hierarchy (Part 1.3), and relative links for internal navigation (Part 1.4). None of this is new syntax — it’s the direct, combined application of everything already learned, exactly the actual point of a capstone Part.
Decision Task
In the example above, why does each blog post’s title use <h2>, not <h1>, even though it’s visually a prominent heading for that post?
Show Answer
Because the page already has one genuine <h1> representing the page’s overall main topic (“My Blog”), and headings should descend in logical order, not skip or duplicate levels (Part 1.3). Each individual post title, while visually prominent, is structurally a subsection of the page, correctly represented as <h2>, not a second competing <h1>.
Common Mistake
Building a page like this correctly in isolation, but forgetting details covered in earlier, separate lessons — like omitting the viewport meta tag (Part 4.4) or using absolute paths for internal links (Part 1.4) — simply because those specific lessons feel disconnected from “building a real page” by the time you reach a capstone exercise. Real pages need everything from every earlier lesson working together, not just the most recently covered material.
Practice Questions
1. Why does the example use <article> for each blog post rather than <section>?
Show Answer
Each blog post is genuinely standalone content that would make sense shared or syndicated independently, matching article’s specific definition from Part 2.3, rather than just being a thematic grouping.
2. What would be lost, specifically, if the meta description were removed from this page’s head?
Show Answer
Control over how the page’s snippet appears in search engine results (Part 4.4) — search engines would likely auto-generate a potentially awkward snippet instead of using the deliberately written one.
3. Why does the nav element use relative paths (“/”) rather than full absolute URLs?
Show Answer
Following Part 1.4’s reasoning — relative paths continue working correctly even if the site later moves to a different domain, unlike hardcoded absolute paths.
4. True or False: this example page would still be reasonably accessible even without the aside element correctly used for the comments section.
Show Answer
False, or at least meaningfully worse — using aside correctly (Part 2.3) lets screen reader users understand this is supplementary, not primary, content, and enables jumping directly to it as a distinct region.
5. What single missing element would most likely break this page’s mobile responsiveness, based on Part 4.4?
Show Answer
The viewport meta tag — without it, the page would render at desktop scale and shrink awkwardly on mobile, regardless of how well the rest of the semantic structure is built.
Try It Yourself
Extend this example page by adding a simple contact form in a new section, using what you learned in Part 3 — a properly labeled email input and a submit button, with method=”post”.
Show Answer
A reasonable answer nests a <form method=”post” action=”/contact”> inside a new <section>, containing a properly connected <label for=”email”>Email</label> and <input type=”email” id=”email” name=”email” required>, plus a <button type=”submit”>Send</button> — directly combining Part 3.1’s label connection, Part 3.2’s input type, and Part 3.4’s method choice.
Quick Check
1. Why does each blog post title use h2, not h1, in this example?
Show Answer
The page already has one genuine h1 for its overall topic; post titles are structurally subsections, following proper heading hierarchy.
2. Why does the example use article for each blog post?
Show Answer
Each post is genuinely standalone, shareable content, matching article’s specific semantic definition.
3. What does the meta description tag in this example control?
Show Answer
How the page’s snippet appears in search engine results.
4. Why does the nav element use relative rather than absolute paths?
Show Answer
So links continue working correctly even if the site later changes domains.
5. What Part 4 element is essential for correct mobile rendering, and is included in this example’s head?
Show Answer
The viewport meta tag.