Articles → HTML 5 → articles and sections in HTML5

articles and sections in HTML5

In this tutorial I will explain about ‘article’ and ‘section’ tag in HTML5. This topic contains following sections

Software requirement
Technical knowledge
Semantic HTML
Benefit of using semantic HTML
Semantic HTML Vs Presentational HTML
‘article’ and ‘section’ markups
How ‘div’ is different from ‘article’ and ‘section’ markups?

Software requirement

For HTML 5 you need

Any text editor like notepad for writing code
Any browser which supports HTML 5

Technical knowledge

In order to understand this tutorial you should know about previous version of HTML i.e. 4.01.

Semantic HTML

HTML is said to be semantic when HTML markups convey meaning. For example ‘table’ markup signifies that data will be structured in tabular format.

Benefit of using semantic HTML

Here I am listing down few benefits of using semantic HTML

Semantic HTML is easy to understand and maintain.
Semantic HTML enables effective search engine optimization.

Semantic HTML Vs Presentational HTML

As discussed above semantic HTML is when HTML markups convey meaning. On the other hand we also have presentational HTML which specifies how the markup is displayed in the browser.

For example ‘table’ markup signifies that data will be structured in tabular format (as discussed above) but it doesn’t have any information regarding the styling, so ‘table’ markup is semantic HTML but not presentational HTML.

On the other hand ‘b’ markup signifies that the data inside the markup will be displayed in bold. But by looking at ‘b’ markup you cannot infer any meaning so ‘b’ is presentational HTML but not semantic HTML.

‘article’ and ‘section’ markups?

‘article’ and ‘section’ markups are semantic HTML markups but not presentations HTML markups. The purpose of ‘article’ and ‘section’ markups is

Section – If the enclosed contents are related then we use ‘section’.

Article – If the enclosed contents are independent then we use ‘article’.

To illustrate above points let me give you an example. Consider a blog which contains many sections (or in other words many subheading and content)

Article on global warming

Subheading 1
Content 1

Subheading 2
Content 2

Subheading 3
Content 3

In the above scenario the complete blog is an independent entity so we will enclose it inside the ‘article’ markup. Inside the blog we have 3 subsections which contain heading and content. As subheading and content are related to each other so we will enclose it inside the ‘section’.

Now the question is why we can’t enclose the subheading and content inside the ‘article’. The answer is subheading and content is a part of a single blog and is not an independent entity.

So for the above scenario we can use ‘article’ and ‘section’ mark up like

<article>
	<h1>Article on global warming</h1>
	<section>
		<h2>Subheading 1</h2>
		<p>Content 1</p>
	</section>
	<section>
		<h2>Subheading 2</h2>
		<p>Content 3</p>
	</section>
	<section>
		<h2>Subheading 3</h2>
		<p>Content 3</p>
	</section>
</article>

The output of the above code would be

Picture showing the output of article and section tag

Click to Enlarge

How ‘div’ is different from ‘article’ and ‘section’ markups?

‘div’ is different from ‘article’ and ‘section’. Here is why

‘div’ should be used for styling purpose (by applying CSS) whereas ‘article’ and ‘section’ should not be used for styling purpose.
If the contents are not related to each other then div markup should be used whereas if the content are related then we should use ‘article’ or ‘section’ markups

Browser support

Internet Explorer	Firefox	Chrome	Safari	Opera	Edge
9.0	4.0	6.0	5.0	11.1	Yes

Video

Posted By -	Karan Gupta

Posted On -	Friday, September 26, 2014

Updated On -	Wednesday, January 2, 2019

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250