AI Use Disclaimer:
I wrote this post and then GPT-4 fixed my grammer and spelling
With the advent of large language model-based artificial intelligence, semantic HTML is more important now than ever. At its core, the internet is used to transmit data that helps humans interact with the world as they perceive it. The freedom that HTML/CSS/JS provide is a double-edged sword because access to data has become limited. Instead of open and accessible data formats and APIs, we’re kept within the walled gardens of major technology companies that operate mass social media sites. Because of this, interoperability between these platforms is effectively impossible, further complicated by these companies’ hesitance to allow easy data porting. After all, that’s their entire product, and without it, they can’t make money. The recent instability of our social media sites has renewed interest in decentralized platforms like the “fediverse”. Both Meta’s Threads and Jack Dorsey’s (Twitter founder) Bluesky claim interoperability with the larger fediverse. This is great!
But guess what? The general population doesn’t care!
What I mean is that people are not typically motivated to adopt new social media platforms for reasons that may not be entirely clear. I’m not condemning these efforts - I believe there’s a future there, and I’m watching as the development progresses. However, I believe we’re already sitting on a tried and tested solution: HTML.
Moreover, proper tagging is extremely descriptive in a machine-readable format. This is likely a more compelling reason for adopting modern HTML than saving design time. The shift from primary data interfaces to secondary interfaces is already underway. RSS refuses to die. ChatGPT-like interfaces are likely the future of human data access. We’re going back to the beginning. Advertisers may be scared, but I’m not! Let’s start the revolution and set the world on fire with modern HTML.
Below are a few examples of UI elements I found novel or useful. No style has been applied to these beyond the browser’s built-in style. Note that because of this, these examples may look vastly different (or be completely unsupported) in various browsers. It’s well worth your time browsing the full list on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Wrap any abbreviation in this! You can apply a style to highlight them. Mostly useful for machine reading.
Is that a typeahead I see? 🧐 Doesn’t seem to have built in validation, but the UI is there at least. Note that Safari requires
option tags to be closed, or it just gives up. 😮💨
A little dropdown thing for disclosoures and stuff. Can by styled quite aggressively.
PRIVACY DISCLOSUREYou are being watched.
Know the difference!
Please, please, please, please, please label and use inputs appropriately! This is essential for mobile users as the OS will open variations of the keyboard depending on context. I have an old post on that. There is a plethora of time inputs. No more datepickers please! Check out these inputs:
Pretty much you can highlight text. By default Safari shows a yellow highlight. I like it!
Now what exactly is this cute little guy for? Safari will show it as red/yellow/green depending on parameters that can be set. You can even get fancy and set the “optimum” value. Could be very useful. Let’s get a JS demo going to make a music visualizer at 60fps!
Here’s a native HTML progress bar! If that’s not progress, I don’t know what is. Can be given a fixed value or indeterminate. On Safari, it’s blue when the window is active and grey when it’s not. By default it will follow the system’s accent color, or can be set with the
accent-color CSS property.