HTML Heading Groups
In this page:
Grouping a Heading with hgroup
hgroup wraps a heading element together with one or more paragraphs of text that directly support it, like a subtitle or a short description, signaling that this group of text should be treated as a single heading unit rather than a heading followed by unrelated body content.
Note: Keep the content inside hgroup limited to the heading plus its immediate subtitle or tagline -- move any general body text outside the group.
Warning: hgroup does not accept another full heading level inside it as a second "heading" -- only one heading paired with supporting paragraph text.
Example: Grouping a Heading with hgroup
<hgroup>
<h1>Chapter One</h1>
<p>The Beginning</p>
</hgroup>Using menu for Toolbars and Commands
menu is structurally identical to ul -- both hold a list of li items -- but menu specifically signals that the list represents a set of commands, actions, or toolbar items rather than general page content, which matters most to assistive technology interpreting the page's structure.
Note: Reach for ul for ordinary content lists, and reserve menu for lists that genuinely represent actions or commands a user can trigger.
Warning: Without extra ARIA roles or CSS, menu renders visually identical to a plain bulleted ul -- the difference is purely semantic, not visual.
Example: Using menu for Toolbars and Commands
<menu>
<li><button>Cut</button></li>
<li><button>Copy</button></li>
</menu>Marking a Search Section with search
The search element wraps a search form or a group of search-related controls, giving the page a dedicated landmark that screen reader users can jump straight to, similar to how nav marks navigation and main marks primary content.
Note: Wrap your site's search form in search so assistive technology users can navigate directly to it as a recognized landmark.
Warning: search is a landmark wrapper, not a form replacement -- it still needs a real form (or input) inside it to actually collect and submit a search query.
Example: Marking a Search Section with search
<search>
<form action="/search">
<input type="search" name="q">
</form>
</search>Combining hgroup with Page Structure
hgroup often appears inside larger semantic containers like header or article, working alongside them rather than replacing them -- the header holds the overall top section of a page or component, while hgroup groups just the heading-plus-subtitle text within it.
Note: Nest hgroup inside header when a page or section's top area contains both a title/subtitle pair and other elements like a nav or logo.
Warning: Do not use hgroup as a substitute for header -- header can hold navigation, logos, and other content, while hgroup is scoped only to heading text.
Example: Combining hgroup with Page Structure
<header>
<hgroup>
<h1>My Blog</h1>
<p>Thoughts on web development</p>
</hgroup>
<nav>Menu</nav>
</header>Accessibility of Grouping Elements
hgroup, menu, and search all exist primarily to improve how assistive technology interprets a page -- hgroup keeps a title and subtitle announced together as one unit, menu clarifies a list is a set of commands, and search gives a jump-to landmark, all without changing how the page looks by default.
Note: Test pages using these elements with a screen reader occasionally, since their main benefit is invisible to sighted users but significant for assistive technology.
Warning: None of these three elements add visual styling on their own -- expecting a visual change after adding them (without also adding CSS) is a common point of confusion.
Example: Accessibility of Grouping Elements
<hgroup>
<h1>Dashboard</h1>
<p>Your weekly summary</p>
</hgroup>
<menu>
<li><button>Refresh</button></li>
</menu>- Wrapping unrelated headings in one hgroup just to group them visually, when hgroup is meant specifically for one heading plus its directly supporting subtitle or tagline.
- Using menu when ul is what is actually needed -- menu is intended for toolbar/command-style groupings, not general content lists.
- Forgetting that the search element is a landmark role, not a form-styling tool -- it still needs a real form and input inside it to function.
- hgroup wraps a heading (h1-h6) together with one or more paragraphs of directly supporting content, like a subtitle or byline.
- menu is semantically identical to ul but signals the list represents a set of commands or a toolbar rather than general content.
- search wraps a search form or search-related controls, giving assistive technology a clear landmark to jump straight to.
hgroup and search are supported in all current versions of Chrome, Firefox, Safari, and Edge; menu has long-standing browser support though it renders visually identical to ul without added styling.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: