HTML5: article inside article?

Question

If we have a list of blog posts, like in this case: http://www.gamempire.it/news I think that every post could be an <article> , but the title of the page ("Novità"), that could be an <h1> , is the semantic title of what? A section?

So, i don't know if it's better to do in this way:

<section>
  <h1>Novità</h1>
  <article>...</article>
  <article>...</article>
  <article>...</article>
</section>

or:

<article>
  <h1>Novità</h1>
  <article>...</article>
  <article>...</article>
  <article>...</article>
</article>

Answer 1

As far as specs go <article> is a sectioning content and as such, accepts any flow, sectioning and palpable content (except <main> ) , including other <article> s.

As far as semantic goes, it depends: articles are independent, self-contained compositions, that can contain other articles as long as those are also independent, self-contained compositions that at the same time are part of the main composition.

When article elements are nested , the inner article elements represent articles that are in principle related to the contents of the outer article . For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

Answer 2

Your first method is definitely better. You should put your article s in a section .

---

Check out these two posts on htlm5doctor :

1. Section

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

2. Article

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, eg 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.

Answer 3

Actually you can nested <article> as child of <article>

See the reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article

Answer 4

The correct way is:

<section>
  <article>...</article>
  <article>...</article>
  <article>...</article>
</section>

Because <section> means a piece of your web that can contains the content of your site, and <article> is a piece of content.