A Call for Consensus on HTML Semantics – Beragampengetahuan

HTML is supposed to be easy to learn. And sure, the basics are pretty clear, like when to use a p over an a. (But, lol, watch out for when to use a vs button)

There are several scenarios I think will plague me til the end of my webdev days, especially with a push towards components and templates that are to assume a consistent hierarchy (ha!) particularly when aiding dynamic and/or user-generated content but should also be accessible, scalable, maintainable, and provide an inclusive user experience. Woof.

Perhaps you want to build something that seems simple on the surface, like a blog. Suddenly you are faced with some gray-area scenarios, such as:

• Should the author bio photo be a figure or just an img?
• Markdown blockquotes are convenient for creating “callouts”, but should some (most?) of those actually be just decorated paragraphs or even <aside role=”note”>?
• The beragampengetahuan is showing categories of things with headings but do those headings really need promoted to an h2 just to keep the heading hierarchy in order? Or should they be a nested list structure with the “title” text styled bold? Or… is there a secret third option?
• A table of contents of the article structure feels better as a right-hand beragampengetahuan, but then it’s either more obnoxious for keyboard-only users to get to it since they may have to tab the entire article content first, or if it lives prior to the article in the DOM but visually is on the right then you break the logical tab order for sighted keyboard users. So, is it destined to be structurally and visually on the left-hand side?
• And if you do add a table of contents, how is it treated for narrow viewports? Displayed before the article as an expanded list or collapsed? Or a duplicated version if you chose to structurally place it after the article for wider viewports? Ugh… what a mess…
• How much do we need to fret about putting the published date in a time or using cite for referenced resources? What other micro elements are we forgetting that might improve someone’s experience?

Or heck, let’s back up and examine the home page, too.

• Starting out we’ve got a nav and then we have a “hero” which seems like it should be a header but… at what point does the “header” content become overly complex and need to be broken into another element?
• There should only be one main per HTML document, and all content should be contained in a landmark element, but if we need to take some content out of the header then what should it live in if it’s also not quite main? An aside? An article?
• Those groups of marketing fluff – are those best as an article or a section, knowing that section is not meaningfully exposed to assistive technology by default so it often might as well be a div, and an article is supposed to contain content that could theoretically make sense standing alone outside the context of the rest of the page. So, should we just do div after div within main and call it good and worry more about things like the heading hierarchy?
• Should testimonials be in a figure or a blockquote or… both? (Honestly, when the heck should we even use figure or blockquote in general… does anyone really know? 😅)

You’ll find a few opinions on each of these things (particularly section vs article) but my point is that it’s never clear cut and certainly not simple.

Oh look, a dashboard has entered the chat.

• lol, give up now, here there be dragons, abandon all hope, ye who enter here

(But really, start with your landmarks, and work to deeply understand your workflows, content hierarchy, and users before you simply choose an off-the-shelf component with no semantic flexibility, mmmk?)

WHO HAS THESE ANSWERS? WE’RE ALL JUST DOING OUR BEST! AND NOW WE HAVE TO DEAL WITH AI PRETENDING TO BE OMNISCIENT AND DELIVERING CONFIDENTLY WRONG ANSWERS TO MILLIONS OF DEVS OF ALL SKILL LEVELS HOW WILL WE EVER GET IT RIGHT IS HUMANITY DOOMED TO BECOME AN ABLEIST HELLSCAPE WHAT EVEN IS THE WEB.

Ahem. Pardon me.

All this to say… HTML markup is a skill that is honed in the fires of experience that may be learned but never mastered, but it is an honorable and worthy battle.

Please help.

(Also, you should hire front-of-the-front-end specialists who actually care about these nuances and accessibility specialists to help jump these hurdles and ux researchers to put in the work and find out about your real users and and and… don’t rely on AI, please. Pretty pretty please.)