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 sidebar 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 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Ā
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.)