MP Web Studio
HTMLFoundation track
07 / 120

LESSON 07 OF 120

Article and section

Separate independent content from its sections.

Official sourceWHATWG HTML — articleReviewed: 2026-08-26
STEP 1 · LEARN

How it works

An article can stand alone; a section groups a theme.

Correct example
<article>
  <h1>How a website is built</h1>
  <section>
    <h2>Planning</h2>
    <p>Clarify the goal.</p>
  </section>
</article>

article wraps content that can stand alone. section divides it into themes and has its own heading.

Common mistake
<section>
  <p>Clarify the goal.</p>
</section>

The section has no heading to explain its theme, so the structure is difficult to identify.

STEP 2 · APPLY

Your exercise

Create an article with two sections, each with an h2.

STEP 3 · BUILD

Write and see the result

index.htmlHTML
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • The content is inside an article.
  • The article contains two sections.
  • Each section has an h2.
Explain the solution logic

First identify what can stand alone; that becomes article. Then group internal themes in titled sections.