Missing examples for a few content sectioning elements

[janogarcia]

It would be helpful to also include a simple example for the following missing content sectioning elements:

• <address>
• <article>
• <hgroup>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning

[ericwbailey]

This is a complex one here, and I'd love to chat it out if you're willing @janogarcia.

I think there's a clear case for address, so no objections here.

article is… complicated. I honestly avoid using it a lot in my daily work, so that likely led to its lack of inclusion here.

As for hgroup. It's in the spec, but does not work as advertised. It's why I offer title/subtitle lockups as an alternative, but I don't explicitly call that out. Do you think it should be a usage note? Or something else?

[janogarcia]

As for <hgroup> I stopped using it at some point, but couldn't recall why, so I asked ChatGPT about it.

It seems it was reintroduced in 2020:

---

​The <hgroup> element has experienced a fluctuating trajectory within HTML specifications:​

• May 2009: Introduced by the WHATWG to group headings and subheadings, aiming to improve document structure semantics.
• 2013: Removed from the W3C HTML5 specification due to limited adoption and concerns over its impact on accessibility and document outlines. ​
• January 2020: Reintroduced in the W3C's HTML Review Draft, reflecting ongoing debates about its utility and implementation in web development. ​

---

The updated spec seems to be focused on pairing just a single <h1>-<h6> element with one or multiple <p> elements, which looks more aligned with the majority of your examples. That said, I'm unaware of how it compares against <header> when it comes to screen readers and other assistive technologies.

• https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup

At the very least, a note about it's omission would be helpful, for sure.

[ericwbailey]

I just pushed up a grouping section to capture the landmarks and point to good resources for further reading. Also added a note about the <hgroup> element, if this works for you!

[janogarcia]

This thread resurfaced while I was working through inbox zero. Feel free to close it. Thanks! 👍