Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I'd like to grok the ultimate nature of <aside>, <section>, <article>.

What is the best, most semantically correct structure of a blog page using HTML5 tags?

Should I put the sidebar inside an <aside>? Or does this rather belong into a <section> (as <aside> should be used for advertisements, short quotes and such)?

How should I present the main feature, the blog post? How do I use <article> correctly?

How should I mark-up the article tags?

share|improve this question

2 Answers 2

up vote 5 down vote accepted

You want to use <article> for Blog posts. Mark Pilgrim has a really good explanation of how to use each tag. He also explains how to mark-up the article just below the list of definitions on his site. This is a fantastic book for learning HTML 5 and CSS.

"The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication."

Aside is for "tangentially related" elements and the section represents "represents a generic document or application section."

share|improve this answer

For <aside>, think of that like the theatrical aside: the story is put on hold to explain something to the audience, veering off on a tangent for a short bit before returning to the main focus. E.g.:

<article>
     <p>A horse walks into a bar.</p>
     <p>The bartender says, "Why the long face?"</p>
     <aside>Not because it was sad, horses just have long faces.</aside>
</article>

Terrible example, but a valid one. Chances are it will be useful for things like pull-quotes and other article-relevant tangents, but as a purely semantic tag, advertisements generally don't belong.

A keyword-driven ad system won't care about semantically fitting your content, it's more interested in matching demographics. If your <article> is only about PHP, and it pulls ads related to Python/Perl/Java (it will, at some point), your <aside> just lost it's meaning. You're better off putting those elsewhere on the page.

share|improve this answer
    
+1 for putting a smile on my face and answering a question of my own that I had. –  Jason Jan 9 '11 at 6:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.