Keep Simplifying Web Development with Modern HTML

If you’ve read any of my web development posts in the last twelve months, then you might’ve noticed a theme: building websites can and should be a lot simpler than it has become. These days, it’s not uncommon for even a simple landing page to be built on a complex content management system, or to pull in libraries and dependencies — all of which makes the page increasingly convoluted to build and maintain while also making it less performant for end users.

As web developers, we should want to avoid both of those scenarios. We should want to make our lives easier while giving our users the best possible experience — even if that flies in the face of much of what modern web development seems to be telling us. Fortunately, I think more and more web developers are waking up to the fact that building websites can, indeed, be a lot simpler than we realize, thanks to advances in browser capabilities as well as the ongoing development of HTML and CSS.

Last month, Ollie Williams published a post titled “Frontend complexity and the HTML renaissance” that really brought that home for me. He writes:

It feels like frontend development has become both simpler and more complex at the same time. JavaScript has swallowed the whole of frontend development, yet the newfound power of HTML and CSS has made JS entirely unnecessary for a great many tasks (lazy loading images, masonry layout, anchor positioning, scroll-driven animation…) Developers are approaching rendering simple UI components as if they were tackling a hardcore software engineering problem with the building blocks of the web increasingly abstracted into a Rube Goldberg machine.

We all understand the power of components. JavaScript-based UI component libraries can abstract away intricate markup and JavaScript, but they also introduce their own complexity, often obscuring the simplicity of HTML.

As an example, Williams highlights the “accordion,” a common UI widget often used for things like FAQ lists. The idea is simple: offer the user a list of headlines that, when clicked on, expand to show more info. Setting aside accessibility and UX concerns for the moment, it once required a bunch of CSS and JS to get an accordion to work. But as Williams notes, it’s now possible to build a simple, workable accordion using just HTML and nothing else:

Now, you could obviously spruce up that accordion’s look and feel with some CSS and JS, but the whole point is that those are no longer necessary for the basic functionality. And if you haven’t kept up on modern HTML, then you might be surprised at what else it now offers: color pickers, “switch” inputs, dialogs and modals, form validation, and more.

As Williams notes, countless libraries are simply offering re-styled versions of what’s currently possible with HTML. Which leads to at least two problems:

1. You’re now reliant upon someone else’s technology, which means that if/when they stop supporting it — GitHub is littered with the corpses of deprecated and unmaintained libraries — you might be up the creek without a paddle when, not if, something breaks.
2. Developers lose touch with the web’s basic building blocks. As Williams puts it, “Abstracting away HTML has meant there’s a whole generation of developers where basic knowledge of the most fundamental language of the web is often lacking. All because the default HTML elements are slightly too ugly and difficult to customise with CSS.”

Frankly, Williams’ post gives me a lot of hope that web developers are finally starting to realize that third-party libraries — though certainly useful for the right project or scenario — might just be a lot less necessary than we think. And the more we build with that in mind, the better off the web will be.