Suramya's Blog : Welcome to my crazy life…

August 14, 2023

Little known HTML UI elements that work without JavaScript/CSS

Filed under: Interesting Sites,My Thoughts,Tech Related — Suramya @ 9:24 PM

The current iteration of the Internet is extremely GUI focused and if you don’t have Javascript enabled a lot of sites just stop working even though that shouldn’t be the case because they don’t really need Javascript (JS) to be rendered. Unfortunately, thanks to the profusion of JS Frameworks more and more sites are incorporating it to the point where it is just getting silly.

A simple site that would be a few hundred KB in the old HTML/CSS world is now multi MB in size. A few days ago I encountered a site that was downloading ~95MB every time it was loaded and all the site did was display a few thousand rows in a table. I figured that out because it was taking a few mins at high load for the site to load and I was shocked to see the amount of data being transferred for no good reason.

If you ask website developers they will tell you that JS is needed because it allows them to create fancy sites with interactive controls etc, but as I recently found out, this is not the case. HTML has a bunch of UI elements that most people don’t know about that allow us to create interactive sites or generate beautiful sites. The I’m betting on HTML site has examples of many such elements that I am going to start using in my sites going forward. Some of the examples I really liked from the site:

<datalist>: The HTML Data List element

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. 😮‍💨


<details>: The Details disclosure element

A little dropdown thing for disclosoures and stuff. Can by styled quite aggressively.

PRIVACY DISCLOSURE

You are being watched.

There is a Dialog element as well, but it doesn’t work when embedded in a WP Blog post. Check out the site linked above to see it in action.

Well this is all for now. Will post more later.

– Suramya

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress