HTML/Elements/section

From Web Education Community Group
< HTML‎ | Elements
Jump to: navigation, search

<section>

The <section> element represents a generic section of a document or application.

Point

  • A section, in this context, is a thematic grouping of content:
    • chapter
    • various tabbed pages in a tabbed dialog box
    • numbered sections of a thesis ...
  • A Web site'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. The section element is appropriate only if the contents would be listed explicitly in the document's outline. [Example A]
  • A section typically with a heading.

HTML Attributes

See global attributes.


Examples

Example A

In the following example, two short sections in an article element. Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on [try it]:

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

Section01.png

HTML Reference

The HTML5 specification defines the <section> element in 4.4.2 The section element.