<main> / <article>

Since:		HTML5（2014）

<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

sample_main_article.html

<!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.

View sample page

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.

Browser Compatibility

Desktop

Chrome

26 and later ○

25 and earlier ×

Firefox

21 and later ○

20 and earlier ×

Safari

7 and later ○

6 and earlier ×

Edge

12 and later ○

Not supported ×

Opera

16 and later ○

15 and earlier ×

Mobile

iOS Safari

7 and later ○

6 and earlier ×

Android Browser

4.4 and later ○

4 and earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

* Version data based on MDN.

Practical Page Structure

A commonly used page structure that combines <main> and <article>.

<!-- Blog article listing page structure -->
<body>
  <header>
    <nav>...navigation...</nav>
  </header>

  <main>
    <!-- Article list: each article is an independent article element -->
    <article>
      <header>
        <h2><a href="/posts/1?lang=en">Understanding JavaScript Promises</a></h2>
        <time datetime="2024-03-15">March 15, 2024</time>
      </header>
      <p>Introduction to the article...</p>
      <footer>
        <a href="/posts/1?lang=en">Read more</a>
      </footer>
    </article>

    <article>
      <header>
        <h2><a href="/posts/2?lang=en">Introduction to CSS Grid Layout</a></h2>
        <time datetime="2024-03-10">March 10, 2024</time>
      </header>
      <p>Introduction to the article...</p>
    </article>
  </main>

  <aside>
    <!-- Sidebar (categories, recent posts, etc.) -->
  </aside>

  <footer>
    <p><small>© 2024 Example Blog</small></p>
  </footer>
</body>

Accessibility Impact

<main> and <article> are used for landmark navigation in screen readers.

Element	ARIA Landmark	Screen Reader Effect
<main>	Equivalent to role="main"	Users can jump directly to the main content with a keyboard shortcut
<article>	Equivalent to role="article"	Each article is identified as an independent, standalone content unit

Screen reader users often navigate by jumping between landmarks rather than reading from the top, so using semantic tags directly impacts accessibility.

If you find any errors or copyright issues, please contact us.

Home

HTML Dictionary