HTML5: Quick <section> and <article> Explainer

, Thursday, May 10th, 2012

As I’m going through our most recent site build I’m converting a lot of <div>s to <section> or <article> in templates being reused from past projects and I thought a little explanation may be useful for our devlopers to know why things are changing out from under them. Also, this is a new development in our quest to keep up to date with evolving HTML5 standards so a little understanding of the whys and wherefores seems like a good idea.

So, here’s the deal with <section> and <article>. There is a very handy one-sheet from the HTML5 doctors called the “HTML5 Sectioning Element Flowchart” that outlines this in an attractive graphic format, so this more wordy explanation is focused really on just <section> and <article> as we use them in our builds.

<section> and <article> are both semantic tags vs. the <div> which carries no meaning, and they both require a heading (<h1>). The main difference between the two is that an <article> is self-contained and, as such, could be dropped into an RSS feed and still make sense. For the site we’re developing right now, all of our “blurbs” or “touts” listed on a page are <article>s that contain enough content to be understood all by themselves:

<article>
   <img/>
   <h1>heading</h1>
   <p>short description</p>
   <a>link</a>
</article>

The really cool thing about both <section> and <article> is that they create a new node in an outline. So the following HTML creates an outline just as if “heading2″ and “heading3″ were wrapped in <h2></h2> <h3></h3> tags! How totally great is that?!?

<section>
   <h1>heading 1</h1>
   <article>
      <h1>heading 2</h1>
   </article>
   <article>
      <h1>heading 2</h1>
         <section>
            <h1>heading 3</h1>
         </section>
   </article>
</section>

Google likes it, screenreaders like it, outlining tools like it (but who cares, really?), and most importantly of all, I like it ;). When you think about it, this is really cool. The problem of having an object with an <h2> in it that works great in one place, but is no longer a child of an <h1> when dropped elsewhere is no longer an issue. The outline just works! Our html code objects are now really and truly modular and can move all over the site.

So when do you use a <div>? Well, <section> and <article> both require a heading, they have semantic meaning just like <p> and <li>. <div> has no semantic meaning at all, so if you need to wrap something in a container for styling or scripting purposes only…that’s a <div>.

Will there ever be <h2>s and below on a site we build? Sure…but mostly in the RTE by authors where they belong (we’re definitely not going to start training site authors to use these fancy new tags…it just won’t happen, and doesn’t really need to.

So, when building a site, a pretty good rule of thumb is this:

If you find yourself using an <h2> or lower, chances are that it’s the wrong tag to be using unless you are authoring content. If that <h2> or <h3> you are using is the first heading inside a <section> or <article> container then it’s absolutely definitely wrong and we’ll be more than happy to help.

“But wait!” you say, “Doesn’t that mean that all the headings on the site will be styled as <h1>s? That, my friends, is a post for a different day. Suffice to say that there are a variety of approaches, all of which are partially cool, slightly irritating, and each suited to solving different problems.

Next issue: <aside>

Comments are closed.