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 commentsblock postsforum posts,newspaper articles, items in an social media feed or other items that are on one page.
  • 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 

  1. W3C: Aria 1.2 Article is licensed under W3C Document License
  2. HTML Spec: Living Standard, 4.3 Sections, article is licensed under Creative Commons Attribution 4.0 International License
  3. HTML Spec: Living Standard, 4.3 Sections, address is licensed under Creative Commons Attribution 4.0 International License
  4. HTML Spec: Living Standard, 4.6 Links, bookmark is licensed under Creative Commons Attribution 4.0 International License
  5. MDN: <article>: The Article Contents element by Mozilla contributors is licensed under CC-BY-SA 2.5
  6. MDN: ARIA: article role by Mozilla contributors is licensed under CC-BY-SA 2.5
Created at: 05.03.2023, Last updated at: 11.06.2023