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
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
figureor just an
- Markdown blockquotes are convenient for creating “callouts”, but should some (most?) of those actually be just decorated paragraphs or even
- The sidebar is showing categories of things with headings but do those headings really need promoted to an
h2just 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
feelsbetter as a right-hand sidebar, 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
citefor 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
navand then we have a “hero” which seems like it should be a
headerbut… at what point does the “header” content become overly complex and need to be broken into another element?
- There should only be one
mainper HTML document, and all content should be contained in a
landmarkelement, but if we need to take some content out of the
headerthen what should it live in if it’s also not quite
- Those groups of marketing fluff - are those best as an
section, knowing that
sectionis not meaningfully exposed to assistive technology by default so it often might as well be a
div, and an
articleis 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
mainand call it good and worry more about things like the heading hierarchy?
- Should testimonials be in a
blockquoteor… both? (Honestly, when the heck should we even use
blockquotein general… does anyone really know? 😅)
You'll find a few opinions on each of these things (particularly
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.
(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.)