When to use div, section and article

A div is a block without semantic meaning. An article is a stand alone piece of content. A section is a slice of content within the current context.

Use article when the block’s heading and content represents something that would still work if not on the current page. The usual ‘go to’ example is a news page which contains a number of blocks of content. Each block could be an article. You are able to read the article content even if it was lifted and put somewhere else, let’s say in a section on the homepage, or even on another website that uses syndicated content.

Use a section to contain blocks of content under the subheadings of the parent content. At a page level that would probably be within the main region content. Each section would represent a subtopic of the parent topic. Section can also be used in other region tags such as header, footer and article. In the news example above the page might have a popular section and an archive section containing articles. These articles can also contains sections slicing up the news story.

Div merely ‘divides’ the content into blocks. Each block tends to represent a piece of content. From a design and development point of view these divs can be arranged to create a layout and improve page readability (good old fashion graphic design). You can also use sections and articles etc to improve the layout, so use them when it is appropriate. While not ideal developers will often use nested divs to add more control to the layout than what would be possible with just the semantic blocks. Example: A div can be used to encapsulate the publish date and author link below an article heading. No semantic meaning is associated by this grouping, but it does allow the design to add some padding around these elements.

Does this make it clearer? :-)

Mod Edit: Changed comment to answer so it may be voted on or marked as best. Thank you!