Articles → HTML 5 → Articles And Sections In Html5

Articles And Sections In Html5

In this article, we will discuss article and section tags in HTML5.

Software Requirement

For HTML5, you need the following: -

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

Technical Knowledge

To understand this article, you should know about the previous version of HTML i.e., 4.01.

Semantic HTML

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

Benefit Of Using Semantic HTML

Here I am listing down a 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 does not have any information regarding the styling, so table markup is semantic HTML but not presentational HTML.

On the other hand, the b markup signifies that the data inside the markup will be displayed in bold. But by looking at the 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 the article

To illustrate the above points let me give you an example. Consider a blog that contains many sections (or in other words many subheadings 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 that contain heading and content. As the subheading and content are related to each other so we will enclose them inside the section.

Now the question is why we cannot enclose the subheading and content inside the article. The answer is subheading and content is a part of a single blog and is not independent entity.

So, for the above scenario, we can use article and section markup in the following manner: -

<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>

Try It

Output

How ‘Div’ Is Different From ‘Article’ And ‘Section’ Markups?

div is different from the article and section. These are the differences: -

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

Full Code

<!DOCTYPE html>
<html>
<head>
    <title> Articles And Sections In Html5 Demo</title>
</head>
<body>
    <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>
</body>
</html>

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	**