Article>Section at main level? or vice versa?

DesigntheWorld

New Member
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:

basicHtml5Layout.png


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



html5_structure.png


-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...
kpbhtml5.jpg




Thank you to anyone reading!:)
 
Last edited:

Edge

Member
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

New Member
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:confused:...



Thank you and good day!
 

chrishirst

Well-Known Member
Staff member
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.
 
Last edited:

Phreaddee

Super Moderator
Staff member
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

Super Moderator
Staff member
...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.
 

Phreaddee

Super Moderator
Staff member
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

New Member
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

New Member
Thanks

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

New Member
What I chose...

...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 :)
 

Edge

Member
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.
 

DesigntheWorld

New Member
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!
 
Top