❮ Previous Next ❯

HTML <section> tag

The <section> tag is used to define a section such as header, footer etc. Generally, this element includes one or more heading with their brief explanations.

It is a block level element so that the web-browser leaves some spaces before and after the <section> element. But it can be changed customly by using CSS margin property.

Type: Block Element

Syntax of <section> tag

<section>
 <h2> Heading </h2>
  <p>
    Explaination
  </p>
</section>

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--Correct format-->
<section>

  <header>
    <h2>Heading mainly introduction</h2>
    <p>Synopsis</p>
  </header>

  <p>
    The explaination of the heading comes in this section.
  </p>

  <footer>
    <p>Author, copyright notice, announcement from author etc.</p>
  </footer>

</section>

</body>
</html>
Run The code »

<section> tag is new in HTML5. Proper use of this tag helps in SEO and page visibilty.

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<section> 6.0 or higher 9.0 or higher 4.0 or higher 5.0 or higher 11.1 or higher

Default CSS property of <section> tag

section {
  display:block;
}

<section> tag is a phrase tag since it has semantic meaning and proper structure rather than being a simply block container.

Difference between <section> tag and <div> tag

  1. <section> tag is a phrase tag while the <div> tag is not a phrase tag.
  2. <section> tag is used for proper structure and layout while the <div> tag is used only for layout, styling and grouping elements.
  3. <section> tag is used to make flow content whereas the <div> tag is flow container content so that it can be placed inside the <section> element for styling layout.
❮ Previous Next ❯