CODEWITHSUNDEEP
html
Oscar Fanelli
Oscar Fanelli

Reputation: 3677

HTML5: article inside article?

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>

Upvotes: 12

Views: 13539

Answers (4)

Max Leps
Max Leps

Reputation: 479

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

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

Upvotes: 2

Juanjo Salvador
Juanjo Salvador

Reputation: 1093

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.

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 220066

Your first method is definitely better. You should put your articles 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.

  1. 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, 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.

Upvotes: 13

Zibellino
Zibellino

Reputation: 1433

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.

Upvotes: 16

Related Questions