section element | section object
[This documentation is preliminary and is subject to change.]
Represents a generic section of a document or application.
 |
Standards information
There are no standards that apply here.
HTML information
| Closing Tag | required |
|---|---|
| CSS Display | block |
DOM Information
Inheritance Hierarchy
Remarks
Windows Internet Explorer 9. The section element is only supported for webpages displayed in IE9 Standards mode. For more information, see Defining Document Compatibility.
A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A website's home page could be split into sections for an introduction, news items, and contact information.
A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters or the numbered sections of a thesis. A document's main page could be split into sections for an introduction, news items, and contact information.
The section element is not a generic container element. Authors are encouraged to use the div element for styling purposes or when an element is needed as a convenience for scripting. The section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
Note Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
Examples
In the following example, an article (part of a larger document about apples) contains two short sections.
<article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article>
The rank of h1-h6 elements is determined by the number in their name. The h1 element is said to have the highest rank; the h6 element has the lowest rank. Two elements with the same name have the same rank. The default style applied to hn elements varies according to the rank of the element. However, the rank of headings that appear within a section element is automatically reduced. This affects the visual appearance of the headings inside the section element. In the following example, the author uses h1 elements without worrying whether a particular section is at the top level, the second level, the third level, and so on. The two outlines produce equivalent output.
<!-- First outline --> <h1>Let's call it a draw(ing surface)</h1> <h2>Diving in</h2> <h2>Simple shapes</h2> <h2>Canvas coordinates</h2> <h3>Canvas coordinates diagram</h3> <h2>Paths</h2> <hr/> <!-- Equivalent outline using section elements --> <h1>Let's call it a draw(ing surface)</h1> <section> <h1>Diving in</h1> </section> <section> <h1>Simple shapes</h1> </section> <section> <h1>Canvas coordinates</h1> <section> <h1>Canvas coordinates diagram</h1> </section> </section> <section> <h1>Paths</h1> </section>
See also
Build date: 3/8/2012
