The <article> HTML element is designed to encapsulate a self-contained composition within a document, page, application, or site. It is intended for content that is independently distributable or reusable, such as a blog post, news article, forum post, or product review. The <article> tag helps to semantically define a section of content that stands alone, making it beneficial for search engines and assistive technologies like screen readers to understand the structure and significance of the content. This element is particularly useful when the content inside it makes sense on its own and can be syndicated or shared independently from the rest of the site.
The <article> tag should be used to wrap content that is distinct and self-contained, such as a complete article or post. It typically includes a heading and can contain other elements like paragraphs, images, and sections. The content within an <article> can also include nested <article> elements, which might represent related content like comments on a blog post. It is important to use the <article> tag appropriately to ensure that the semantic meaning is preserved and the content is accessible. Here is an example of how the <article> tag can be used:
<article>
<h2>Understanding HTML</h2>
<p>HTML, or Hypertext Markup Language, is the standard markup language for creating web pages.</p>
<footer>
<p>Published on: <time datetime="2024-08-27">August 27, 2024</time></p>
<p>Author: John Doe</p>
</footer>
</article>Valid Attributes for <article>
| Attribute | Description |
|---|---|
| class | Specifies one or more class names for the element, used for CSS styling. |
| id | Defines a unique identifier for the element, useful for JavaScript and CSS. |
| title | Provides additional information about the element, often displayed as a tooltip. |
| style | Contains inline CSS styles for the element. |
| lang | Specifies the language of the element's content. |
| dir | Indicates the direction of text (e.g., left-to-right, right-to-left). |
The <article> element is a powerful tool for structuring web content in a meaningful way, enhancing both the readability and accessibility of documents. It is important to use this tag for content that is self-contained and can stand alone, ensuring that the semantic structure of a webpage is clear and beneficial for both users and search engines.