Syntax
<hgroup>
<h1>Main Title</h1>
<p>Subtitle or tagline</p>
</hgroup>Examples
Title with Subtitle
Grouping a page title with a descriptive subtitle.
<hgroup>
<h1>Codectionary</h1>
<p>Learn to code, one tag at a time.</p>
</hgroup>Article Title with Byline
Using hgroup for an article heading and its byline together.
<article>
<hgroup>
<h2>Understanding the Event Loop</h2>
<p>A deep dive into how JavaScript handles async code</p>
</hgroup>
<p>Article content...</p>
</article>Best practices
- Use hgroup specifically to pair a heading with a subtitle or tagline, not as a general wrapper for multiple headings
- Keep the subtitle content as a paragraph or similar, not another heading level
- Do not overuse hgroup — most headings do not need a subtitle wrapper
- Test how assistive technology in your target browsers handles hgroup, since support has evolved over time
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures web content using elements and tags, defining everything from headings and paragraphs to images and links. HTML forms the backbone of every website, working alongside CSS for styling and JavaScript for interactivity.<div>
The <div> element is a generic container used to group and organize content on a web page. It has no semantic meaning on its own but is essential for layout and styling. Think of it as a box that can hold other HTML elements. Divs are block-level elements, meaning they start on a new line and take up the full width available.<body>
The <body> element contains all the visible content of an HTML document — text, images, links, forms, and everything a user actually sees and interacts with in the browser. There can only be one <body> per document, and it must come after the <head> element. Unlike <head>, which holds metadata, everything inside <body> is rendered on the page.<head>
The <head> element contains metadata about the document — information that is not displayed directly on the page but is used by browsers, search engines, and other tools. This includes the page <title>, character encoding, linked stylesheets, scripts, and social media preview data. It must come before <body> and contains no visible content itself.
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures web content using elements and tags, defining everything from headings and paragraphs to images and links. HTML forms the backbone of every website, working alongside CSS for styling and JavaScript for interactivity.<div>
The <div> element is a generic container used to group and organize content on a web page. It has no semantic meaning on its own but is essential for layout and styling. Think of it as a box that can hold other HTML elements. Divs are block-level elements, meaning they start on a new line and take up the full width available.<body>
The <body> element contains all the visible content of an HTML document — text, images, links, forms, and everything a user actually sees and interacts with in the browser. There can only be one <body> per document, and it must come after the <head> element. Unlike <head>, which holds metadata, everything inside <body> is rendered on the page.<head>
The <head> element contains metadata about the document — information that is not displayed directly on the page but is used by browsers, search engines, and other tools. This includes the page <title>, character encoding, linked stylesheets, scripts, and social media preview data. It must come before <body> and contains no visible content itself.