The article Element

Learn how to use the <article> element to mark self-contained content that can be distributed independently, ensuring semantic correctness and better accessibility.

What it is

The <article> element represents a self-contained composition in a document, page, application, or site. This could be anything from a forum post, a magazine or newspaper article, a blog entry, a product card, or a user-submitted comment. The key mental model is the "standalone test": if you copied this block of HTML into another website or RSS feed, would it still make sense on its own? If yes, it is likely an <article>.

Related terms include <section> (thematic grouping) and <aside> (content tangentially related to the surrounding content).

Why it matters

• Syndication: Content marked as articles can be easily extracted for RSS feeds or social media previews without losing context.
• Accessibility: Screen readers allow users to navigate directly between articles, improving the experience for assistive technology users.
• SEO: Search engines understand the structure of your content better, potentially improving indexing accuracy for distinct pieces of information.
• Maintainability: Clear semantic boundaries make CSS styling and JavaScript targeting more predictable and easier to manage.

Syntax or steps

Use <article> when the content is independent. Nesting is allowed; for example, a blog post (<article>) might contain comments, where each comment is also an <article>. Always include a heading (<h1>–<h6>) inside the article if possible, as it helps identify the topic.

Example

<main>
  <article>
    <header>
      <h2>Understanding Semantic HTML</h2>
      <p>Published on: October 24, 2023</p>
    </header>
    <p>Semantic elements clearly describe their meaning to both the browser and the developer.</p>
    <footer>
      <p>Author: Jane Doe</p>
    </footer>
  </article>
</main>

In this example, the <article> wraps a complete blog post. It includes a header with a title and date, the main body text, and a footer with author info. If you copied just this block to another site, the reader would still know what they are reading and who wrote it.

Common mistakes

• Using <article> for layout containers: Do not use it merely to wrap a sidebar or a generic div-like section. Use <div> or <section> for non-semantic grouping.
• Missing headings: While not strictly required by the spec, omitting a heading makes it harder for users to distinguish between multiple articles on a single page.
• Nesting unrelated content: Avoid placing navigation menus or footers inside an article unless they are specific to that article's context.
• Confusing with <section>: A <section> is thematic but not necessarily standalone. An <article> must pass the syndication test.

When to use it

Practice

Guided Exercise: Take a standard blog post HTML snippet and wrap it in an <article> tag. Add a <time> element with a datetime attribute inside the header.

Challenge: Create a list of three recent news headlines. Each headline should be its own <article> containing a link, a short summary, and a publication date. Verify that copying one article to a new file still displays correctly.

Quick check

Question: Should a navigation menu be wrapped in an <article> element?

Answer: No. Navigation menus are not self-contained compositions that make sense outside the context of the current page. They should typically be wrapped in a <nav> element.

Summary

The <article> element is defined by its ability to stand alone. If the content retains its meaning and utility when removed from the original page, it belongs in an article. Using it correctly enhances accessibility, SEO, and code clarity.