W3docs
en
Log in

HTML <section> Tag

The <section> tag is used to create standalone page sections. Tag description and examples of using.

HTML <section> is one of the HTML5 elements. It is used to create standalone sections within a webpage containing logically connected content (news block, contact information, etc.). The <section> tag is often used when creating a landing page to divide the page into separate logical blocks.

For example, a navigation menu must be wrapped in a <nav> tag, but a map display and a list of search results do not have specific elements, and can be put inside a <section>.

The <section> tag can be nested within the <article> tag, dividing the content into groups. HTML5 recommends including a heading (<h1>–<h6>) for each section to define its topic. While any heading level can be used, it is best practice to follow a logical hierarchy based on the nesting structure.

Danger

Don’t use the <section> tag as a universal container for creating page structure; you should use the <div> tag for that purpose.

Syntax

The <section> tag comes in pairs. The content is written between the opening (<section>) and closing (</section>) tags.

Example of the HTML <section> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Using the section tag</title>
  </head>
  <body>
    <section>
      <h2>Hypertext markup language HTML</h2>
      <p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
    </section>
    <section>
      <h2>CSS</h2>
      <p>Formal language, which is used as a description zone, formatting the appearance of a web page, written by the help of markup languages HTML and XHTML, but it can be applied to any XML-document, for example, to SVG or XUL.</p>
    </section>
  </body>
</html>
Try it Yourself »

Result

section tag example

Example of the HTML <section> tag inside another <section> tag :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the section tag</h1>
    <section>
      <h2>Hypertext markup language HTML</h2>
      <p>
        HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
      </p>
      <section>
        <h3>Hypertext markup language HTML</h3>
        <p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
      </section>
    </section>
    <section>
      <h2>CSS</h2>
      <p>Formal language, which is used as a description zone, formatting the appearance of a web page, written by the help of markup languages HTML and XHTML, but it can be applied to any XML-document, for example, to SVG or XUL.</p>
    </section>
  </body>
</html>
Try it Yourself »

Attributes

The <section> tag supports the Global Attributes and the Event Attributes.

How to style an HTML <section> Tag

section {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
}

Practice

Practice

What is the purpose of the Section tag in HTML?