Article>Section at main level? or vice versa?

DesigntheWorld · Mar 21, 2013

I need some clarification, although I know many of us are still not to clear on the battle between articles and sections, but.....

I am designing a website and I have spent a good few hours wondering whether I should wrap the main contents of my page inside an article or a section tag. I do have a div with an id of "main" for structuring purposes, so I plan on leaving that one in there, but inside that div, do I place the contents in an article tag or a section tag?

When I look around I see the following html5 layouts:

-The first one places the article tag at the top level in importance.

-While the second one places the section tag first...

Question 1:

So what goes inside what at the main level? (From what I've read, you can put them both in each other and vice versa, okay I sort of get that, but I need a starting point) would I first place the main contents of my page in an article tag, or in a section tag?

Question 2: Is it okay to leave the div with an id of "main" and then place the article/section tags in it?

Question 3:
By the way I have wrapped my entire website inside a div called container , is that okay? I mean, to be clear on this, the article and section tags are not meant to replace structuring divs right?

Sorry if my questions confuse anyone, I myself am confused,lol.

This is the layout I have so far for my site...

Thank you to anyone reading!

chrishirst · Mar 21, 2013

Why does it matter???

Phreaddee · Mar 22, 2013

article - parent
section - children

Edge · Mar 22, 2013

A section is used for grouping together thematically-related content. Let me give an example by looking at a site we will shortly be overhauling. On that home page you can see a group of related content areas: c-tv, c-news and c-events. These should be grouped together inside a section element.

An Article, as the name suggests, is a distinct piece of content. I can't see the need to then split that up again into sections when we have heading elements e.g. <h2>, <h3> etc.

I think the section element, used as above is potentially useful for, say, assistive devices such as screen readers which would be able to make more sense of a page and potentially announce the beginning and end of a section - they probably don't as they usually lag behind current technologies but there is the possibility...

DesigntheWorld · Mar 22, 2013

Um...

The response of "what does it matter" doesn't really help...

*thanks to the other two users, although I am still not sure which one to use...
so confusing

...

Thank you and good day!

chrishirst · Mar 22, 2013

The response of "what does it matter" doesn't really help...

It wasn't meant to, it was a REQUEST for more information on WHY you want to know.

So you ANSWERING the question would give us MORE information upon which to base an opinion thereby providing you with an answer that INCLUDES the scenario YOU are looking at.

Phreaddee · Mar 23, 2013

The new <article> element is more self -contained as it is used to outline a self-contained composition that can be spread around the Web if required for example for syndication purposes.

The <section> element is an element designed to programmatically designate sections of document content. It represents the section of a document that is grouped around a general theme and often comes with a specific heading.

A common use offline would be a chapter of a book, but online it will more likely be used to divide page content into related chunks, like an Introduction, followed by some background info on the topic

...is up to your own interpretation. an article can work without a section and a section without an article.

generally speaking I would make the main section of the webpage the article and IF it needed separation within I would use a section for that.

ronaldroe · Mar 23, 2013

Phreaddee said:
...is up to your own interpretation. an article can work without a section and a section without an article.

generally speaking I would make the main section of the webpage the article and IF it needed separation within I would use a section for that.

...and I do basically the opposite. Not that either way is wrong or right. That's the beauty of the new semantic tags in HTML5. Structure the page in a way that makes sense.

Me? IMHO, "section" would be more of an "area" of the site, such as the main content area, or the sidebar. "article" refers to a bit of content, such as a blog post or a block of text that explains what a product does.

But, and here's the key, that's what makes sense to me. So, in the end, do what makes sense to you.

Edge · Mar 25, 2013

Phreaddee said:
generally speaking I would make the main section of the webpage the article and IF it needed separation within I would use a section for that.

Why not just use sub-headings?

Phreaddee · Mar 25, 2013

For say a short document headers would be fine.
A long document however... Particularly with anchor navigation, it can be extremely useful...

Anyways each to their own.

DesigntheWorld · Mar 28, 2013

chrishirst said:
It wasn't meant to, it was a REQUEST for more information on WHY you want to know.

So you ANSWERING the question would give us MORE information upon which to base an opinion thereby providing you with an answer that INCLUDES the scenario YOU are looking at.

Okay REQUEST ACCEPTED...I wanted to know what to use in THIS specific scenario so that I can GAIN a more solid UNDERSTANDING of these relatively new html5 semantic tags seeing as how I JUST STARTED learning them....

Now that you know my why..what is YOUR advice?

DesigntheWorld · Mar 28, 2013

Thanks

Phreaddee said:
...is up to your own interpretation. an article can work without a section and a section without an article.

generally speaking I would make the main section of the webpage the article and IF it needed separation within I would use a section for that.

There is so much confusion precisely because it is up to the individual person on what to pick in the end, lol.

I guess we'll have to wait till html5 is fully completed to have a clearer understanding over these tags, but for the mean time it is what it is.

Thank you for your help!

DesigntheWorld · Mar 28, 2013

What I chose...

ronaldroe said:
...and I do basically the opposite. Not that either way is wrong or right. That's the beauty of the new semantic tags in HTML5. Structure the page in a way that makes sense.

Me? IMHO, "section" would be more of an "area" of the site, such as the main content area, or the sidebar. "article" refers to a bit of content, such as a blog post or a block of text that explains what a product does.

But, and here's the key, that's what makes sense to me. So, in the end, do what makes sense to you.

Yea, I am starting to accept that at the moment there isn't a defined right or wrong way...excuse for a moment while I "AHHHHHH!!!" lol

okay so to recap what I did is:

HTML:

<header></header>
<nav></nav
<section id="main">
     <article>
         <h1>Kittens puppies and bunnies</h1>
          This article is about........
               <section id="subsection">
                       yada yada yada this is another section of the article..
               </section>
    </article>
</section>

and that is that! lol

Thank you for your help

chrishirst · Mar 28, 2013

Yea, I am starting to accept that at the moment there isn't a defined right or wrong way

Yep, that about sums it up.

Edge · Mar 29, 2013

DesigntheWorld said:
Yea, I am starting to accept that at the moment there isn't a defined right or wrong way...excuse for a moment while I "AHHHHHH!!!" lol

okay so to recap what I did is:

HTML:

<header></header> <nav></nav <section id="main"> <article> <h1>Kittens puppies and bunnies</h1> This article is about........ <section id="subsection"> yada yada yada this is another section of the article.. </section> </article> </section>

and that is that! lol

Thank you for your help

But what's wrong with using simple sub headings? <h2> etc.

Edge · Mar 29, 2013

Phreaddee said:
For say a short document headers would be fine.
A long document however... Particularly with anchor navigation, it can be extremely useful...

Anyways each to their own.

It would have to be a bit of a monster not to use sub headings. I know screen readers can navigate using the heading structure but support for sections is poor.

DesigntheWorld · Apr 2, 2013

Edge said:
But what's wrong with using simple sub headings? <h2> etc.

Hey edge,

I'm sorry for not understanding your suggestion (newbie alert! haha). Therefor I kindly ask you:
Where would I place the sub headings in the example code I provided?

I want to make sure I make my site accessible for people using screen readers and if using a subheading helps, then I'll gladly incorporate them.

Thanks again!

Article>Section at main level? or vice versa?

DesigntheWorld

New Member

chrishirst

Well-Known Member

Phreaddee

Super Moderator

Edge

Member

DesigntheWorld

New Member

chrishirst

Well-Known Member

Phreaddee

Super Moderator

ronaldroe

Super Moderator

Edge

Member

Phreaddee

Super Moderator

DesigntheWorld

New Member

DesigntheWorld

New Member

DesigntheWorld

New Member

chrishirst

Well-Known Member

Edge

Member

Edge

Member

DesigntheWorld

New Member