: What is the most semantically correct structure of a blog page using HTML5 tags? I'd like to grok the ultimate nature of <aside>, <section>, <article>. What is the best, most
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?
More posts by @Correia994
2 Comments
Sorted by latest first Latest Oldest Best
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.
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."
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.