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:

  1. to indicate a generic section of the web page design, when the content is not appropriate for one of the other HTML sectioning tags:

    In the past, many developers have used the div element for this purpose.

  2. 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.