<main> / <article>

<main> is an element that represents the primary content of a page, and <article> is an element that represents a self-contained piece of content — such as a news article or blog post — that can stand on its own.

Syntax

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article body text...</p>
  </article>
</main>

Tag	Description
<main>	Represents the primary (main) content of the page. Only one `<main>` element can be used per page.
<article>	Represents a self-contained piece of content — such as a blog post, news article, forum post, or product description — that can be independently distributed or reused.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>main / article Example</title>
</head>
<body>

  <header>
    <h1>Programming Blog</h1>
  </header>

  <!-- Primary content of the page -->
  <main>

    <!-- First article -->
    <article>
      <header>
        <h2>What is HTML?</h2>
        <time datetime="2024-01-10">January 10, 2024</time>
      </header>
      <p>HTML stands for HyperText Markup Language. It is the language used to describe the structure of web pages.</p>
      <footer>
        <p>Category: HTML Basics</p>
      </footer>
    </article>

    <!-- Second article -->
    <article>
      <header>
        <h2>What is CSS?</h2>
        <time datetime="2024-01-15">January 15, 2024</time>
      </header>
      <p>CSS stands for Cascading Style Sheets. It is the language used to apply visual styles to the structure created with HTML.</p>
      <footer>
        <p>Category: CSS Basics</p>
      </footer>
    </article>

  </main>

  <footer>
    <p>© 2024 Programming Blog</p>
  </footer>

</body>
</html>

Result

Two articles are displayed in the main content area of the page. Each article includes a title, date, body text, and category, and is treated as an independent piece of content.

Notes

<main> wraps the unique primary content of a page. Use only one <main> element per page. Content that is repeated across multiple pages — such as headers, footers, and sidebars — should be placed outside of <main>. It is also an important landmark element used by screen readers to implement "skip to main content" navigation.

A good rule of thumb for <article> is to ask: "Could this content be distributed or reused on its own?" It is well suited for blog posts, news articles, forum posts, and product descriptions — any content that would make sense in an RSS feed as a standalone item. You can also nest one <article> inside another (for example, comments inside a post).

Use section / aside to divide sections of content, and header / footer for page-level header and footer areas. Combining these elements creates a meaningful document structure.