HTML Elements Reference: SECTION Element

asp.net.ph

Home > Abakada: Back to Basics > Language References > HTML Elements > SECTION Element

Represents a section of a document.

HTML 5

<section
   class = classname
   id = value
   style = css_style_rules
   title = text
>

NOTE: Both start and end tags are required.

The <section> element represents a generic stand-alone portion of a document. A section, in this context, is a thematic grouping of content, typically with a heading.

Such headings are particularly useful for users of assistive technologies like screen readers, and also advantageous for search engine optimization.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A web site’s home page could be split into sections for an introduction, menu items with brief descriptions, and other relevant information.

When it would make sense to syndicate the contents of the element, authors are encouraged to use the <article> element instead.

A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

The element can be styled using CSS for typographical effects, to project it visually as a separate section of content.

The <section> element has no attribute of its own, but supports global attributes common to all HTML elements.

The following example shows how the <section> element may be used.

<section class="chapter">
   <h2>Chapter 3</h2>
   <p><i>“Shall I compare thee ...”</i></p>
   <p>This famous line from Sonnet 18 ....</p>
</section>
<br>
<section class="appendix">
   <h2>Appendix A: Overview of Examples</h2>
   <p>Notable quotes from William Shakespeare, ...</p>
</section>

Show me