HTML5 is not a new thing. We have been using several features of it since the initial release(January 2008). As part of #100DaysOfCode initiative, ...
For further actions, you may consider blocking this person and/or reporting abuse
This is so cool, thanks for sharing!. I actually have one I just found out about. If you have an onclick in an HTML tag and you pass "this" as an argument to whatever function you're calling. You can use that HTML element in JS and get it's tag info / modify it, or it's parents/children. without a query selector!!!
try it here! click the button on the far right. (html view)
jsbin.com/feyuhaxivo/edit?html,js,...
Cool, thanks!
Nice! Some of those are new for me. By the way, there is a little more neat way of getting the numeric input's value -
valueAsNumber.Thanks for sharing!
Thanks Piotr!
To me, map is quite a throwback! People used them for fanciful literal "site maps" on their personal home pages.
Yes, I had to switch from <map> to <svg> to get the same results in a responsive design.
I agree. Svg is not only providing responsive design, but it is also so much more flexible! Svg is probably still the most underrated feature in web design. The only drawback is that you do not find too many advanced samples in the internet. So, if you like, have a look at my website hegel.net for a sample on how to implement an svg based „imagemap“. Search in the code for the svg tag and within it for the xlink:href code. Enjoy!
You are absolutely right! However I was not aware of it until I figured out about it.. Hence the inclusion... 😁
Thanks Katie for reading the article!
A perfect example of how knowing something to the core could save you from adding unnecessary libraries and all the effects that come with it.
That's very true Madza! Thanks for reading through and commenting!
It's cool! Bookmarked! Something knew, something new. Don't know where to use but anyway quite interesting to read.
Thank You 🙏
Thanks :) It's funny how we can do this for 40-50 hours a week plus and still miss basic features of HTML. Too much confidence in the fact that there's nothing more to learn about HTML. Got my mind churning with a couple of those.
Very true Chris.
Map is certainly not html 5 is it? It should be quite old. I also would recommend it in only the most limited of circumstances. How would it work for responsive websites? What sort of accessibility nightmare might it pose? What possible advantage can it have over simply using an svg?
I'd need to look into it but I would never use it without considering these two all important questions.
As for details. Is nice. I use it on my html resume. But the degree to which you are limited in styling it and all the browser bugs and inconsistencies with it (Was it Firefox or safari where flexbox won't work in summaries?) really limit is usefulness
I used map before 2000 so it more like HTML3.
Thanks, will check it out!
Amazing , need more of this .
Thanks for adding up my knowledge.
i realize i would have saved my time instead of adding jquery then writing code to display on click of more button , simply with details tag.
Cool, Thanks Tanvir!
The description of autofocus is incorrect. Nowhere in the specification is it written "by placing the cursor on it."
html.spec.whatwg.org/multipage/int...
If you want to explain it briefly, how about "an element is to be focused as soon as the page is loaded."
Furthermore, it would be better if there was an explanation of the behavior of the dialog element and div element.
Good one Tapas. One small feedback - Using contenteditable to make a div behave like an input is not good for accessibility.
Thanks Natraj, for reading through! Great feedback on accessibility!
I condemn the choice of font 😁
Haha.. BTW.. That font name is Chilanka! I liked that somehow 🙂
Hello, may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.
Please go ahead.. You can tweet the link once published 🙂
ok, thanks.
The suggestion below is from ChatGPT and was requested by me.
Hello, may I translate your article into Vietnamese ? I will give the original author and original source. Thanks!
Yeah sure.. You can.. Thanks!
Thanks!
THAT'S A HUGE CONTENT! I didn't know any of these tags, mindblowing!
Thank you! Very happy that it was useful!
Thank you for this list, I think you miss one "blink tag"
Blink is a text-decoration today, which no browser supports. For good reason.
Why not go with a "marquee" instead? 😁
hahaha I didn't know that
Thanks! Yeah I missed few in fact.. Shall add to the git repo as example this week.
That
<details>tags was really neat... Lifesavers.... Thanks a lot....Thanks... Glad it was useful to you.
Mhh... What's the difference between "meter" and "progress" 🤔 ?
I wasn't aware of the meter tag. Thanks
Thanks!
Oups, the html tags are hidden apparently.
I've edited my comment
Learnt a lot from this, thanks!
Thank you very much!
Very helpful. Never knew some of these tags even exist.
Thanks, Panshak!
Thank You !!
🙏
Super brilliant. Keep writing. You have a knack for it.
Thank you Alok!
Hello, the link about DevTools - My Favorite Tips and Tricks
does not work, would you like to fix it?
Hey Thanks for reporting.. I have fixed it now.. Please let me know.
date and datetime-local please for input
Nice things to remember!
Cool that you put up a netlify example website!
Link to github example in the Quick Tips of also refers to your netlify website instead of your github readme, you might want to update this?
Hey Thanks!
Changed the link.
I wanted to point to this one: github.com/atapas/notifyme#properties
I'm embarrassed to say I didn't know some of these... I definitely need to go make some stuff with them, get really comfortable and familiar with them.
Thanks!
Great post, I discover details / summary, i will clean a lot of CSS tricks of my pages now.
Nice!
Image maps!! Haha I remember making those so many years ago and it was so different!! How things change!!
Thanks for sharing!! Great list!
Thank you!
The problem with many of these is that they're not supported by IE, which means I am stuck doing things the "old" way.
Yes, that is kind of unfortunate. Which version of IE are you with? A few are supported with IE11 though. But, you are right..many are not at the same time.
That was good post. Most of them I don't know any thing about them. So thank you very much
Thank you Hassan! Glad, it was useful.
The more HTML you know the more you realize you have been reinventing the wheel using fancy frameworks
True!
Thank you, very interesting info!
Thank you!
seriously this is amazing and it would save me so much time! thank you for this!
Thank you Yosra! Glad, it was useful..
Awesome
Thank you!
Too me, it this tit useful for me, thanks share
Great, thank you!
Thank you for sharing 👍
Thank you!
thank you a good job ...
Thank you!
your information is great for beginner developers like myself thank you for keeping things easy to understand and showing complete examples!
Thank you for the great feedback, Christine! Glad, it was helpful 🙂
I didn’t realize there were so many tags I was unaware of. Great post.
Thanks Omar!
Wow, and here I am trying to do a lot of these things in JS. Who knew HTML could do so much!
Yeah true. Thanks, Tatiana!
Wow, that's a cool list of items! Thanks for sharing!
Thanks Vishnu!
Wicked!
😁
Thanks, it was great and good examples
Thanks!
Niceeee. I didn't know that autocomplete and some of these new tags are this much great, and here I use tons of libraries for getting all these. Incredible...
Thank you!
This article is simply awesome! Got to know a lot of new things :) Thanks for sharing!
Thank you Suraj!
This is quite useful. I honestly did not know most of these features exist.
Thanks Edydeyemi!
Thanks Felipe! I m glad, it was useful to you.
Just awesome 👌
Thank you! 🙏
Worth sharing.
igmguru.com/
I was aware of datalist, that's a pretty powerful one.
Wow! It's awesome. Thanks for writing this article.
You are welcome.
cool tricks we need more of this