ericwbailey
Missing examples for a few content sectioning elements
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
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?
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.
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!
This thread resurfaced while I was working through inbox zero. Feel free to close it. Thanks! 👍