How and When to Choose Between Article and Section Element in HTML5?

Problem:

You have to write an HTML page. Here you can use <article> and <section> element. You need to know when and where these elements are used and how these elements are used correctly.

Solution:

<article>:

If you see following items in your page use <article> element

  • Forum post
  • Newspaper article
  • Blog entry
  • User-submitted article
  • Any other independent content

Example-The code:

<article>
    <h1> Headlines</h1>
    <p> headline should be the first thing they’ll see. The headline and post image needs to work together with the goal of enticing the visitor to read the first line of the post.</p>
</article>

Explanation:

This is a blog post. So we use <article> element here.

<Section>:

<section> element is used for two purposes:

  1. Sectioning different type of contents
  2. Sectioning related contents.

Example 1: The code:

<div id= “newspaper”>
    <section id= “sports page”></section>
    <section id= “editorial”></section>
    <section id= “cultural”></section>
</div>

Explanation:

Here different type of contents like sports page, editorial, cultural etc. are sectioned using <section> element.

Example 2: The code:

<article id=”The world war 2”>
  <section id="introduction"></section>
  <section id="content"></section>
  <section id="summary"></section>
</article>

Explanation:

Here related contents are sectioned in the <article> element.

Summary:

So when you need to section different types of contents to make a general form (like newspaper), use <section> element. On the other hand, when you need to break an article into different section, use <section> element.

Things to know about <section> and <article> element

  • <section> element is used with a heading.
  • <section> is semantic element where <div> is non-sematic. A semantic element defines its content clearly. Suppose <section> defines its content to be related. For sectioning those related content we use <section> element. But <div> describes nothing about its content. This element is used for styling. So where the content is needed to style only, use <div> instead.