SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML5: Section vs Article elements

    Hi all,
    I'm learning HTML5 so I can take advantage of the semantic elements such as <header>, <nav>, <article>, etc, in my own projects. But, I have a question on how to correctly use the <section> and <article> elements in my documents.

    Is there a set standard on how to lay out the page with <section> and <article> elements? To me, it makes sense to wrap your SECTIONS of content with the <section> element like so:

    Code:
    <section>
      <article>
       <header><h2>This is an article title</h2></header>
       <p>This is the main body text of the article blah blah blah</p>
      </article>
       <aside> A sidebar here</aside>
    </section>
    I prefer placing the <section> elements as a "wrapper" outside the various sections of the page because semantically it becomes like a newspaper: You go to the SPORTS SECTION and then you read the various ARTICLES within that section. You don't go to the SPORTS ARTICLES to read the various SECTIONS.

    Am I right in my thinking? THanks!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    If i understand your logic correctly then yes you are, typically it's best practice with HTML5 to use <section> elements as a parent wrapper and then in your case just loop through the <article> elements. To put what i think your logic is into perspective see the below examples.

    Bad practice
    HTML Code:
    <section class="body-wrapper">
        <section class="news-wrapper">
            <article></article>
        </section>
        <section class="news-wrapper">
            <article></article>
        </section>
        <section class="news-wrapper">
            <article></article>
        </section>
        <aside class="columns column-right"></aside>
    </section>

    Good practice

    HTML Code:
    <section class="body-wrapper">
        <section id="news-wrapper">
            <article></article>
            <article></article>
            <article></article>
        </section>
        <aside class="columns column-right"></aside>
    </section>
    The above is what i believe to be perfectly valid HTML5 semantics as there is a parent wrapping the articles and side column as well as a child parent of the body wrapper that wraps the articles, of course at the moment everyone has there own idea of how to do this as <div> elements are the popular trend still but because HTML5 is still been finalized and such in spec there are technically no right and wrong ways.

  3. #3
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Well, the vs part is wrong. The two are very different in semantic.

    <hr>

    <article> means self-contained content. Use <article> if that content in the page is independent and for syndication, i.e. "Beam me up, Scotty".

    <hr>

    <section> on the other hand is code word for thematic grouping, not independent content. Use <section> if that content makes sense to be highlighted in the document outline, i.e. "T.o.C.".

    <hr>

    Depending on the content in <article>, of course, it makes perfectly good sense to have this:
    Code:
    <article>
      <section>
      </section>
      <section>
      </section>
    </article>

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,823
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    itmitică makes a good point. The thing that might confuse people is that this logic can be recursive ( to a reasonable degree).

    Depending on the SCOPE of your thinking you can see that it makes sense to have SECTIONS of content, that have other (sub) sections .. which have articles which are also SECTIONED. As always it really depends on what your content is trying to convey.

  5. #5
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    ... and where you also have a <section> of <article>s, and those <article>s have <section>s in them, and those <article>s are also <section>ed:

    Code:
    <section>
      <h2>I'd like you to enjoy a few articles on food</h2>
    
      <section>
        <h3>Soups</h3>
        <article>
          <h1>Tomatoe soup</h1>
          <section>
             <h2>Origin</h2>
              [...]
          </section>
          <section>
             <h2>Preparation</h2>
              [...]
          </section>
        <article>
    
        <article>
        [...]
        </article>
      </section>
    
      <section>
         <h3>Main courses</h3>
         <article>
           <h1>Sirloin steak</h1>
           <section>
             <h2>Origin</h2>
              [...]
           </section>
           <section>
             <h2>Preparation</h2>
              [...]
            </section>
        <article>
    
        <article>
        [...]
        </article>
      </section>
    </section>

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    HTML5doctor.com is generally a good place to read what the standardistas in general have decided about tag semantics and how to use what (and in this case, agree with Mitică).

    The endless nesting of articles in sections in articles in sections will cause great joy, for it is totally legal.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •