<section> tag — TutorialBrain

Note/Info The <section> tag is a new tag in HTML5.

HTML5 <section> tag

The HTML5 <section> tag defines an area of a document.

This area can be a part or sector like Header Section, Footer Section etc.

Sometimes, it is difficult to distinguish the different areas so you can group the related area inside the <section> tag.

So, this is a very important tag for grouping the related areas/sections.

Difference between <section> tag and <div> tag

The <section> creates an area or section which contains the grouped content inside it to make it look like a single theme.

On the other hand, the <div> tag is a general tag to create areas. Both these tags are similar.
In short, the <div> tag is a generic tag to create areas or section while the <section> tag is a specific tag to group related content.

The <section> tag also creates independent section or area.

Developers usually use the <section> tag to make an area distinct so that they can use this code in multiple pages of the website. The goal is to improve the code re-usability and to make a particular content area a distinct content area.

Syntax:
<section> Content…</section>

Example

<section>
  <h1>This is one section</h1>
  <p>Content of this paragraph</p>
</section>

How Browser will display

BLOCK .

Difference between HTML4.01, XHTML and HTML5

HTML4	XHTML	HTML5
NA	NA	New tag in HTML5

Attributes used with <section> tag

NONE

Global Attributes

The <section> tag supports Global attributes.

Event Attributes

The <section> tag supports Event attributes.

Supporting Browsers

Related Tags

<header>, <footer> & <div> tags.