Article (<article>)
When To Use
- A segment of a document, webpage, or website that constitutes a self-contained composition and forms a distinct part is referred to as a article. 1
Rules
- Although not explicitly stated, it appears that the <article> element is intended for full content articles and not just summaries or lists of links.
- To identify each article, a heading (<h1>-<h6> element) should typically be included as a child of the <article> element. 5
- Articles can be nested, but they must have a clear logical connection between them, as demonstrated in the example. 5
- If the entire main content of a webpage, excluding headers, footers, navigation blocks, and sidebars, is a single self-contained composition, it is possible to use one single <article> element to mark it up. However, this usage of the <article> element may be considered redundant in this specific case. 2
- Additional features are available with <article> elements, such as the address tag 3 or "bookmark" 4 link type, which relates to the nearest ancestor <article> element.
Examples
- Items such as comments, block posts, forum posts,newspaper articles, items in an social media feed or other items that are on one page.
- a blog that shows the full text of each article one after another as the reader scrolls, each post would be contained in an <article> element.
- Nested example: the comments of a blog post can be <article> elements nested in the <article> representing the blog post.
Sources
- W3C: Aria 1.2 Article is licensed under W3C Document License
- HTML Spec: Living Standard, 4.3 Sections, article is licensed under Creative Commons Attribution 4.0 International License
- HTML Spec: Living Standard, 4.3 Sections, address is licensed under Creative Commons Attribution 4.0 International License
- HTML Spec: Living Standard, 4.6 Links, bookmark is licensed under Creative Commons Attribution 4.0 International License
- MDN: <article>: The Article Contents element by Mozilla contributors is licensed under CC-BY-SA 2.5
- MDN: ARIA: article role by Mozilla contributors is licensed under CC-BY-SA 2.5