hgroup element | hgroup object
Represents the heading of a section.
![]() |
HTML information
| Closing Tag | required |
|---|---|
| CSS Display | block |
DOM Information
Inheritance Hierarchy
Members
The hgroup object has these types of members:
Methods
The hgroup 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 hgroup 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. |
Standards information
There are no standards that apply here.
Remarks
Windows Internet Explorer 9. The hgroup element is only supported for webpages displayed in IE9 Standards mode. For more information, see Defining Document Compatibility.
The hgroup element is used to group a set of h1-h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. Other elements of heading content in the hgroup element indicate subheadings or subtitles.
Examples
The following is an example of a valid heading. The hgroup masks the h2 element (which acts as a secondary title) from the outline algorithm.
<hgroup> <h1>Dr. Strangelove</h1> <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2> </hgroup>
For document summaries and outlines, the text of hgroup elements is defined as the text of the highest ranked h1-h6 element descendant, or the first such element if there are multiple elements with the highest rank. If there are no such elements, then the text of the hgroup element is the empty string. The following script demonstrates how to implement this behavior.
function findHeadings(node) { // First check if this node has an <hgroup>. var hg = node.getElementsByTagName("hgroup"); if(hg.length>0) node = hg[0]; // Now find the highest ranking heading. var ranks = [ "h1","h2","h3","h4","h5","h6" ]; for (var i=0; i<ranks.length; i++) { var headings = node.getElementsByTagName(ranks[i]); if(headings.length>0) return headings[0].textContent; } // No headings present, return empty string. return ""; }
See also
