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