HTML and CSS Reference
Test drive the
With the creation of a new blog
page, and those quick tweaks
to the page (that is, adding the
<section> and <article>
elements), let's save the page
and load it in the browser.
As you can see, elements lik e <section>, <art icle>,
and <aside> have a similar d efault style to <div>;
that is, not much! But they do add informa tion
about the meaning of the c ontent in your p age.
What's the difference
between a section and an
Yes, it can be confusing. We'll tell you right up front
that there is no crystal-clear answer to this; in fact, there are
many ways to use <article> and <section> . But here is
a general way to think about them: use <section> to group
together related content, and use <article> to enclose a self-
contained piece of content like a news article, a blog post, or a
In the Starbuzz page, each column contains related content,
so we've treated each column as a section of the page. We've
also taken the individual blog posts and made those articles
because they are self-contained (you could even imagine taking
one and reposting it on another site or blog).
Your mileage may vary, but in general, stick to grouping
related content together with <section> , and for self-
contained content, use <article> . And if you need to group
content together that doesn't feel as related, you always have
<div> to fall back on.