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)?
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.
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.
Yes.
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…
Yeah.
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.
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.
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:
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.
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).
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.
