The <article> tag is used to define independent, autonomous, and complete content within an HTML page.
More generally, any content that can be distributed or reused elsewhere, such as in RSS feeds, blog posts, publications, or documentation sections.
Generally, the <article> tag is used to specify elements that are related to a specific article, such as:
- A title;
- A description;
- A publication date;
- Etc.
Structure and Syntax of the <article> Tag
As we have seen, the <article> tag can contain various HTML elements such as titles, paragraphs, images, or lists. It represents a distinct content element.
Syntax
<article>
<!-- Autonomous content -->
</article>
Usage Example
<article>
<h2>Title of My Article</h2>
<p>Description</p>
</article>In this example, we have grouped all elements that are part of the same article within an <article> tag.
This helps search engines to more easily understand the different articles we might present on a page.
Attributes
The <article> tag does not have specific attributes. However, it can accept all "classic" HTML attributes:
| Attribute | Description | Possible Value |
|---|---|---|
id | Unique identifier for targeting the element. | Unique text. |
class | CSS class(es) for styling the article. | List of classes separated by spaces. |
style | Inline CSS style. | CSS declarations. |
lang | Language used in the article. | Language code (fr, en, etc.). |
data-* | Custom data attributes for specific needs. | Text or any value. |
hidden | Indicates that the article should be hidden (not visible to the user). | None or hidden. |
title | Tooltip displayed when hovering over the article. | Descriptive text. |
Browser Compatibility
The <article> tag is widely supported by modern browsers.
| Element | Google Chrome | Safari | Mozilla Firefox | Edge |
| <article> | Yes | Yes | Yes | Yes |