{{HTMLRef}}
The HTML <section>
element represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each <section>
should be identified, typically by including a heading ({{HTMLElement('h1')}}-{{HTMLElement('h6')}} element) as a child of the <section>
element.
Usage notes :
- If it makes sense to separately syndicate the content of a {{HTMLElement("section")}} element, use an {{HTMLElement("article")}} element instead.
- Do not use the {{HTMLElement("section")}} element as a generic container; this is what {{HTMLElement("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.
Content categories | Flow content, Sectioning content, palpable content. |
---|---|
Permitted content | Flow content. |
Tag omission | {{no_tag_omission}} |
Permitted parent elements | Any element that accepts flow content. Note that a {{HTMLElement("section")}} element must not be a descendant of an {{HTMLElement("address")}} element. |
DOM interface | {{domxref("HTMLElement")}} |
Attributes
This element only includes the global attributes.
Example 1
Before
<div> <h1>Heading</h1> <p>Bunch of awesome content</p> </div>
After
<section> <h1>Heading</h1> <p>Bunch of awesome content</p> </section>
Example 2
Before
<div> <h2>Heading</h2> <img src="bird.jpg" alt="bird"> </div>
After
<section> <h2>Heading</h2> <img src="bird.jpg" alt="bird"> </section>
Specifications
Specification | Status | Comments |
---|---|---|
{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}} | {{Spec2('HTML5.1')}} | |
{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}} | {{Spec2('HTML5 W3C')}} |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 5 | {{CompatGeckoDesktop("2.0")}} | 9.0 | 11.10 | 4.1 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.2 | {{CompatGeckoMobile("2.0")}} | 9.0 | 11.0 | 5.0 (iOS 4.2) |
See also
- Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};
- Sections and outlines of an HTML5 document.