Question

I have a very simple question, which one is semantically correct to do :

• have article tags inside section tags ?
• have section tags inside article tags ?

I would appreciate all opinions on this, as I googled it and I had all kinds of search result (:

Answer 1

Section

The HTML Section Element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.

See Permitted parent elements in Usage context

Article

The HTML Article Element (<article>) represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable, e.g., in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

See Permitted parent elements in Usage context

Which one to choose?

To think about HTML4, we can compare this to <p> and <blockquote>. Both are block-level elements for text, but <blockquote> is like a subset of <p>, with a more specific meaning (‘this is a block of quoted text’). The same with <section> and <article>; <section> means related content, but <article> means one piece of related content which makes sense on it’s own, even outside the context of the page (the page’s header and footer etc).

The potentially confusing part of this is that <section> can be used for parts of a page (e.g. the main content column, the news section on a homepage) and contain <article>s, and also for sections of a long <article> (i.e. inside an <article>).

See this article for more clearance.