A solid example of where HTML semantics can be a little problematic:
the <meter>
element. Also a good overview of where/when this element is useful.
On when to use <meter>
:
A more tangible use case for the <meter>
element would be to indicate something like available storage space, or percentage of remaining budget on a service where your plan only allows you a certain number of events or entit
On why you should always have a text-based label when using <meter>
:
A meter is good for an at-a-glance sense of how much of something has been used, but you need to present it alongside the actual value for it to be at all useful.
On how semantics can degrade poor UX if not considered holistically:
When you're choosing the right element for the job, it's entirely possible to go too far the other way, and overuse semantic elements when actually they hinder more than they help.