GROUPING CONTENT IN HTML5 – ARTICLE OR DIV OR SECTION?

HTML5 was a stepping stone to follow the usage of semantic code. It became a champion on how your page was structured and tags you use convey the meaning to browsers.

Overview of The Elements

div

The <div> element is the most general-purpose element. It has no special meaning. Its purpose is to group content that is not semantically related. Because it is essentially meaningless to screen readers, it should be sparingly used.

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.

W3C Recommendation

The <div> element, therefore, is mainly used to group content for targeting with CSS. For example, as a styling container for other elements.

<div class=”modal-container”>

<section class=”modal”>

<h1>Modal Title</h1>

<p>Text goes here</p>

</section>

</div>

section

The <section> element is slightly more specific that a <div>. It is applied to a generic section of content that can be grouped together in a semantically meaningful way.

A general thumb rule is that the section element is appropriate only if the element’s contents are listed explicitly in the document’s outline.

W3C Recommendation

Because the contents of a <section> are meaningful when grouped together, they should have a “theme”. A <section>’s “theme” should be defined by including a heading element within the element, often immediately after the opening tag.

<section class=”contact”>

<h1>Enter Your Details</h1>

<form> <!– … –> </form>

</section>

article

The <article> element is even more specific than a <section>. It is also applied to a section of content that is semantically related, and should also have a heading. However, this section of content should additionally be “self-contained”. This means that the contents of an <article> should be able to be isolated from the rest of the page and still be meaningful.

One common purpose for an <article> is in marking content for syndication. For example, marking a blog post.

<article class=”blog”>

<h1>Blog Detail</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p>

<p>Quae similitudo in genere etiam humano apparet. Est, ut dicis, inquam…</p>

</article>

div or article or section?

So which should you use and when?

If the content within the element is not semantically related, then use a <div>. If the semantically related content is also able to be self-contained, then use an <article>. Otherwise, use a <section>.

Combining the Elements

Where things can get a bit complicated is when we try to combine the different elements together.

Articles within an Article

We can nest <article> elements within each other. Although still self-contained, inner <article>s are assumed to be related to the contents of the outer <article>.

For example, if there is a long excerpt within a blog post that is written by another person, it could be contained in its own <article>.

<article>

<h1>Article Title</h1>

<p class=”author”>John Smith</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<article>

<h2>Another Article</h2>

<p class=”author”>Jane Doe</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</article>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</article>

Articles within a Section

We can also have multiple <article> elements within a <section> element. A good example of this is a blog homepage showing the latest posts. The container for all the latest posts would be a <section>, whereas each individual post excerpt could be an <article>.

<section>

<h1>Latest Blog Posts</h1>

<article>

<h2>Blog Post Title</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

</article>

<article>

<h2>Blog Post Title</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

</article>

</section>

Sections within an Article

Each individual <article> may also have <section> elements within it. For example, this particular post could be written like this –

<article>

<h1>Sectioning Content in HTML5 – div or section or article?</h1>

<section>

<h2>Overview of the Elements</h2>

<section>

<h3>div</h3>

<p>The div element is the most general purpose element.</p>

</section>

<section>

<h3>section</h3>

<p>The section element is slightly more specific that a div</p>

</section>

<section>

<h3>article</h3>

<p>The article element is even more specific than a section</p>

</section>

</section>

<section>

<h2>div or section or article?</h2>

<!– … –>

</section>

<section>

<h2>Combining the Elements</h2>

<!– … –>

</section>

</article>