HTML - <section> Tag

HTML <section> tag is used to represent an indepenedent, self-contained composition content in an HTML document. This tag is included in HTML5

HTML section tag is similar to the <article> tag. A single HTML document can have multiple section elements. When an HTML <section> element is nested, the inner element represents the section related to the outer element. For example, comments on social media posts can be an section element nested in the section representing the social media post. It is mostly used for forum posts, magazine or newspaper sections, blog entries, product cards, etc.

Syntax

<section>
   .....
</section>

Attribute

HTML section tag supports Global and Event attributes of HTML.

Examples of HTML section Tag

Bellow examples will illustrate the usage of section tag. Where, when and how to use section tag to create section elements.

Creating self-contained Content usin section Tag

In the following example we have created 2 self-contained content using <section> tag, both of them are indepenedent from each other as well as from parrent.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML section tag</title>
</head>

<body>
   <!-- Creating section Element -->
   <h2>HTML 'section' Element</h2>
   <section>
      <h3>HTML Tags</h3>
      <p>
          HTML tags are similar to keywords, which specify 
          how a web browser will format and display content.
          A web browser can differentiate between simple content 
          and HTML content with the use of tags. 
      </p>
   </section>
   <section>
      <h3>HTML Attributes</h3>
      <p>
          An attribute is used to define the characteristics
          of an HTML element and is placed inside the element's 
          opening tag. All attributes are made up of two parts:
          a name and a value
      </p>
   </section>
</body>

</html>

Styling section Element

Consider the following example, where we are going to use the <section> tag and applying the CSS properties.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML section tag</title>
   <style>
      section {
         width: 300px;
         height: 150px;
         background-color: aquamarine;
         border-radius: 10px;
      }
      section h3,
      p {
         margin: 10px 10px;
      }
   </style>
</head>

<body>
   <!--create a section element-->
   <h2>HTML 'section' Element</h2>
   <section>
      <h3>HTML Tags</h3>
      <p>
          HTML tags are similar to keywords, which specify 
          how a web browser will format and display content.
          A web browser can differentiate between simple content 
          and HTML content with the use of tags. 
      </p>
   </section>
   <section>
      <h3>HTML Attributes</h3>
      <p>
          An attribute is used to define the characteristics
          of an HTML element and is placed inside the element's 
          opening tag. All attributes are made up of two parts:
          a name and a value
      </p>
   </section>
</body>

</html>

Nested section Elements

Let's look into the another scenario, where we are going to create a nested section element.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML section Tag</title>
   <style>
      section {
         margin: 5px;
         border-radius: 10px;
         padding: 10px;
         border: 2px solid black;
      }
      p {
         margin: 10px;
      }
   </style>
</head>

<body>
   <!--create a section element-->
   <h2>HTML 'section' Element</h2>
   <section>
   <h3>HTML Elements</h3>
   <p>
       HTML Elements are building block of a web page.
       It is used to create component for webpages.
   </p>
   <section>
      <h3>HTML Tags</h3>
      <p>
          HTML tags are similar to keywords, which specify 
          how a web browser will format and display content.
          A web browser can differentiate between simple content 
          and HTML content with the use of tags. 
      </p>
   </section>
   <section>
      <h3>HTML Attributes</h3>
      <p>
          An attribute is used to define the characteristics
          of an HTML element and is placed inside the element's 
          opening tag. All attributes are made up of two parts:
          a name and a value
      </p>
   </section>
   </section>
</body>

</html>

Image implementing on section Element

In the following example, we are creating nested ‘section’ elements to represent the self-contained content of the blog post and its comments using <section> tag.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML section tag</title>
   <style>
      section img {
         width: 200px;
      }
   </style>
</head>

<body>
   <!--create a section element-->
   <section>
      <h2>Blog post</h2>
      <img src="/images/logo.png?v3" alt="Tutorialspoint logo">
      <section>
      <h2>Comments</h2>
      <p>Dman good...</p>
      <p>fabulous...!</p>
      </section>
   </section>
</body>

</html>

Supported Browsers

Tag
section	Yes 6.0	Yes 9.0	Yes 4.0	Yes 5.0	Yes 11.1

html_tags_reference.htm