Codectionary / Developer documentation / HTML

<article>

The <article> element represents a self-contained piece of content that could theoretically be distributed or reused independently — like a blog post, news story, forum post, or product card. The key test is whether the content would still make sense if syndicated on its own, separate from the rest of the page. Articles can be nested (e.g., a blog post article containing comment articles).

Syntax

<article>
  <h2>Article Title</h2>
  <p>Article content...</p>
</article>

Examples

Blog Post

A self-contained blog post as an article.

<article>
  <h2>Getting Started with TypeScript</h2>
  <p>Published March 3, 2026</p>
  <p>TypeScript adds static typing to JavaScript...</p>
</article>

Multiple Articles in a Feed

A list of independent articles, such as in a news feed.

<section>
  <article>
    <h3>Breaking: New JS Framework Released</h3>
    <p>Summary of the news...</p>
  </article>
  <article>
    <h3>CSS Grid Level 3 Draft Published</h3>
    <p>Summary of the news...</p>
  </article>
</section>

Nested Articles (Comments)

A blog post article containing individual comment articles.

<article>
  <h2>Why Semantic HTML Matters</h2>
  <p>Main post content...</p>
  <section>
    <h3>Comments</h3>
    <article>
      <p>Great explanation, thanks!</p>
    </article>
  </section>
</article>

Best practices

  • Use <article> only for content that would make sense on its own if extracted from the page
  • Give each <article> its own heading so it is meaningful out of context
  • It is fine to nest <article> elements, such as comments within a blog post
  • If content only makes sense in the context of the surrounding page, use <section> or <div> instead

At a glance

Purpose
Structure and meaning for web content
File extension
.html · .htm
Runs in
Web browsers
Usually used with
CSS and JavaScript

Specifications & further reading

Related HTML documentation

<header>
The <header> element represents introductory content for its nearest ancestor sectioning element, typically containing a logo, site title, navigation, or search form. A page can have multiple <header> elements — one for the page itself, and others for individual <article> or <section> elements. It has no default visual styling of its own.<nav>
The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.<footer>
The <footer> element represents closing content for its nearest ancestor sectioning element, typically containing copyright notices, contact information, related links, or author details. Like <header>, a page can have multiple footers — one for the whole page and others scoped to individual articles or sections.<section>
The <section> element groups related content that typically has its own heading, representing a distinct thematic section of a document — like a chapter, tab panel, or a chunk of a landing page. Unlike <div>, which carries no semantic meaning, <section> tells browsers and assistive technology that its content forms a standalone, related group. If content does not have a natural heading or is not thematically distinct, a plain <div> is usually the better choice.