Category: HTML

At times, we developers are so focused on Angular and TypeScript that we forget that even the basics, such as HTML and CSS, are always evolving. In that spirit, I’ve covered some hidden gems of HTML in the past.

For instance, I’ve seen numerous consulting clients use a specific library for fancy auto-filter or auto-complete dropdowns. While the approach works, adding too many dependencies is the number 1 reason people get stuck with an old version of Angular.

Enter datalist, a simple HTML element that auto-suggests and filters based on user input:

How’s that for a low-code, no-dependency solution? datalist works very much like a select element, using a list of options to be rendered. What connects the datalist to an input is the list attribute on the input that refers to the id of the datalist element:

And that’s it. On a side note, datalist is also compatible with many other input types, such as time or color:

This results in:

As front-end developers, we have been used to frameworks and libraries that enhance HTML, CSS, and Javascript. We adopt component libraries or individual third-party components from NPM as if participating in an all-you-can-eat buffet. However, this will break our apps in the future if we’re not careful.

In this newsletter, we’ve covered that dialogs can be created in simple HTML. Yet, many more “hidden” gems in HTML are worth knowing about. Here are a few examples:

Details and summary

The above HTML code displays the following collapsible element:

Of course, the entire thing can be customized with CSS. It’s just HTML, after all:

Abbreviations

Abbreviations are everywhere in our world, so providing accessible definitions is a must, and the abbr tag does precisely that:

Meter

What about a native fancy progress bar with different colors for different thresholds? meter does exactly that:

Always remember that HTML is excellent because, unlike third-party libraries, these elements do not increase the size of your app. Their code does not have to be packaged, downloaded, and then interpreted. You don’t have to run npm update on them. They’re free and won’t break your app.

You can see all these examples in action on Stackblitz. And for even more cool HTML/CSS tricks, check out this other post of mine: 5 new HTML/CSS features you didn’t know about.