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 😊
Latest comments (135)
Where is the kbd tag
WEB DEV SIMPLIFIED
Nice
Internet Explorer be like 😮
The only one from that list I knew was the one. Though that one does not work properly in edge. But no surprise there, really
Detail tag with open attr lacks support in browser(~50% of users)
Progress - extremely hard to style to support all browsers with animation.
Dialog - 70% of users support
Great post
One of the best articles I have read!
Omggamer
Cool!
And 👏👏👏👏 for hp-ipsum!
This is very interesting. I can do some implementations of these with animations using a smart combination of HTML inputs combined with CSS. I think HTML/CSS can still go beyond, there are things for which JS was not necessary anymore and yet it's the norm.
Good article :D
Thank you
Nice article! I think, that it misses an important technique, that uses checkboxes and :checked selector to approximate interactive elements.
Checkboxes and radio buttons can be used to create tabs, expandable areas, dialogs and other complex interactive controls without using Javascript. They are a lot more flexible and have better cross-browser compatibility than "dialog" and "summary".
❤ Thank you. Did not know about
Your 'silly project' can come in handy if you want an alternative to the regular ipsum text that's so common. It's still worthy of a bookmark, though. :)
Makes entering time values consistent and also easier on mobile.
I built a polyfill for it as well so that there is no reason not to use it 😁
dan503.github.io/time-input-polyfill/
Some comments may only be visible to logged-in visitors. Sign in to view all comments.