You are here: Home > HTML Reference > Elements > <section> element

Usage

First introduced in HTML 5, the section element is inconsistently supported in major browsers. In theory, it should be simple to use <section> instead of a generic block-level element like <div class=section>. For example:

<section>
<h1>Welcome to Initech</h1>
<p>This is our <span>home page</span>.</p>
</section>

And you would expect the DOM to look something like this (omitting text nodes for carriage returns):

section
|
+--h1 (child of section)
|  |
|  +--text node "Welcome to Initech"
|
+--p (child of section, sibling of h1)
   |
   +--text node "This is our "
   |
   +--span
   |  |
   |  +--text node "home page"
   |
   +--text node "."

Unfortunately, IE does not natively recognize the section element, so the elements that you would expect to be children of the section element are actually siblings, and the section element appears in the DOM as an empty node.

section (no children)
h1 (sibling of section)
|
+--text node "Welcome to Initech"
p (sibling of h1)
|
+--text node "This is our "
|
+--span
|  |
|  +--text node "home page"
|
+--text node "."

Attributes

• common attributes

Browser compatibility

Compatibility table legend

Further reading

• The section element in HTML 5
• The Road to HTML 5: the section element