The header of a section is denoted by the hgroup element. In cases where the heading consists of multiple levels, such as subheadings, alternative titles, or taglines, this element is employed to group a set of h1-h6 elements together.
When wrapping one or more heading elements from <h1> to <h6> , like headings and sub-headings, the <hgroup> tag in HTML is called a heading group and is used to group the heading elements. The <hgroup> tag requires matching starting and ending tags.
Syntax of hgroup tag in html goes as below:
<hgroup>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
</hgroup>
The content within hgroup elements is specified as the content of the most prominent h1-h6 element that is a descendant of the hgroup element. In cases where multiple elements have the same hierarchy level, the first one encountered is considered. This rule applies for purposes like creating document summaries and outlines. If no such elements exist, the hgroup element's content is considered as an empty string.
Subtitles within the hgroup element are designated by subordinate heading content elements.
Additional heading content elements within the hgroup element are used to denote subheadings and subtitles.
When any of the descendants of the hgroup element, namely the h1-h6 elements, are assigned a high rank, the overall rank of the hgroup element is determined by the highest ranked element among its descendants. If none of its descendants are highly ranked, the hgroup element's rank is equivalent to that of the h1 element, which holds the highest rank.
Below are some examples illustrating suitable headers. The emphasized text in each case represents the content that a software gathering header information would identify as the main heading, disregarding any subheadings.
<hgroup>
<h1>Crowded elevators smell different to midgets</h1>
<h2> Nostalgia isn?t what it used to be </h2>
</hgroup>
<hgroup>
<h1>Strangers</h1>
<h2>Love or Hate depends on perspective</h2>
</hgroup>
In these scenarios, the hgroup element is utilized to conceal the h2 heading from the outline algorithm, acting as an additional title.
One more instance that illustrates the functionality of the hgroup tag is:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title> Title of the Document </title>
</head>
<body>
<hgroup>
<h1> #1 - Demo Heading for hgroup tag </h1>
<h2> #2 - Demo Heading for hgroup tag</h2>
</hgroup>
<p> #1 - Demo Text for hgroup tag </p>
<p> #2 - Demo Text for hgroup tag </p>
<p> #3 - Demo Text for hgroup tag </p>
<p> #4 - Demo Text for hgroup tag </p>
</body>
</html>
Output:
The example showcased earlier demonstrates how the two headers have been assigned to the <hgroup>.
HTML Code:
<hgroup>
<h1> #1 - Demo Heading for hgroup tag </h1>
<h2> #2 - Demo Heading for hgroup tag</h2>
<hgroup>
Another example which implements hgroup tag is
<!DOCTYPE html>
<html>
<body>
<!--HTML hgroup tag starts here-->
<hgroup>
<h1>Title for the Document </h1>
<h2>Description regarding the title of the document. </h2>
</hgroup>
<!--HTML hgroup tag ends here-->
</body>
</html>
Output:
An additional illustration that incorporates a Title, Sub-Title, and Metadata within the hgroup element.
HTML Code:
<!DOCTYPE html>
<html>
<body>
<!--HTML hgroup tag starts here-->
<hgroup>
<h1>Title of the Document. </h1>
<h2>Sub-Title of the Document which has the description of the Document.</h2>
<p>Metadata regarding the contents of the document.</p>
</hgroup>
<!--HTML hgroup tag ends here-->
</body>
</html>
Output:
The header element can contain the search form, relevant logos, and the table of contents for a section. An hgroup element is employed to indicate a section heading. In cases where a heading comprises multiple levels like subheadings, alternative titles, or taglines, the element is utilized to structure a group of h1-h6 elements.
A <hgroup> element serves as a container for two or more related heading components that may be part of a <header> element. It should be utilized for tag lines, alternate titles, and subtitles. It can only consists of a group of <h1>-<h6> element(s).
A heading, one or more <p> elements, and the <hgroup> tag are enclosed in this tag. From <h1> to <h6>, any heading can be the heading inside the <hgroup> element. The browser does not display any unique content when the <hgroup> element is used.
NOTE: In HTML5, the tag was introduced and later deprecated. It is no longer included in the W3C HTML5 specification.
Consider using the subhead element as a more suitable option. In HTML 5, you can implement the subhead element. Whenever necessary, replace occurrences of "hgroup" with "subhead."