By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

HTML Section Tag

How to use the section element of HTML, including example, and list of allowed attributes.

Edited: 2015-12-03 13:00

The section Element of HTML is used to create a section, of non-syndicate content. This means the content which wont be fetched by other websites.

The section element can be used to create sections and subsections, even subsections of subsections. Use it instead the old h1 to h6 elements, and include a h1 as a child in the beginning of the section element.

Each nested section marks a subsection of the parent section.

The benefits from using the section element rather then the h1-h6 elements alone, are that you can have as many subsections as you want, with the h1-h6 alone you would only be able to have up to 6 section levels.

When using the section element, it won't matter which header that you use inside the sections. The nesting of the section element will determine the level of the section. This allows you to use the section elements, and keep on using h2-h6 inside each section, which would maintain compatibility with software that uses the old method of sectioning.

The section element should be used inside the main content of the page, which would usually be inside the article element or div element.

Styling of Sections

It can be fine under some circumstances, to indicate the section level, by changing the font-size of the header. Its however generally not recommended. Because your headers can end up getting very small, which can effect readability. Indenting sections is not recommended, this can effect the readability of text.

It can be argued that the level of the section, mostly is irrelevant. The only place where Brugbart thinks it would make sense to somehow visually indicate subsections, would be in contents tables for sites. For example, indenting the links to subsections, can make it easier for users, to pick the sections of interest.


Attribute: Value: Description:
Attributes Global Attributes Common, Event, I18n

Using Section

<!DOCTYPE html>
<html lang="en-US">

    <title>My first Website</title>
    <style type="text/css">
     article, section { /* Older browsers need this fix, to render these elements properly */
     display: block;
     /* The below styles are only included to
        demonstrate the structure of the page visually
        for the purpose of this example
     section {
     border: 1px solid #298e31;
     padding: 1em;
     article {
      margin: 1em;

       <h1>Example of how to use the section elements</h1>
       <p>This is a level 1 section in the page.</p>
        <h1>This is a subsection of the main article</h1>
        <p>This is a level 2 section, a subsection of the main article.</p>

         <h1>This is a subsection of the first subsection</h1>
         <p>And this is finally a subsection to the subsection it self, creating a level 3 section.</p>