In current HTML, what is the <hgroup> element for, and how would you mark up a page title that has a subtitle or tagline underneath it?

## The problem hgroup exists for A title with a tagline under it is one editorial unit but two lines of text: > **Northwind Coffee** > *Roasted the week you order it* The tagline is not a section of the page, so it must not be a heading. But it is also not free-floating body copy — it belongs to the title. `<hgroup>` is the element that says so. ## The current content model In the HTML Living Standard, `hgroup` contains **one** heading element (`h1`–`h6`), optionally intermixed with **one or more `p` elements**. Nothing else. The `p` elements may come before or after the heading. ```html <hgroup> <h1>Northwind Coffee</h1> <p>Roasted the week you order it</p> </hgroup> ``` The heading inside is an ordinary heading at its stated rank. `hgroup` adds no rank of its own, removes none, and hides nothing. It is a grouping wrapper whose payoff is that the relationship between the title and its subtitle is expressed in markup rather than only in CSS proximity. ## The old definition, and why the difference matters This is the part interviewers probe, because the element changed meaning. In the original HTML5 definition, `hgroup` could contain **several** heading elements, and the document outline algorithm was supposed to collapse them: the highest-ranked heading became the group's heading and the rest were suppressed from the outline. That is where this very common pattern came from: ```html <!-- the old, now-invalid pattern --> <hgroup> <h1>Northwind Coffee</h1> <h2>Roasted the week you order it</h2> </hgroup> ``` Since the outline algorithm was never implemented by any browser or screen reader, no suppression ever happened. The markup above produced exactly what it says: a level-1 heading followed by a real level-2 heading whose text is a marketing tagline. Every user navigating by heading found a phantom section. When the outline algorithm was removed from the standard, `hgroup` was redefined to the single-heading-plus-paragraphs model, which is honest about what implementations actually do. So the interview-worthy statement is: **a subtitle is never a heading.** Whatever wrapper you use, the second line is a `p`. ## Alternatives, and when to use which `hgroup` is optional. All three of these are defensible: 1. **Plain heading plus paragraph, no wrapper.** Simplest, and correct. Use it when the CSS does not need a grouping hook. 2. **`hgroup` around them.** Use it when you want the relationship stated in markup and a container to style. 3. **Subtitle inside the heading**, usually as a `span`: ```html <h1>Northwind Coffee <span class="tagline">Roasted the week you order it</span></h1> ``` Option 3 has a consequence worth knowing: the subtitle text becomes part of the heading's own text, so it is announced as part of the heading and appears in a screen reader's headings list with the tagline attached. That is fine when the subtitle genuinely completes the title ("Chapter 4: The Long Winter") and unhelpful when it is decorative marketing copy that makes every list entry long. Choose based on whether a user skimming the headings list wants those extra words. ## Practical guidance - Use a heading for anything that is a section title, and a `p` for anything that is not. - Reach for `hgroup` when a title-plus-tagline pairing is real and you want it grouped; skip it otherwise, since nothing breaks without it. - Never put two headings in an `hgroup` expecting one to be suppressed — that behaviour never existed and the markup is no longer valid. - Keep the rank of the heading inside `hgroup` driven by the page's structure, exactly as it would be outside one.