68
Thehgroupp168
elementrepresentsp112
the heading of a section, which consists of all theh1p167
–h6p167
element children of thehgroupp168
element. The element is used to group a set ofh1p167
–h6p167
elements when the heading has multiple levels, such as subheadings, alternative
titles, or taglines.
Therankp167
of anhgroupp168
element is the rank of the highest-rankedh1p167
–h6p167
element descendant of thehgroupp168
element, if there are
any such elements, or otherwise the same as for anh1p167
element (the highest rank). Other elements ofheading contentp117
in thehgroupp168
element indicate subheadings or subtitles.
The section onheadings and sectionsp174
defines howhgroupp168
elements are assigned to individual sections.
Here are some examples of valid headings.
<hgroup>
<h1>The reality dysfunction</h1>
<h2>Space is not the only void</h2>
</hgroup>
<hgroup>
<h1>Dr. Strangelove</h1>
<h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>
The point of usinghgroupp168
in these examples is to mask theh2p167
element (which acts as a secondary title) from theoutlinep176
algorithm.
How a user agent exposes such multi-level headings in user interfaces (e.g. in tables of contents or search results) is left open to
implementors, as it is a user interface issue. The first example above could be rendered as:
The reality dysfunction: Space is not the only void
Alternatively, it could look like this:
The reality dysfunction (Space is not the only void)
In interfaces where a title can be rendered on multiple lines, it could be rendered as follows, maybe with the first line in a bigger font
size:
The reality dysfunction
Space is not the only void
Example
In the following example, anhgroupp168
element is used to mark up a two-level heading in a wizard-style dialog box:
<dialog onclose="walletSetup.continue(this.returnValue)">
<hgroup>
<h1>Wallet Setup</h1>
<h2>Configure your Wallet funding source</h2>
</hgroup>
<p>Your Wallet can be used to buy wands at the merchant in town, to buy potions from travelling
salesmen you may find in the dungeons, and to pay for mercenaries.</p>
<p>We support two payment sources:</p>
<form method=dialog>
<fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
<legend> <label> <input type=radio name=payment-type value=cc> Credit Card </label> </legend>
<p><label>Name on card: <input name=cc1 autocomplete="section-cc cc-name" placeholder="Y.
Name"></label>
<p><label>Card number: <input name=cc2 inputmode=numeric autocomplete="section-cc cc-number"
placeholder="6331 1019 9999 0016"></label>
<p><label>Expiry Date: <input name=cc3 type=month autocomplete="section-cc cc-exp"
placeholder="2020-02"></label>
<p><label>Security Code: <input name=cc4 inputmode=numeric autocomplete="section-cc cc-csc"
placeholder="246"></label>
Example
169
