<section> or <article>, which is contained in which [duplicate]
Asked Answered
M

3

12

Trying to get my head around the new semantic elements in HTML5.

Does a <section> belong inside an <article> or is it the other way around? Does it even matter?

I'm looking at re-structuring a wordpress blog.

Micromillimeter answered 24/11, 2009 at 12:13 Comment(3)
The link to the attempted layout does not seem to work.Dominant
@Abizern, could you upload an image to StackOverflow instead of linking off-site to one? The current image your question is about is broken.Footsore
At the time I posted the question, there wasn't the option to do that.Micromillimeter
S
14

From the HTML5 spec:

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header and possibly a footer.

and

The article element represents an independent section of a document, page, or site. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, or any other independent item of content.

So I would say both section and article elements can contain the other element, if appropriate. I think your diagram makes sense, apart from the nested section elements:

The section element is not a generic container element. When an element is needed 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.

Maybe use a <div> for the outer one?

Saharan answered 24/11, 2009 at 12:21 Comment(0)
J
3

I would use div for the outer one, and div for the inner one, unless you have a heading directly inside the inner section.

See http://html5doctor.com/the-section-element for more info.

Jolo answered 26/11, 2009 at 9:58 Comment(0)
W
1

IMOO, it should be simple, as simple as what normal people will take it for granted. If a simple tag name confuses people, it is a fail. For me:

  • An <article> is an article. People share articles. When you say something is an article, I'll expect it should have a title, and maybe a little summary as well, so I can decide to read it or not. If it is interesting, I will share it to my friends. It's self-contained.

  • A <section> is a section. It is a part of related things. Basically, you will need other sections to get the whole picture.

Why you put a <section> inside the <body>? Oh because it's part of the body; part of my website. I'm going to put my articles inside this part.

Why you put a <section> inside a <section>? Because it's part of that section.

Wader answered 25/7, 2017 at 22:10 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.