HTML <article> Element
The <article> element represents independent, self-contained content that can make sense on its own, such as a news story, blog post, forum post, product description, or other standalone piece of content.
Syntax
<article>
Article content
</article>The opening and closing tags are both required.
Attributes
The <article> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
The following example uses an <article> element for a self-contained news story:
<article>
<h2>Community Garden Opens This Weekend</h2>
<p>The new community garden will open to the public on Saturday morning.</p>
<p>Visitors can tour the gardens and learn about the volunteer program.</p>
</article>The heading and paragraphs belong to one independent piece of content.
Try It Yourself
Edit the heading and paragraphs in the <article> element to create your own self-contained article.
Usage Notes
Use the <article> element when a section of content is complete enough to stand on its own or be reused independently from the rest of the page.
Typical uses include blog posts, news articles, forum posts, user comments, product entries, and other independently meaningful content.
An <article> can contain headings, paragraphs, images, sections, a header, a footer, and other HTML content. Articles can also be nested when an inner article represents content related to the surrounding article, such as individual comments on a blog post.
Do not use <article> simply as a general-purpose container. If the content does not represent an independent piece of content, another semantic element such as <section> or a generic <div> may be more appropriate.
Accessibility
Give each <article> a descriptive heading when appropriate so visitors can quickly identify the subject of the content. Clear headings are especially useful for people navigating a page with assistive technology.
When a page contains several articles, meaningful headings help distinguish one article from another and make the overall document structure easier to understand.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <article> Element .
Related Elements
<section> - Represents a thematic section of content within a document.
<header> - Represents introductory content for a page, article, or section.
<footer> - Represents footer information for a page, article, or section.
<address> - Represents contact information associated with the nearest article or the document.