Article>Section at main level? or vice versa?

Discussion in 'Web Design' started by DesigntheWorld, Mar 21, 2013.

to remove all ads.
  1. DesigntheWorld

    DesigntheWorld New Member

    Messages:
    17
    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:

    [​IMG]

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



    [​IMG]

    -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...
    [​IMG]



    Thank you to anyone reading!:)
     
    Last edited: Mar 22, 2013
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Why does it matter???
     
  3. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    article - parent
    section - children
     
  4. Edge

    Edge Member

    Messages:
    461
    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...
     
  5. DesigntheWorld

    DesigntheWorld New Member

    Messages:
    17
    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!
     
  6. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    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: Mar 23, 2013
  7. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    ...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.
     
  8. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    ...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.
     
  9. Edge

    Edge Member

    Messages:
    461
    Why not just use sub-headings?
     
  10. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    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.
     
  11. DesigntheWorld

    DesigntheWorld New Member

    Messages:
    17


    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? :)
     
  12. DesigntheWorld

    DesigntheWorld New Member

    Messages:
    17
    Thanks


    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!
     
  13. DesigntheWorld

    DesigntheWorld New Member

    Messages:
    17
    What I chose...



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

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Yep, that about sums it up.
     
  15. Edge

    Edge Member

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

    Edge Member

    Messages:
    461
    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.
     
  17. DesigntheWorld

    DesigntheWorld New Member

    Messages:
    17


    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!
     

Share This Page