Rebuild a page of fakes – HTML Exercise with Solution

This page uses div for everything, including a fake button.

What to build

The same content, using the right element for each job.

Requirements

Subscribe becomes a real button with type="button", with no onclick on a div.
The page title div becomes an h1 inside a header.
The three reviews become article elements, each with its reviewer's name in an h2.
All three reviews are inside a section that has an h2 heading reading Reviews.
The div class="wrapper" around everything stays a div, since it is only for styling.

Constraints

Keep exactly one div on the page.

Example

A review can stand on its own, so it is an article.

Why it works

The button gains keyboard support for free, the reviews become reusable items, and the wrapper stays meaningless, which is correct for it.

Hints

Hint 1

A div that acts as a button should be a button.

Hint 2

Three cards that each stand alone are articles, in a list.

Hint 3

A wrapper used only for styling can stay a div.

Solution

Show one correct solution (try it yourself first)

<div class="wrapper">
  <header><h1>Book reviews</h1></header>
  <button type="button">Subscribe</button>
  <section>
    <h2>Reviews</h2>
    <article><h2>Rina</h2><p>Loved it.</p></article>
    <article><h2>Arif</h2><p>Too long.</p></article>
    <article><h2>Mina</h2><p>Read it twice.</p></article>
  </section>
</div>

Lesson: Semantic HTML: elements that mean something →