HTML is the core technology of the web. Yet, it has changed very little in recent years. Is HTML complete? Is it neglected? What is the state of HTML?
Here are my takes…
input element and others like
select) are hard to customize. Not many UI controls have pseudo-elements that can be referenced in CSS to style. People make their own custom UI controls often.
selectmenu added to Chrome recently, it is proposed as a replacement for the
select element. They have proposals for other UI elements too.
dialog element became evergreen, the
search element was added, the
inert attribute was added, lazy loading of images and iframes through the
loading attribute has gotten wider support, and declarative shadow DOM has been implemented in some browsers.
fetch API or a similar library is used to retrieve data from a REST or GraphQL API. The frontend is binding this data to HTML.
When you look back to try to understand where we are, it is hard to extrapolate the reasons why this or that happened. I would say that probably the inability to build to a webpage composed from multiple HTML files was the biggest spur for change. It is not practical to duplicate common fragments such as the website navigation across many HTML files. In the early days, people had some sort of HTML concatenation happening on a server or in a build step. There was technologies like Common Gateway Interface that enabled running scripts. Microsoft developed their server-side language Active Server Pages to be able to write dynamic webpages (gasp). None of it was particularly pretty initially. It eventually led to the rise of PHP and WordPress on the web, which provided a better experience of creating HTML from data server-side.
The web platform’s proposal to resolve some of this in HTML was called HTML includes or something similar. It never happened. I guess the route was to permit building custom elements (native web components) in HTML instead. Native web components had a very rocky inception and did not offer a viable alternative to UI frameworks. You can read the article - A Criticism of Web Components - to get a background on the shortcomings. The platform was too stagnant in this area for too long and the solutions came from elsewhere.
I believe that native web components are more mature now and are a viable option. I am not speaking from experience. Dave Rupert has advocated for them, he writes about them in his article and talk titled HTML with Superpowers. Superpowers are welcome! In any case, it will take considerable time before there is a significant shift to native web components. As much as you may want to just use the platform, there are challenges to overcome.
The inaugural State of HTML survey was done recently. The arc of the survey seems to be that it is trying to ascertain what parts of HTML you know and use, and what parts are difficult to use. It is quite comprehensive, there are over 100 questions. The questions reiterated to me that there are always some tidbits about HTML that you do not know! There are some things that I don’t use, and some things that I may never use!
Some things I never heard of:
<input type="file" accept="video/*" capture> - Captures input from the user’s camera. That’s an interesting one!
controlslist attribute - Prevent certain controls from appearing in the toolbar of a media element e.g.
video. Nice to have the option but did not reach for it before.
input.showPicker() - Programmatically opening the picker of form controls that have one (color pickers, date inputs etc).
contenteditable="plaintext-only" - Permits editing of the element’s raw text, but not rich text formatting. I was aware of the attribute but not the value. Cool distinction but I’d always question if you should use this in the first place!
Some things I heard of but have not used:
<datalist> provides a method of providing a list of presets for a user to select in a form control, while still allowing custom options. Kind of helps with autocompletion. I never remember this one because it is not build into
New things I heard of:
Regular pain points:
details? I need to look up the caveats.
height to images to prevent Cumulative Layout Shift. Need to configure a tool to take care of this.
HTML-y things that I haven’t really used but would like to use more at some point in time:
Web development is weird. Once all you had was HTML. It was everything on the web. Now, HTML has become more of an final, output format like PDF rather than something you write a webpage in! It is like a garnish on a dish, the most visible bit on top that you consider last and regard least! Yet, still a webpage is nothing without HTML. It is a bit of paradox.
I think there are improvements that can be made to HTML that will make the web better. HTML is not complete! The first port of call for me would be to improve the experience making user interfaces with HTML. Make UI controls (
select et al) easier to style and add behaviour to. The Open UI group are advocating for adopting an industry standard definition of UI on the web. Let’s listen to them. There is some movement on this front with the experimental
selectmenu element in Chrome. Let’s crank that up!
I will be interested to see the results of the State of HTML 2023 survey.