After witnessing some awesome things CSS can do, it's time for HTML to come in the same spotlight!
It's amazing that you can do so much with just HTML.
1. Dropdown with searchable text
2. Dialog box
3. Measuring progress
Styling this is not an easy task, I agree! But there's always some workaround and it's nicely explained here - How to style progress element
4. Expand/collapse details
5. Show correct mobile keypad based on input type
6. Add a simple colour picker
7. Highlight text
8. Create a direct phone number link
Similar to email link with mailto we can also create a direct phone number link.
<a href="tel:+917272727272">+91-7272727272</a>
9. Show deletion and insertion of text
10. Edit page contents
Wish to make your own browser editor? You can do that too - How to make browser editor with html.
Note: Not all browsers have implemented these elements and attributes. But we can still use these today with progressive enhancements! 🙂
HTML is the foundation of any webpage, it's only wise to pay real good attention to it. Semantic markup not only helps in SEO but also helps in accessibility.
If you've come across any such cool thing HTML is capable of, please mention below 😀
In other news, I made a silly project : https://hp-ipsum.netlify.com
Follow me on twitter @_ananyaneogi to get more tidbits 😊
Oldest comments (135)
Nice, the
datalistis one I'll have to definitely look at. The frontend team at my job is building out a new set of components for our apps, including various dropdown/filterable elements. Same withdetails.I found this when trying to make a searchable drop-down, and it's almost perfect except I couldn't make it show all options when it first recieves focus. So annoying.
if you were trying in firefox i think there's a known issue around that. caniuse.com may have some info on that
I was thinking the same, although you'd still need some kind of JavaScript fallback for older browsers, even for the datalist one. Safari for example is supporting that since 12.1. (macOS) and 12.2. (iOS) only.
thankfully we only have to support latest FF, Chrome, and soon Edge. i'm ok with that.
Amazing tips!!
Your post always brightens me for an endless possibility. The things you did without JS amaze me.
Thank you for amazing posts. I'm in awe of the effort you put on the examples.
Thanks! I'm glad you find them useful 🙂
dialog element is amazing
Amazing things, thanks!
My goodness, I feel like a fool not knowing this before.
This article was supper helpful, thank you!
I learned about
datalist1-2 years ago and it still blows my mind. I think it comes from many horrible years of fudging it with JSGreat post
Amazing.
Help!😱 The Dropdown is chasing me!
DontUseAMac
...
Nice post, I already knew all of those except for the one about dialogues, newcomers will definitely find this useful.
Dialog only works in Chrome based browsers. Firefox doesn't support it without enabling an option.
Seems to work fine for me on 67.0.4
On mobile Safari 1,2 and 6 is not working 😕
Nothing works on safari 😂
Yeah, but given no additional Javascript it's still pretty cool.
You can make dropdowns chase you without Javascript?! Count me impressed!
🤣
Yeah, the Dropdown can do that. :P
Same here 😥
Made me smille
Bug
I have no dropdown here.
the dropdown is true surprise I see it for the first time. TIL
Weird stuff... caniuse says no FF, but MDN says it's been there since 53. Unless there's more than one meaning of dialog. They both say no IE/Edge/Safari though.
Edit... nevermind, it's behind a flag in FF, but MDN shows that as green and caniuse shows it as red. TIL.
Interestingly the demo actually works fine on Firefox without polyfills and without changing any config flags.
Great article! Thanks 😊
I didn't know about the color picker!! Wow!
Definitely didn't know about
datalist, thanks!!Some comments may only be visible to logged-in visitors. Sign in to view all comments.