section

< html‎ | elements
Jump to: navigation, search

section

This page has been flagged with the following issues:


W3C Working Draft

Summary

Defines sections in a document, such as chapters, headers, footers, or any other sections of the document. It is new to HTML5.


Overview Table

DOM Interface HTMLElement

HTML information

Closing Tag required
CSS Display block


A section 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. 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.

Examples

In the following example, an article (part of a larger document about apples) contains two short sections.

HTML

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

HTML

<!-- 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>

Usage

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.


Related specifications

Specification Status Related Changes
HTML 5 W3C Candidate Recommendation

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 6
4
9
11.1
5

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support 2.2
7
18
15
?
11.5
?
4


Compatibility notes

Browser Version Note
Internet Explorer 9 Windows Internet Explorer 9. The section element is only supported for webpages displayed in IE9 Standards mode.

See also

Related articles

Document Structure











  • section

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]