Main content

Learn to use article and section inside <main>.

main and content hierarchy

The page's real content goes inside <main>. A page has only one <main>; logo, menu and footer do not belong here, they go to header and footer. When a screen-reader user says 'jump to main', they land here.

Inside <main> you usually lay <article> and <section>. This order, called content hierarchy, breaks a big topic into smaller pieces; the reader does not get lost while scanning.

article vs section

<article> is a self-contained, independent piece: a blog post, a news item, a comment. It keeps its meaning even when moved to another page. It usually holds a heading and a body.

<section> is a part gathered around a theme; it does not need to stand alone. It suits marking areas like 'Comments' or 'Related posts' on a page. Both should hold a heading inside.

Exercise Lay article and section inside main

Add a <main> to body. Inside main put an <article>; inside the article put an <h2> (text This week) and a <p> (non-empty). Inside main also put a <section>; inside the section put an <h2> (text Best sellers). All headings must be non-empty.

Show example solution

<body>
  <main>
    <article>
      <h2>This week</h2>
      <p>This week's issue of the cheese magazine...</p>
    </article>
    <section>
      <h2>Best sellers</h2>
    </section>
  </main>
</body>

How to build content hierarchy

When you split the page, ask: 'Is this piece a stand-alone article, or only a part of the page?' If it stands alone use <article>; if it only gathers a theme use <section>. They can nest: an <article> may hold a <section> inside.

Each part should carry its own heading; that keeps the document outline right. As you go deeper, the heading level grows: <h2>, then <h3>.

Test yourself

Which fits <main> best?
- The site logo
- Footer links
- A news article
- A banner ad
Show answer

A news article — Correct. A news article is the page's real content; it fits main.

Complete the article heading

<article>
  <____>History of cheese</h2>
  <p>Cheese has been on our tables for thousands of years...</p>
</article>

Show answer

<article>
  <h2>History of cheese</h2>
  <p>Cheese has been on our tables for thousands of years...</p>
</article>

Match the content tags

main

Main content
article

Self-contained post
section

Theme section
h2

Sub-heading

Next lesson: Sidebar and aside

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies