SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: HTML 5: When to use <article>, <aside>, <section> & <DIV>

  1. Dec 27, 2009 06:44 #1
    big_smile
    big_smile is offline
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML 5: When to use <article>, <aside>, <section> & <DIV>

    I was wondering if some one could clarify when is the most appropriate place to use <article>, <section> and <div>.

    My understanding is this:

    You would use <article> for the main content on your page. For example, if you were making a blog page, the actual content of the blog post would go in <article>.

    You would use <aside> for secondary content. So on a blog page, you would put related articles in <aside>.

    In HTML5, you would only use <div> for styling purposes. For example, if you need to place in a background, and needed a few extra hooks (perhaps because <body> already has a background on it) , you would use a <DIV>.

    When would you <section>? I would have thought it would be to divide up the article into different sections. But isn't that redundant, because an article would already be divided up by header tags (e.g. H2/h3 would mark out where the new section starts)?

    Also, I have read that <article> should only be used for external content. So does that mean in my blog page example, the content would NOT go in <article> because it is not external content? But if this is the case, what tag would you put the article in? I know you can use <p> and <h>. However, what if you wanted a container to hold all these <p> & <h> together (i.e. to mark them out as having a relation)?

  2. Dec 27, 2009 13:22 #2
    felgall
    felgall is offline
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    15,819
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by big_smile View Post
    In HTML5, you would only use <div> for styling purposes.
    No - by the time HTML 5 is finalised all browsers will fully support CSS3 and there will be no need to use any HTML for styling whatsoever.

    The div tag would continue to be used for those divisions within the page where the division hasn't been allocated a more specific tag to represent that particular content.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">
  3. Dec 27, 2009 15:37 #3
    zcorpan
    zcorpan is offline
    ⠵ bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by big_smile View Post
    I was wondering if some one could clarify when is the most appropriate place to use <article>, <section> and <div>.
    http://www.whatwg.org/specs/web-apps...rticle-element
    http://www.whatwg.org/specs/web-apps...ection-element
    http://www.whatwg.org/specs/web-apps...he-div-element

    Quote Originally Posted by big_smile View Post
    My understanding is this:

    You would use <article> for the main content on your page.
    Hmm, no, not in general...
    Quote Originally Posted by big_smile View Post
    For example, if you were making a blog page, the actual content of the blog post would go in <article>.
    Yes (including the blog post title etc). A blog page with several posts on one page would have several <article>s (one per post). You could use nested <article>s for blog post comments. I think the spec has some examples.

    Quote Originally Posted by big_smile View Post
    You would use <aside> for secondary content. So on a blog page, you would put related articles in <aside>.
    Yes.

    Quote Originally Posted by big_smile View Post
    In HTML5, you would only use <div> for styling purposes.
    Not necessarily. If you want to change the language for a bunch of paragraphs, then you could use a wrapping <div lang=...> instead of lang=... on each <p>. Or you could use a <div> for scripting purposes, or for a link target...

    Quote Originally Posted by big_smile View Post
    For example, if you need to place in a background, and needed a few extra hooks (perhaps because <body> already has a background on it) , you would use a <DIV>.
    Yeah.

    Quote Originally Posted by big_smile View Post
    When would you <section>? I would have thought it would be to divide up the article into different sections. But isn't that redundant, because an article would already be divided up by header tags (e.g. H2/h3 would mark out where the new section starts)?
    It is redundant with implied sections created by heading elements, but the redundancy introduces a nice new feature: if you use explicit sections with <section>, <article> etc, then you don't have to worry about which number to use in the heading elements. You could use <h1> for all headings if you want.

    Quote Originally Posted by big_smile View Post
    Also, I have read that <article> should only be used for external content.
    w3schools is not a recommended reference.
    Simon Pieters
  4. Dec 27, 2009 15:40 #4
    zcorpan
    zcorpan is offline
    ⠵ bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://gsnedders.html5.org/outliner/ is a helpful tool to check that sectioning and heading elements are used correctly; it generates a document outline (aka table of contents) so you can verify that it looks as intended.
    Simon Pieters
  5. Dec 28, 2009 04:36 #5
    big_smile
    big_smile is offline
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the links, zcorpan! The examples they contain made everything so much clearer.

    It was the w3Schools comment about external content that really threw me, but I know better now!

    Just one thing I am not sure about:

    A page has a list of blog posts. The list gives a lengthy preview of each post, including 2-3 paragraphs, a heading and a photo. Which mark up would be more appropriate:

    1) Placing the entire list in <article> and then each preview in a <section>, as the list is essentially one big article with lots of different sections.

    2) Placing the entire list in a <div> and then each preview in an <article> (because the list is made up of lots of articles, even if they are just previews).

    3) Placing the entire list in <Ul> and then each preview in <li>. This seems the most logical (as it is a list), but the mark up would get messy with trying to put several paragraphs, headings and image tags inside an <li> (and I don't think it is good practise to put all those tags in a <li>).

    For a page full of blog posts you would use an <article> for each post (and then wrap the whole lot in a single DIV), but the above example is different as it is a list of previews.
  6. Dec 28, 2009 06:11 #6
    zcorpan
    zcorpan is offline
    ⠵ bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think #1 is good, since <article> is similar to Atom <entry>. #2 seems fine. #3 also seems fine, or maybe using a <dl>.
    Simon Pieters
« Previous Thread | Next Thread »

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
  •  

Forum Rules