Structure a blog post – HTML Exercise with Solution

Mark up a blog post so that it makes sense on its own.

What to build

An article in main, with two sections and a publication date.

Requirements

A main containing one article.
The article starts with an h1 reading Why I walk to work.
A time with datetime="2030-05-01" shows 1 May.
Two section elements in the article, each with an h2: Health and Money.
An aside inside main, but outside the article, with any text.

Constraints

Each section must have a heading.

Example

<time datetime="2030-05-01">1 May</time>

Why it works

The article can stand alone, the sections divide it by theme, and the aside is clearly secondary.

Hints

Hint 1

The whole post is an article. Each part of it with a heading is a section.

Hint 2

The time element needs a datetime attribute.

Solution

Show one correct solution (try it yourself first)

<main>
  <article>
    <h1>Why I walk to work</h1>
    <p>Published <time datetime="2030-05-01">1 May</time></p>
    <section>
      <h2>Health</h2>
      <p>Thirty minutes a day adds up.</p>
    </section>
    <section>
      <h2>Money</h2>
      <p>The bus fare goes in a jar.</p>
    </section>
  </article>
  <aside><p>More from this author</p></aside>
</main>

Lesson: Semantic HTML: elements that mean something →