• Tweet

• Tweet

So what’s it all about? Not only is the new HTML5 standard throwing out lots of new tags that we need to know how to use, we’ve got these two tags that seem to do the same thing.

So what is the difference between the two, when should we use them and does it really matter?

That me answer the last part of this question first…..of course it bloody matters!!
We’ve spent the last 10 years ish trying to create semantic code for our websites and now we have almost got there we have to content with learning more tags and how they fit into our way of working.

<article>

An article is just it’s own piece of content like a blog post or news item. I can be independent from the page that it’s in like this post on my home page.

It could look some thing like this in the code.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<article>
<h1>This is the Post Title</h1>

<p>This would be the body text of the post</p> 

<h2>You could have a secondary header</h2>

<p>This is the body text of the post under the secondary heading</p>
</article>

<sectione>

Section on the other hand, isn’t a self contained piece of content on a web page, it’s a way of dividing up a web page or in fact dividing up articles into suprise suprise (as Cilla would have said) sections within the article.

Consider this my new football rule book. It is an article on my website that will have many sections. (please be aware that this is a work in progress and any suggestion for this book would be kindly received. I am working closely with the FA to finalise certain areas of the book.)

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

<article>
    <h1>Football Rule book</h1>
  <section>
    <h2>Never score when you can dive for a penalty</h2>
    <p>Under no circumstances must you try to put the ball in the opposition net when you can dive, get a player sent off and be awarded a penalty</p>
   </section>
   <section>
  <h2>Only roll around on the floor if not injured</h2>
  <p>So as to not worry your sponsors and agent make sure that you only roll around on the floor if you are ok. This will give them the signal that you are fine. If you are injured limp off the pitch so as to make people aware you have an issue.</p>
  </section>
</article>

Wait theres more…

You can also have articles within a section….oh no I here you cry. Me too. There are going to be some pretty messy websites out there by the time we’ve all got our heads around this stuff.
So when do we use this.
Say you have areas on your site that brings in feeds from other websites or you are a newspaper/magazine style site that has different focus areas.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

<section>
<h1>Daily Design Inspiration</h1>
  <article>
    <h2>Art from Africa</h2>
    <p>This  is all about the art found in Africa</p>
   </article>
   <article>
  <h2>Design on a Shoestring</h2>
  <p>Learn how to design things with Shoe laces</p>
  </article>
</section>
<section>
    <h1>Daily Cleaning Tips</h1>
  <article>
    <h2>Spice and Clean</h2>
    <p>Cleaning tips from around India</p>
   </article>
   <article>
  <h2>Rub a Dub Pub</h2>
  <p>Three men in a pub showing us how to clean brass ornaments</p>
  </article>
</section>

In conclusion I would like to use Estelle Weyl’s analogy:

“Think of a newspaper. The paper comes in sections. You have the sports section, real estate section, maybe home & garden section etc.Each of those sections in turn has articles in it. And some of those articles are divided into sections themselves.”

So there we have it there is a lot to take in and I think the main thing to take from this tutorial is that sites can no longer be thrown together with a load of divs that you name generically what ever takes your fancy that day.
Things have to be planned out in advance to decide how each part of the web page sits together and what its function is. By doing this planning we make it easier for the browser to determine what areas of the site are which. It is the next step in the development of the art of web design you can either embrace it or be left behind.
One thing is for sure, if you’re still using tables your days are numbered.