HTML <section> Tag for Subsections

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <section> Tag in HTML 5

The <section> tag is used for generic sections in an HTML document. It is primarily used for two distinctly different purposes:

to indicate a generic section of the web page design, when the content is not appropriate for one of the other HTML sectioning tags:
- <article> tag for the main theme(s) of an HTML document
- <aside> tag for an HTML sidebar
- <nav> tag for a navigation section
In the past, many developers have used the div element for this purpose.
to subdivide a long <article> or <aside> into subsections, such as for the "Tag Summary", "Tag Syntax", "Element Attributes", "Tag Examples" and "What's New / Changes" sections on this page.

The <section> tag should be used in some cases where a <div> tag would have been used in previous versions of HTML. The difference is that <section> creates a new level in the outline of the HTML document, while <div> does not. In Converting to HTML 5, if the first tag inside the div element is one of the <hn> heading tags (possibly enclosed within an hgroup element or header element), then it probably should be changed to an article element or section element in HTML 5.

If there are too many nested levels of <section>s, it likely indicates a problem with the page design or that too much content is being put into a single page. The six levels for an HTML outline hierarchy, corresponding to the <h1> heading through <h6> heading tags, should be more than enough for the outline of normal HTML web pages.

<section> Tag Syntax

Rules for coding HTML `section` elements

<body>
   ...
   ... flow content expected ...
   <section>
      ... flow content ...
   </section>
   ...
</body>

Inside an element where flow content is allowed, code one or more optional section elements.
Begin each section element with a starting <section> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Include any HTML global attributes on the <section> tag as appropriate.
End the section element with a matching </section> closing tag.
Inside the section element, include any flow content as appropriate.

<section> Content Model

Content of the <section> Tag

The content of the section element can include HTML comments, text content and any tags that can be used in flow content.

<section> Tag Attributes

Attributes of the <section> tag

global attributes

The only attributes that can be coded on the <section> tag are the common HTML attributes.

<section> Tag Examples

Examples of the `section` tag in HTML 5

Changes in HTML 5 - <section> Tag

What's new in HTML 5

The <section> tag is one of the new elements in HTML 5. It is one of the new sectioning tags in HTML 5, which are intended to reduce the need to use <div> tags for sectioning purposes.

Differences between HTML 5 and earlier versions of HTML

The <section> tag did not exist in older versions of HTML.

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the names of all HTML element types, which now includes the section element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5