Published: 29 May
2025
5-min read
Understanding the HTML Article Element
Author: John Doe
Published: March 6, 2025
The <article> element is useful for structuring independent pieces of content such as blog posts, news stories, and forum entries.
Table of Contents
INTRODUCTION
The HTML <article> element represents a self-contained, independent piece of content that can be distributed and reused on its own. It is commonly used for blog posts, news articles, forum posts, a user-submitted comment, an interactive widget or gadget or other stand-alone content.
Example:
<main>
<article>
<h2>Understanding the HTML Article Element</h2>
<p><strong>Author:</strong> John Doe</p>
<p><strong>Published:</strong> March 6, 2025</p>
<p>The <article> element is useful for structuring independent pieces of content such as blog posts, news stories, and forum entries.</p>
</article>
<article>
<h2>Another Article Example</h2>
<p><strong>Author:</strong> Jane Smith</p>
<p><strong>Published:</strong> March 7, 2025</p>
<p>This is another example of an article, demonstrating how multiple articles can be used within a webpage.</p>
</article>
</main>
Another Article Example
Author: Jane Smith
Published: March 7, 2025
This is another example of an article, demonstrating how multiple articles can be used within a webpage.
Usage Guidelines
- A document can contain multiple <article> elements, potentially containing one or more <section> elements within it.
- Each <article> should have a clear identifier, typically a heading (<h1> - <h6>) as a child element.
- When an <article> is nested within another, the inner element represents content related to the outer one. For instance, comments on a blog post can be individual <article> elements nested inside the <article> for the post.
- Author information for an <article> can be included using the <address> element, but this does not apply to nested <article> elements.
- The publication date and time of an <article> can be specified using a <time> element with the datetime attribute.
- An <article> element must not be a descendant of an <address> element.
Attributes
The <article> element only includes global attribute.
Tag Omission
The HTML <article> element must have both start tag and end tag.
Frequently Asked Questions (FAQ)
What is the difference between the article and section tags in HTML5?
Article tag - This tag is used to define independent,
self-contained content that can be
distributed or reused independently from the rest of the page.
Each article should make sense on its own and be able to stand alone.
Think of it as a complete “story” or unit of content.
Section tag: This tag is used to group together related content based on a common theme or topic. It is always used with a heading. Think of it as a chapter or subsection within a larger narrative.
Section tag: This tag is used to group together related content based on a common theme or topic. It is always used with a heading. Think of it as a chapter or subsection within a larger narrative.