HTML Main and Article

The main element holds the main content of a page. The article element holds a complete piece that can stand alone.

Main content alone

The main element holds the central content of the page. Repeated parts stay outside it.

<main>
  <h1>Today at the bakery</h1>
  <p>Sourdough is back on the menu.</p>
</main>

One article

The article element holds one complete piece. The piece makes sense on its own.

<article>
  <h2>Sourdough returns</h2>
  <p>The old starter is back in use.</p>
</article>

Two articles in main

Main can hold several complete pieces. Each article keeps its own heading and text.

<main>
  <article>
    <h2>Sourdough returns</h2>
    <p>The old starter is back in use.</p>
  </article>
  <article>
    <h2>A new oven</h2>
    <p>The second oven fires up on Monday.</p>
  </article>
</main>

An article with a header

An article can hold its own header. The header opens that one piece.

<article>
  <header>
    <h2>Sourdough returns</h2>
  </header>
  <p>The old starter is back in use.</p>
</article>

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>City Bakery</title>
</head>
<body>
<header>
  <h1>City Bakery</h1>
</header>
<main>
  <article>
    <h2>Sourdough returns</h2>
    <p>The old starter is back in use.</p>
  </article>
  <article>
    <h2>A new oven</h2>
    <p>The second oven fires up on Monday.</p>
  </article>
</main>
</body>
</html>

Key points

main: the main content of a page
article: a complete piece that can stand alone
An article can be a news story or a blog post
Several article elements can sit inside one main element

In this example, the header element holds the bakery name. The main element holds the main content of the page. Inside main, two article elements hold two complete pieces. Each article has its own heading and its own paragraph.

Note

A page holds only one main element.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

<!DOCTYPE html>
<html lang="en">
<head>
<title>City Bakery</title>
</head>
<body>
<header>
  <h1>City Bakery</h1>
</header>
<main>
  <article>
    <h2>Sourdough returns</h2>
    <p>The old starter is back in use.</p>
  </article>
  <article>
    <h2>A new oven</h2>
    <p>The second oven fires up on Monday.</p>
  </article>
</main>
</body>
</html>

Exercise

Which element holds the main content of a page?

article header main footer