HTML5 <section> Tag

The HTML <section> tag is used to represent a generic section of a document, i.e., a thematic grouping of content, typically with a heading.

The only content permitted inside this element is flow content. Both the starting and ending tag are mandatory for this element. The parent of the <section> tag can be any element that accepts flow content. Note that a <section> element must not be a descendant of an <address> element.

Do not use the <section> element as a generic container. This is what <div> is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.

The following style is applied to this element by default:

section {
  display: block;
}

Here is an example of using this tag:

<article>
  <hgroup>
    <h1>Apples</h1>
    <h2>Tasty, delicious fruit!</h2>
  </hgroup>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  <section>
    <h1>Red Delicious</h1>
    <p>These bright red apples are the most common found in many supermarkets.</p>
  </section>
  <section>
    <h1>Granny Smith</h1>
    <p>These juicy, green apples make a great filling for apple pies.</p>
  </section>
</article>

Attributes

This element only accepts global attributes.

Examples

See the Pen HTML section Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <section> element on MDN.
  2. You can also read the HTML <section> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top