Search code examples
htmlsemantics

How do main and article elements differ in HTML5?

My understanding is they both group content with <article> being suitable for content that can be syndicated, and <main> being suitable for content that is unique to a document. To me, they sound the same.

How do <main> and <article> elements differ?

Solution

  • According to this article: http://html5doctor.com/the-main-element/

    There are two principal distinctions:

    1. <main> can only be used once per document (DOM)
    2. <main> cannot be a descendant of <article>, <aside>, <footer>, <header>, or <nav> elements

    This means that <article> can be a child element of <main> (but not the other way around)

    Semantically, this means that in one document (page) you will encounter a main section of the content of the page with (hopefully) 1+ article(s) within it. In other words, the main article for this page.

    You could also find 1+ <aside> section(s) with 1+ article(s) within. Consider these other articles of interest on the page (but this is not the main content of the page)