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.