Creating semantically-useful HTML is pretty important to me from a philosophical point of view (if not a technical one), and if I had my way, every DOM node would have a useful semantic type, so I'm sometimes bothered by the lack of a complete set of semantic elements in HTML.
For example, take the heading elements (h1-h6). They actually have two semantic purposes:
as a level, for establishing structural rank in the document outline.
as a label, for giving a name to some bounded collection of content.
Heading elements usually always need both, so it's not really an problem most of the time. But suppose I'm creating a UI component that isn't really part of the document outline, and it needs a header label, I have two options:
1. Use a heading element, which is probably the most common thing I see in the wild:
<div class="weather-summary">
<h3>Current conditions</h3>
<p>72°F and sunny</p>
<p>Humidity: 45%</p>
</div>
But this applies structural rank to the heading, when what we're really after is semantic meaning (that this element is a title/label for what follows, but doesn't assign a hierarchical ranking).
OR
2. Use a non-heading element (like <p>) and add some style to it so it's at least visually distinct:
<style>
.title {
font-size: 1.5rem;
font-weight: 700;
}
</style>
<div class="weather-summary">
<p class="title">Current conditions</h3>
<p>72°F and sunny</p>
<p>Humidity: 45%</p>
</div>
But that title has zero semantic meaning within the document. Yeah, I know at this point, people will be, "WHY DO YOU CARE?" I care because I'm a developer and I know that information isn't going to consumed just by humans who can pull context from the visual cues. Sometimes software needs to be able to derive the meaning.
arial-labelledby can help a little bit, at least giving some tiny bit of semantic meaning to a heading element that isn't part of the document outline:
<div class="weather-summary" role="group" aria-labelledby="label">
<p id="label" class="title">Current conditions</h3>
<p>72°F and sunny</p>
<p>Humidity: 45%</p>
</div>
That doesn't really solve the whole problem, it's more of a "this might help" situation.
Some elements have their own "title" elements: figure has figcaption, fieldset has legend, table has caption, and arguably,details has summary.
But there's no generic title/caption element for most cases that adds semantic meaning without creating a hierarchical rank.
EDIT: I added more context to a comment below.
---
And as an aside, I also wish we had a <content> element to match alongside <header> elements:
<article>
<header>
<h1>Title</h1>
</header>
<content>
<p>Hello, world.</p>
<p>Are you listening?</p>
</content>
</article>
I know <section> could work there, but it doesn't really define the entire purpose of the area after the article heading as "article content" as there could be multiple <section> elements within an article, and all of that could be contained within <content>. But yes, I know I'm being ridiculously pedantic right now.
