HTML - <section> Tag

Quiz

Introduction to <section> Tag

The HTML <section> tag is used to represent an independent, self-contained piece of content within an HTML document. This tag was included in HTML5.

The HTML section tag is similar to the <article> tag. A single HTML document can contain multiple section elements. When an HTML <section> element is nested, the inner element represents a section related to the outer element.

For example, comments on social media posts can be a section element nested within the section representing the social media post. It is mostly used for forum posts, magazine or newspaper sections, blog entries, product cards, etc.

Syntax

Following is the syntax of <section> tag −

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

Attribute

The HTML section tag supports both Global and Event attributes.

Example: Creating Self-Contained Content

In this example, we created two self-contained sections using the <section> tag. Each section is independent of the other and the parent element. One section is for HTML tags, and the other is for attributes, each with its own headings and paragraphs.

<!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>

Example: Styling section Element

Consider this example, where we use the <section> tag and apply CSS properties. The HTML code styles two sections with an aquarium background, rounded corners containing paragraphs.

<!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>

Example: Nested section Elements

Let's explore another scenario, where we create a nested section element. This HTML code styles nested sections with margins, rounded corners, padding, and borders, each containing headings and paragraphs.

<!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>

Example: Image Implementation

In the following example, we create nested <section> elements to represent the self-contained content of the blog post and its comments. The HTML code includes a blog post with an image and a nested comments section containing two comments.

<!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

Print Page