section element | section object
Represents a generic section of a document or application.
![]() |
HTML information
| Closing Tag | required |
|---|---|
| CSS Display | block |
DOM Information
Inheritance Hierarchy
Members
The section object has these types of members:
Methods
The section object has these methods.
| Method | Description |
|---|---|
| addBehavior |
Attaches a behavior to the element. |
| appendChild |
Appends an element as a child to the object. |
| applyElement |
Makes the element either a child or parent of another element. |
| attachEvent |
Note
attachEvent is no longer supported. Starting with IE11, use addEventListener. For info, see Compatibility changes.
Binds the specified function to an event, so that the function gets called whenever the event fires on the object. |
| blur |
Causes the element to lose focus and fires the onblur event. |
| clearAttributes |
Removes all attributes and values from the object. |
| click |
Simulates a click by causing the onclick event to fire. |
| cloneNode |
Copies a reference to the object from the document hierarchy. |
| componentFromPoint |
Returns the component located at the specified coordinates via certain events. |
| contains |
Checks whether the given element is contained within the object. |
| getAttributeNodeNS |
Gets an attribute object that matches the specified namespace and name. |
| getAttributeNS |
Gets the value of the specified attribute within the specified namespace. |
| getElementsByClassName |
Gets a collection of objects that are based on the value of the class attribute. |
| getElementsByTagNameNS |
Gets a collection of objects that are based on the specified element names within a specified namespace. |
| hasAttribute |
Determines whether an attribute with the specified name exists. |
| hasAttributeNS |
Determines whether an attribute that has the specified namespace and name exists. |
| hasAttributes |
Determines whether one or more attributes exist for the object. |
| insertAdjacentHTML |
Inserts the given HTML text into the element at the location. |
| insertAdjacentText |
Inserts the given text into the element at the specified location. |
| msMatchesSelector |
Determines whether an object matches the specified selector. |
| normalize |
Merges adjacent DOM objects to produce a normalized document object model. |
| removeAttributeNS |
Removes the specified attribute from the object. |
| removeBehavior |
Detaches a behavior from the element. |
| removeNode |
Removes the object from the document hierarchy. |
| replaceAdjacentText |
Replaces the text adjacent to the element. |
| replaceNode |
Replaces the object with another element. |
| setActive |
Sets the object as active without setting focus to the object. |
| setAttributeNodeNS |
Sets an attribute object as part of the object. |
| setAttributeNS |
Sets the value of the specified attribute within the specified namespace. |
| setCapture |
Sets the mouse capture to the object that belongs to the current document. |
| swapNode |
Exchanges the location of two objects in the document hierarchy. |
Properties
The section object has these properties.
| Property | Description |
|---|---|
|
Sets or retrieves the access key for the object. | |
|
Retrieves a collection of attributes of the object. | |
|
Gets a value indicating whether the object can contain child objects. | |
|
Sets or retrieves the class of the object. | |
|
Returns a reference to the constructor of an object. | |
|
Sets or retrieves the HTML between the start and end tags of the object. | |
|
Sets or retrieves the text between the start and end tags of the object. | |
|
Gets the value that indicates whether the user can edit the contents of the object. | |
|
Gets the value that indicates whether the user can interact with the object. | |
|
Retrieves whether a TextRange object can be created using the object. | |
|
Sets or retrieves the language to use. | |
|
Sets or retrieves the language in which the current script is written. Note This has been superceded by the type attribute for the script element. If you are using javascript alone, you don't need to specify a type or language with the script element.
| |
|
Retrieves the height of the object relative to the layout or coordinate parent, as specified by the offsetParent property. | |
|
Retrieves a reference to the container object that defines the offsetTop and offsetLeft properties of the object. | |
|
Retrieves the width of the object relative to the layout or coordinate parent, as specified by the offsetParent property. | |
|
Sets or retrieves the object and its content in HTML. | |
|
Sets or retrieves the text of the object. | |
|
Retrieves the parent object in the object hierarchy. | |
|
Retrieves the container object in the document hierarchy that can be used to create a TextRange containing the original object. | |
|
Retrieves the ordinal record from the data set that generated the object. | |
|
Sets or retrieves the role for this element. | |
|
Gets the namespace defined for the element. This property is not supported for Windows apps using JavaScript. | |
|
Retrieves the ordinal position of the object, in source order, as the object appears in the document's all collection. | |
|
Retrieves the tag name of the object. | |
|
Sets or gets the URN specified in the namespace declaration. This property is not supported for Windows apps using JavaScript. | |
|
Sets or retrieves advisory information (a ToolTip) for the object. | |
|
Retrieves the element's unique number. | |
|
Determines whether data formats within content are automatically detected and (if found) converted to clickable links. |
Standards information
There are no standards that apply here.
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.
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
