to indicate navigation, main content, and header respectively.

But in HTML we have some semantic element to describe different from other tags.

Why Semantic Elements?

According to the W3C: “A semantic Web allows data to be shared and reused across applications, enterprises, and communities.”

HTML

Element

<section> tag used to define various section in the web page.

According to W3C’s HTML documentation: “A section is a thematic grouping of content, typically with a heading.”

A web page could normally be divided into various different sections for introduction, content, and contact information.

See the Pen section in html by Arpit (@soniarpit) on CodePen.

HTML

Element

<article> tag describe independent, self-contained content.

As a name suggests it is mostly used in describe article in blogs. It should be possible to distribute it independently from the rest of the web site.

Examples of where an <article> tag can be used

• Forum post
• Blog post
• Newspaper article

See the Pen article tag by Arpit (@soniarpit) on CodePen.

Nesting

in

or Vice Versa?

The <article> tag specifies independent, self-contained content.

The <section> tag defines section in a document.

Can we use the definitions to decide how to nest those elements? No, we cannot!

So, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.

HTML

Element

<header> tag may contains set of navigation links or container for introductory content.

A <header> element typically contains,

• one or more heading elements (

  -

  )

• logo or icon
• authorship information

Note: You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.

See the Pen header tag by Arpit (@soniarpit) on CodePen.

HTML