HTML <section> tag

The section element in HTML is used to define sections in a document.

Syntax of Section Tag:

<body>
<h1>……….</h1>
<section>
<h2>……….</h2>
<p> …………………………</p>
</section>
<section>
<h2>………..</h2>
<p>…………………………. <p>
</section>
</body>

Examples of Section Tag

Example 1:

In this example, we use the HTML "section" element for defining the two sections on the web page:

<!DOCTYPE html>
<html>
<head>
<title> html section tag </title>
</head>


<body>
<h1> here is the section tag example </h1>
<section>
<h2> preview of this document data part-1 </h2>
<p> Lorem, ipsum dolor sitametconsecteturadipisicingelit. Natus, reprehenderitea rerum eaquequidemut
exercitationemullamvelit dolor modi! Ducimusmagniiure autem itaquepraesentiumrepellendusnecessitatibus
dignissimos at!
</p>
</section>
<section>
<h2> preview of this document data part-2 </h2>
<p> Lorem ipsum, dolor sitametconsecteturadipisicingelit. Aliquam hic dignissimos vitae error alias dolor
magniinventore quo temporibusrepudiandae. Exercitationemducimus fugit iure. Nesciuntatqueiustomagni ad
aliquid?   
</p>
</section>
</body>
</html>

Output:

Example 2:

Here, we are going to declare three sections in a html document with the help of html section tag:

<!DOCTYPE html>
<html>
<head>
<title> html section tag </title>
</head>
<body>
<h1> here is the section tag example </h1>
<section>
Lorem ipsum dolor sit ametconsecteturadipisicingelit. Deserunt, exercitationem hic. Doloremquevoluptasmodi, consequunturquidempariaturinciduntreprehenderitenim delectus. Praesentiumnequeexcepturiearumharumillo ad.
</section>
<section>
Lorem ipsum dolor sit ametconsecteturadipisicingelit. Est, saepe in. Impedit vel natus, asperiores, doloremaliquamblanditiisvoluptas, nostrum rationeharum error ipsam sed consequatur rerum doloribusnesciuntaccusantium.
</section>
<section>
Lorem ipsum dolor sit ametconsecteturadipisicingelit. Alias dicta quos estquaeratmodi, nobis mollitiavoluptatibus! Eumharumeaquecupiditatequia, pariaturblanditiis at, quis illum alias veniamquaerat?
</section>
</body>
</html>

Output:

Example 3:

Here, we are going to declare one section in a html document with the help of html section tag:

<!DOCTYPE html>
<html>
<head>
<title> html section tag </title>
</head>
<body>
<h1> here is the section tag example </h1>
<section>
<h2> preview of this document data part-1 </h2>
<p> Definition and Usage
For defining section in html document, we use the <section> tag in html.
Example
Example 1:
Here, in this example we are going to declare two sections in a html document with the help of html <section> tag: </p>
</section>
</body>
</html>

Output:

Browser support:

List of browsers that support html section tag are mentioned below:

Chrome: Yes – version 5 needed

Microsoft Edge: Yes– version 12 needed

Firefox: Yes– version 4 needed

Safari: Yes– version 5 needed

Opera: Yes– version 11.1 needed

Default CSS Settings

The following CSS values are saved as default in most of the browsers for defining the section tag:

Example

section {
  display: block;  
}