How to Make Loveliness (HTML)

Robin LöffelSeptember 2021

At this year's Front Conference, I've noticed a trend which really struck a chord with me. I'm a big advocate of keeping things lean and simple. I've always kind of cringed at the idea of making widespread use of big frameworks React, Vue and especially Angular without really thinking about it — because it's „standard procedure“ today.

Sure, they're absolutely amazing tools, but is it really necessary to bulk up your blog by 300kb just because everyone and their mom's best friend are using React and Next.js? I doubt it. So when I heard all of those people that are way smarter than me talk about going back to the roots and embracing HTML and CSS, it felt like a nice, warm, reassuring hug.

One presentation especially stood out to me. „The HTML Treasure Hunt“ by the charismatic and profanity-loving Bruce Lawson. Let's talk about it.

We've Lost Our Way

Bruce Lawson begins his talk by introducing us to how he discovered the internet back in the day. „This Web shit is gonna be the future, man“, he thought to himself, after stumbling upon a multilingual forum for people with Multiple Sclerosis.

In recent years, he mentioned, we've started introducing things like fixed-width, pixel-perfect layouts and bad contrasts to the Internet. We got into Single-Page Applications, got the ability to create custom elements like autosuggests, but along the way forgot about accessibility. All of this added layer upon layer of complexity to our work, which is complicated enough as-is!

Picture a lasagna, but instead of having sauce, pasta, sauce, pasta, sauce, pasta, sauce, cheese, you now switch out some of those classics for raisins, pine nuts and peas. That's what we've done to the Internet. We now have stuff like polyfills, frameworks, state management, routing, custom components, dirty hacks for IE 11 because we still need to support it, custom accessibility, fallbacks, etc. cluttering your tasty Italian dish. Mamma mia!

My man Bruce agrees: „Know your HTML, then use React!“ Get really into semantic HTML and modern CSS, and look at JavaScript as a way to progressively enhance the experience.

The Advantage of Simplicity

Cutting down on things is hard. Ever tried minimalism? You'd think it's the easiest thing in the world to get rid of junk you don't need and live happily ever after. But shit's really difficult! Our society bows to the great Gods of marketing. We get bombarded by ads that make us want to throw our money, time and attention at them constantly.

The same goes for the frontend space. I rarely ever talk to someone and hear them say: „Dude, I just built this sweet website with only HTML, CSS and some vanilla JavaScript sprinkled on top!“ Sadly, though, because I'd really like to hear things like that!

Cutting down complexity and focusing on clean structures brings with it obvious benefits. Browsers usually have nice accessibility built-in. Screen readers can more easily scan pages and announce their contents more clearly. Search bots like Google Bot have an easier time figuring out what's actually on a given page. You have to write less code, that is also less involved. Page loads decrease. Sounds good, doesn't it?

So why don't we do it? Simply put: because it isn't considered sexy. It isn't what's modern. We've been conditioned for years on end to always jump on the next big trend, focusing on acquiring skills in this or that framework, while simultaneously losing sight of what's really important—solid and elegant fundamentals.

Robin, I Can't Just...

Now, let me stop you right there! I don't mean to tell you to phase out your beloved Vue + Nuxt tandem. That's simply not realistic most of the time. I know that, I'm not delusional. What I do mean to tell you is this, however:

Learn semantic HTML. By this, I don't mean just knowing what makes a p tag different from a span. Learn about fringe elements, like details, abbr, blockquote – they can be really helpful! Learn how to create a layout with nav, header, main, article, aside, footer and so on. Start styling those native elements instead of creating new ones yourself. This will elevate your accessibility game like crazy, has probably a positive effect on technical SEO and decreases your mental load by a tonne!
Users won't consciously notice whether they're using a custom component or not. Unconsciously, however, they will. There's studies that suggests that people have an easier time navigating around a page that's semantically sound versus on one that isn't.
Then, when you've squeezed out everything with just good old HTML and CSS, start introducing JavaScript. Want to create a slide show? Hell yeah! And since there's no native element, go ahead and slap some JavaScript magic on that bad boy! But make sure the parts that components consists of are structurally solid.
HTML, CSS and JS are not mutually exclusive. They work best together, with everyone doing what they were originally intended to do. HTML for structure, CSS for styling, JS for interactivity and the certain je ne sais quoi to top it all off. Now that's a lasagna I can get behind!

Where to Start

Bruce suggests starting out by running automated tests for low-hanging fruit. This could be as trivial as identifying missing alt tags on images or color contrasts that are too low. He recommends looking at your code base objectively and ask yourself, „do I really need <insert library here> to achieve this?“

He says to choose your libraries carefully. What do they do under the hood? Bootstrap has been around for longer than the Internet itself, has only recently ditched jQuery and still isn't semantically sound! A big recommendation goes out to the picture element, too. It allows you to serve modern browsers with WebP images, while older browsers still get JPEG and the likes. The best part? Lazy loading is already baked in!

To Bring this Rant to an End

All in all, let me just leave you with some questions and thoughts. I'm an absolute purist, but I can't deny the need for the libraries that I've villainized in the past paragraphs. They're awesome, and they pack an immense amount of advantage. But are they worth their disadvantages without actually considering them?

Are they worth the extra seconds of load time on a bad 3G network while on the train? Are they worth the worse rankings on Google because we never got around to learn how to write good markup? Are they worth the headache of trying to figure out how to mimic native browser behavior as closely as possible? And are they worth excluding a big part of our population that doesn't enjoy perfect vision?

Of course, all the points above are spoken in absolutes. But they're good food for thought. I don't think just using React per se has all of those negatives, you absolutely can write pages that don't have any of them. Feel free to write whatever you want, I ain't the police or anything. But make sure you got your fundamentals down first.

And most importantly, make sure to enjoy the lasagna you're baking.