I'm a C# dev who doesn't do too much front-end work. However, there is something about Kyle's content and delivery that is very enjoyable. He speaks so clearly and has a great approach to teaching new things.
yes and no. I found that most of the time when you need to do something you can always get the answer off google. hence why there isn't much of these but yeah i'm def' not complaining as it def' clear things up a lot faster!
Nice to see and get some love. They've been around since at least HTML 3.2. (FYI, they're sort for "subscript" and "superscript".) I really liked the tag. I think that might be just what I need for one of my projects.
Aye, Template is a neat little addition. At work we're using server-side-rendering but want to display one particular section dynamically in a way that requires ajax requests with almost regular pings to the data-endpoint for more data. Given that I need to render a bunch of HTML via JS without access to a front-end-framework it is incredibly neat to be able to write this blueprint in html first and modify from there.
@@She1lby If you added a CSS rule that applies a "display:none" rule, I believe it might. Though you should also give id's to your templates to be able to differentiate them properly of course, if you have multiple. The great part about "template" is, that it is more easily understandable. You can have a section at the end of your HTML and just by looking at the name of the tag you can understand that. With the div you'd first need to read the tag name, read the class attribute, see the CSSclass that applies display none, realize it applies a display none rule and conclude from that that it's a template, maybe. With the template tag, communicating the intent for what it's there for is just simpler.
One of the biggest things I have to say about watching this video (and other videos) is the fact that Kyle points out how the usage of these different elements affect screen readers. Thank you for being such a big advocate of Accessibility and making sure that we are experienced (or myself as a novice) Front End Developers are making sure that we consider Accessibility in our design and development more. As a side note, if you haven't already done so, it might be interesting to compile a list of these different items and how Front End Developers can use them to help in making our sites more accessible.
I'm just sitting here clawing at my arm thinking "CLOSE THAT H5 TAG FOR THE LOVE OF GOD!" But wow! I didn't know a lot of these things. Color picker is cool.
I might be mistaken but could you not just have used a normal div with a hidden parameter like . The only difference is you have to set hidden=false after you created the node.
I recently discovered the word break tag in combination with the soft hyphen "" which is fantastic when you need absolute control of where a word breaks -- with a lot of compound words like in German, this is sometimes super important. But for an easy example, if you were tight on space you could break down "cowboy" with "cowboy" so when a flex wraps it breaks thusly: cow- boy And the soft hyphen of course only inserts a hyphen when the word breaks. Modern HTML 5 is so much better than what we had to deal with in the old days, I tell ya
Actually, only one of them is necessary. is a word break opportunity, and you can do neat stuff with it in RTL text, but adding hypnenation opportunities can be done with just .
Kyle, I have 20+ years as a Web Dev... You are very talented Sir, thank you. You get to the point quickly and explain easily so I do not need to search elsewhere when refreshing materials. Thank you again.
Quick additional one for the comment section: this text is wrapped with quotes And because it's a HTML tag, it changes based off of what your localisation is.
I think you forgot about Marquee tag is used for moving text We can control marquee from the following attribute Behaviour= controles the behavior (Scroll,slide, alternative) Scrollamount controls speed (Max value is 50) Direction controls direction (Up,down,left,right)
Sub and Sup are pretty old school, learned those when I got into HTML (3.2 was the standard at that time), but the datalist is quite impressive! Wish they'd let us style form elements better
You could use a stylesheet and add a class to the form element then add an individual class attribute to each element within the form and style individually but to be honest I am only a learner so some may have a more efficient solution 😅
I use the template tag when i deal with arrays of objects. You can do a forEach loop or map over the array and for each object clone the template and set the content.
After watching this i successfully rewrote an entire component of mine using datalist and it’s so much easier to read! Thanks for always delivering awesome content.
@@ChrisAthanas o wait, mabey I HAVE to make video on things EVERY html TH-camr made something on called don't say something is wrong while you are making a mistake yourself, even tho it's a small mistake
Kinda proud I've used all of them except for datalist in the past. Once I mastered that one as well, I can finally put "HTML Programming Expert" on my resumee 😎
Dude, I love your channel! You know why? Sometimes I have something to work out. Some things we just don't know where and how to find a solution. And your channel just appear with the perfect solution. Thanks man!
I've known about all those for many years now. Back when I was starting to learn web development I went through each and every element on MDN, and all but picture were there at the time. I think and are the elements too few developers know about.
Thanks. I actually had this video recorded before even releasing the last video video, but since they did so well I already am working on a part 2 for the JS video since I had around 15 items listed originally when making the first video.
@@WebDevSimplified I figured it did well. These formats always seem to catch on. Nice when you find something that sticks. Definitely interesting and looking forward to seeing more!
Thank you! I've just picked up a 15 year old PHP medical web app that needs to be updated. Your type=time tip caught me at the exact moment I needed it. Great content! :-)
Since I work in accessibility I used these all the time including others that most developers don’t use. Because most developers use just what is needed and JavaScript. Html5 has a great bunch of features as well as the from element types. Meta tags work just like meta data and I have used them all the time when developing for Wordpress but you have to be careful of how you use them when in comes to accessibility because it can impact how the page is parsed and read. Being around development for almost 20 years there are a ton of tags I have seen or used that most developers probably has or never will use.
has some quirks when styling it. One that annoys me is min-inline-size. I've wasted my time trying to style a with overflow-x playing with wrapper divs until I read the MDN Docs to understand the default properties thoroughly.
Hi ! I just discovered your video on TH-cam. As a beginner and passionate of coding (HTML, CSS and JavaScript) I really love to see your movie and how simply you have been explaining some useful HTML tags. Like how to write the chemical formula of water (H2O) and others. Briefly how to write something with the exponentiation mark. Also learning how to create and sizing the progress button tag, creating forms with the divs and stocking data and especially the og (Open Graph) system of stocking data between the .... tag, all those learnings have been useful for me. Thank you so much. Sorry for my poor english because I am a Franco but trying to get improved in english and then be able to more understand coding. Be blessed for what you are doing and sharing your knowledges. I appreciated.
Remember that you should use FOR/ID to link the label to the form field. Explicit links will help screen readers, they aren’t that good at implying the labels from DOM position.
5 years experience working in the field. Template, is absolutely vital and so is fieldset - template is especially good for vue. Picture is nice-to-know but you can get by without it, especially in your first 5 years. Datalist is great for accessibility but obnoxious to style. I think I've seen legend (seen, not used) once, and sub is completely new to me! Now to watch the video...
omg, the algorithms are so smart!! How does it know to give me this video?!! I've literally just finished all my studies for software development and now I have to do the test which consist of 40 random multiples questions out of 120 and mainly based on front end (HTML and CSS). I don't know why HTML and CSS as I am actually more back end based on programming languages. But yeah i have no choice but to pass it anyway. i get unlimited practices where most of these came up!! I'm so glad I found videos like these but TBH front ends are definitely easier than back end. Guess you could say it's good to know both!
Template tag is really awesome. You can also create it from javascript, set the inner Html using a string and then copy the content as html. That actually allows you to create complex html elements from strings, very powerful if used alongside the new es6 string template literals!!
@@toddgilbey3979 it does work, although of course won't be the same as react components since it's not reactive. You have to clone the node children, but once you know how to use it it's not too cumbersome 🙂
That sub , sup and datalist actually could’ve saved my bacon so much times 😂😂 , amount of times I made my own tag called little for the one which goes above in h20 and used absolute to position 🤦♂️🤦♂️. Kyle honestly these are immense , cheers man 🤝
Really awesome video. But the picture tag you have to look at another time. Picture is for different images for different formats, like portrait for mobile and landscape for desktop. The img tag also supports srcSet and that is for automatic resolution switching. Like 100x200 for mobile and the same image 500x1000 for desktop.
I've never used or seen this tags before so I thought that maybe the support was quite limited or something but some of them are supported from the beginning, so I'm gonna add them to my tool set immediately
Oh the template tag is neat. I used that in a form editor where a user can create his own form by clicking it together and I basically used this exact thing u showcase, but because i didn't know about the template tag, I used regular divs with style display none ^^
Thank you a lot for this video. I have some kind of frustration about tags to use on my test pages. With all the stuff you have shown I already made something to work with/
The problem with building an HTML form is that it still needs to be submitted to some other funbctional code for processing regardless of JS or backend source (PHP / dotNET etc). HTML won't pass / process / parse or store / retrieve form data in practical application (or even securely). So, if I have to jump into JS or PHP anyway, it always seems best to simply build out a form in anything other than HTML.
I like the element use, when copied it becomes "H2O", which is fine in context. It is apparent that it is water. However, the use of to show powers; you lose the semantic information converyed by x^2 * y^4 ; it's just "x2 * y4". "x2" and "y4" are common variable names so it isn't apparent that they are supposed to be powers. Is there any way to fix this problem?
@@acidset Yes, the problem is when the text is copied. The tags are lost and it becomes just "x2*y4" . No way to tell if it is an index or power. If that bothers someone depends on what programs they use. _I_ pretty much always use text editors, the formatting is lost and so it bothers me.
Might want to add that this only works in modern browsers. If you need legacy support, for example for older phones or internet explorer (yes, plenty of people still use that, and no, it's not always their choice), you need to replicate this functionality in JavaScript and find a way to either disable the default functionality in newer browsers, or only implement your workaround in legacy browsers.
Wow, thanks for this! I’m seeing notes that some of these tags are necessary supported across browsers. A great follow-up video could be detailing what works where...or we could do it the old-fashioned way and learn trial end error 😄
I'm pretty sure all the elements listed in this video have very good browser support. You can use the site caniuse.com to check the most up to date information on this
Manually defining media queries in a picture element should be only for when the content of the image changes, and multiple sources in the srcset is for responsiveness in terms of pixels. The media query is based on css pixels but the srcset w is based on device pixels. So you can put two sources with source sets on different media queries to handle layouts, but then have each with 5 or 10+ images in them more maximum responsiveness.
I created my first website in 2001 when I was 16. Now I'm 36. I consider myself fluent in HTML, CSS, JavaScript, PHP and many frameworks/libraries. Each year I think I know everything there is about HTML and CSS and every year I go... "wait what?! That's a thing in HTML/CSS?". Then I question myself what the heck I actually learned in the past 20 years :P
I really wish they finally make / tags actually customizable and not inherited from OS design. It is just a pain in the ass to recreate a whole selection system from scratch because the default one is shit
You always learn about how to do advanced things with CSS, but you rarely learn about how to do advanced things with HTML. I didn't know you could do so much with it.
DAYUMNNN, It was just yesterday I was going aroung everywhere looking for something like this. It doesn't solve my thing entirely, But this is the best so far!! thanks!
I remember using fieldsets about 20 years ago, but I forget about them. That might be understandable though, since I'm not a web designer. Anyways thanks for reminding me about them again.
I'm a C# dev who doesn't do too much front-end work. However, there is something about Kyle's content and delivery that is very enjoyable. He speaks so clearly and has a great approach to teaching new things.
yeah same, I agree
Agreed fantastic teacher,!
sweet humble brag bro
concise, informative and to the point
Agreed, good video dude! And some interesting stuff too!
datalist blew my mind. I've been a developer for a long time and did not know this existed. thanks Kyle!
Same here. I'll be throwing out most of my js autocomplete scripts now
Ui
datalist isn't shown in most tutorials since you rely again on user input that has to be validated. select is the way to go, datalist is useless
you can't style them as you want with CSS and that's one of the main reasons it's underrated.
@@TheLegendaryShow thanks that makes sense
this man dove deep into the documentation and emerged to tell us what he found
We need a tutorial on all information on meta tags
I second this!
Yes!
yes and no. I found that most of the time when you need to do something you can always get the answer off google. hence why there isn't much of these but yeah i'm def' not complaining as it def' clear things up a lot faster!
Agreed
@@KeepLearing it's more of a clear showcase, it brings more attention and ideas to unused tags
Nice to see and get some love. They've been around since at least HTML 3.2. (FYI, they're sort for "subscript" and "superscript".) I really liked the tag. I think that might be just what I need for one of my projects.
Aye, Template is a neat little addition. At work we're using server-side-rendering but want to display one particular section dynamically in a way that requires ajax requests with almost regular pings to the data-endpoint for more data. Given that I need to render a bunch of HTML via JS without access to a front-end-framework it is incredibly neat to be able to write this blueprint in html first and modify from there.
@@isofruitfruit9357 Wouldn't it be the same with just div + id?
@@She1lby If you added a CSS rule that applies a "display:none" rule, I believe it might. Though you should also give id's to your templates to be able to differentiate them properly of course, if you have multiple. The great part about "template" is, that it is more easily understandable. You can have a section at the end of your HTML and just by looking at the name of the tag you can understand that. With the div you'd first need to read the tag name, read the class attribute, see the CSSclass that applies display none, realize it applies a display none rule and conclude from that that it's a template, maybe. With the template tag, communicating the intent for what it's there for is just simpler.
Honestly I was like, "wait, people don't know and ?"
I teached one of my friends html and sub and sup were 2 of thoae things I teached them
Good to know I’m not the only developer riddled with Webflow ads.
ikr lmfao
Lmao
One of the biggest things I have to say about watching this video (and other videos) is the fact that Kyle points out how the usage of these different elements affect screen readers. Thank you for being such a big advocate of Accessibility and making sure that we are experienced (or myself as a novice) Front End Developers are making sure that we consider Accessibility in our design and development more.
As a side note, if you haven't already done so, it might be interesting to compile a list of these different items and how Front End Developers can use them to help in making our sites more accessible.
I'm just sitting here clawing at my arm thinking "CLOSE THAT H5 TAG FOR THE LOVE OF GOD!"
But wow! I didn't know a lot of these things. Color picker is cool.
OG stands for "original gangsta" and you won't convince my brain to read those meta tags in any other way. 😂
XDD true
😂😂😂
yeah we don't mess with the original tags bruh. its like showing up to gun fight with a slinky.
@@aidanzyaire1780 damn that sounds toxic y’all should just break up
Looooooooool
If only I had known about the tag before, It could've saved me a few hundred lines of html in my Javascript code.
I might be mistaken but could you not just have used a normal div with a hidden parameter like . The only difference is you have to set hidden=false after you created the node.
fyi Vue framework use that a lot
@@KangJangkrik just noticed it. I thought it was some kind of Vue voodoo magic 🤣🤣
@@tochimclaren magic is just an unknown science :)
@@KangJangkrik lol I genuinely thought it was a vue component
Well, most of them are new, but and are basics if you started learning HTML back when CSS wasn't that widespread.
I recently discovered the word break tag in combination with the soft hyphen "" which is fantastic when you need absolute control of where a word breaks -- with a lot of compound words like in German, this is sometimes super important. But for an easy example, if you were tight on space you could break down "cowboy" with "cowboy" so when a flex wraps it breaks thusly:
cow-
boy
And the soft hyphen of course only inserts a hyphen when the word breaks.
Modern HTML 5 is so much better than what we had to deal with in the old days, I tell ya
Actually, only one of them is necessary. is a word break opportunity, and you can do neat stuff with it in RTL text, but adding hypnenation opportunities can be done with just .
Kyle, I have 20+ years as a Web Dev... You are very talented Sir, thank you. You get to the point quickly and explain easily so I do not need to search elsewhere when refreshing materials. Thank you again.
Quick additional one for the comment section:
this text is wrapped with quotes
And because it's a HTML tag, it changes based off of what your localisation is.
I've used a few times. Really useful for putting the st / nd / rd / th into 1st 2nd 3rd 4th etc. (The "superscript ordinals").
is pronounced the same as “soup” because it is short for “superscript.” Likewise, is named after subscript.
I think you forgot about
Marquee tag is used for moving text
We can control marquee from the following attribute
Behaviour= controles the behavior
(Scroll,slide, alternative)
Scrollamount controls speed
(Max value is 50)
Direction controls direction
(Up,down,left,right)
That tag was deprecated dude
😅
Sub and Sup are pretty old school, learned those when I got into HTML (3.2 was the standard at that time), but the datalist is quite impressive! Wish they'd let us style form elements better
That is exactly the reason why I don't use datalist and similar options: they are very hard to style properly and consistently.
You could use a stylesheet and add a class to the form element then add an individual class attribute to each element within the form and style individually but to be honest I am only a learner so some may have a more efficient solution 😅
I use the template tag when i deal with arrays of objects. You can do a forEach loop or map over the array and for each object clone the template and set the content.
After watching this i successfully rewrote an entire component of mine using datalist and it’s so much easier to read! Thanks for always delivering awesome content.
Btw in your template section the text you typed was this:
This is a template
Hi
But your last h5 code line wasn't with a /
html sometimes renders weirdly. Don't worry about it, man.
Just focus on the CONECPT and EXPLANATION.
Were awesome by Kyle.
There's always one... I'm checking out your tutorials HP... Oh wait you don't have any
I also noticed that!
HTML is a markup language. The syntax doesn't need to be perfect in this small example lol
@@ChrisAthanas o wait, mabey I HAVE to make video on things EVERY html TH-camr made something on called don't say something is wrong while you are making a mistake yourself, even tho it's a small mistake
The picture tag was like gold for me
Thanks for your nice work, Kyle
Kinda proud I've used all of them except for datalist in the past. Once I mastered that one as well, I can finally put "HTML Programming Expert" on my resumee 😎
I remember when I found out about the picture tag.... I was amazed on how much it saved time and make everything more clean and faster
Dude, I love your channel! You know why? Sometimes I have something to work out. Some things we just don't know where and how to find a solution. And your channel just appear with the perfect solution. Thanks man!
I've known about all those for many years now. Back when I was starting to learn web development I went through each and every element on MDN, and all but picture were there at the time.
I think and are the elements too few developers know about.
Was just about to write a comment about the details tag (`details>summary` if emmet's there), but here you did it long time ago. Greetings!
That template tag is so awesome! I am definitely going to use it in my projects!
I see the last video did great for you about what almost nobody knows. Numbers don't lie. Appreciate you Kyle. See you soon!
Thanks. I actually had this video recorded before even releasing the last video video, but since they did so well I already am working on a part 2 for the JS video since I had around 15 items listed originally when making the first video.
@@WebDevSimplified I figured it did well. These formats always seem to catch on. Nice when you find something that sticks. Definitely interesting and looking forward to seeing more!
@@WebDevSimplified why dont you have an instagram??
is another underrated tag.
I knew i wasnt hallucinating
Thank you! I've just picked up a 15 year old PHP medical web app that needs to be updated. Your type=time tip caught me at the exact moment I needed it. Great content! :-)
Since I work in accessibility I used these all the time including others that most developers don’t use. Because most developers use just what is needed and JavaScript. Html5 has a great bunch of features as well as the from element types. Meta tags work just like meta data and I have used them all the time when developing for Wordpress but you have to be careful of how you use them when in comes to accessibility because it can impact how the page is parsed and read. Being around development for almost 20 years there are a ton of tags I have seen or used that most developers probably has or never will use.
Templates are an integral of Salesforce development. Thanks for the showing how they are used outside that proprietary context!
has some quirks when styling it. One that annoys me is min-inline-size. I've wasted my time trying to style a with overflow-x playing with wrapper divs until I read the MDN Docs to understand the default properties thoroughly.
As an 18 years embedded system engineer, I find these front end tutorial fascinating since I always have trouble working with them.
Hi ! I just discovered your video on TH-cam. As a beginner and passionate of coding (HTML, CSS and JavaScript) I really love to see your movie and how simply you have been explaining some useful HTML tags. Like how to write the chemical formula of water (H2O) and others. Briefly how to write something with the exponentiation mark. Also learning how to create and sizing the progress button tag, creating forms with the divs and stocking data and especially the og (Open Graph) system of stocking data between the .... tag, all those learnings have been useful for me. Thank you so much. Sorry for my poor english because I am a Franco but trying to get improved in english and then be able to more understand coding. Be blessed for what you are doing and sharing your knowledges. I appreciated.
Datalist is exactly what I want. I was looking on mdn yesterday for this exact thing but couldn't find it. Cheers dude.
now I have the mega scene to surprise my teachers, THIS IS MEGA HELPFUL
The tag looks very promising and indeed more useful than templates in PHP or JS. Thanks for sharing!
Remember that you should use FOR/ID to link the label to the form field. Explicit links will help screen readers, they aren’t that good at implying the labels from DOM position.
this is first sited man who are fully normal person i meen not blind but u care about screen reader things thanks so much friend
My OCD cannot handle that you didn’t close off that H5 tag...
XD
I used to write xhtml and not closing his h5 was giving me migrains.
same, so I reported him
LOL same here
@Eris Socratou lol tag doesn't close
5 years experience working in the field. Template, is absolutely vital and so is fieldset - template is especially good for vue. Picture is nice-to-know but you can get by without it, especially in your first 5 years. Datalist is great for accessibility but obnoxious to style. I think I've seen legend (seen, not used) once, and sub is completely new to me! Now to watch the video...
omg, the algorithms are so smart!! How does it know to give me this video?!! I've literally just finished all my studies for software development and now I have to do the test which consist of 40 random multiples questions out of 120 and mainly based on front end (HTML and CSS). I don't know why HTML and CSS as I am actually more back end based on programming languages. But yeah i have no choice but to pass it anyway. i get unlimited practices where most of these came up!! I'm so glad I found videos like these but TBH front ends are definitely easier than back end. Guess you could say it's good to know both!
I have wasted so many hours coding the stuff for which I could have easily used html can u upload more content like these
Template tag is really awesome. You can also create it from javascript, set the inner Html using a string and then copy the content as html. That actually allows you to create complex html elements from strings, very powerful if used alongside the new es6 string template literals!!
It would be powerful if it actually worked.
@@toddgilbey3979 it does work, although of course won't be the same as react components since it's not reactive. You have to clone the node children, but once you know how to use it it's not too cumbersome 🙂
Geez Louise - you just changed my life significantly !!! Wow !!! Thaaaaaank you !!!
That sub , sup and datalist actually could’ve saved my bacon so much times 😂😂 , amount of times I made my own tag called little for the one which goes above in h20 and used absolute to position 🤦♂️🤦♂️. Kyle honestly these are immense , cheers man 🤝
Really awesome video. But the picture tag you have to look at another time. Picture is for different images for different formats, like portrait for mobile and landscape for desktop. The img tag also supports srcSet and that is for automatic resolution switching. Like 100x200 for mobile and the same image 500x1000 for desktop.
Another cool thing about the fieldset element -> if you disable it, you also disable all of its descendants
I've never used or seen this tags before so I thought that maybe the support was quite limited or something but some of them are supported from the beginning, so I'm gonna add them to my tool set immediately
Thanks, Kyle. I was under the impression that legend and fieldset were phased out with HTML5. Haven't used either in a long time.
template seems like the pure html version of a react component. Neat.
means subscript and means superscript
Now, there are 2 KYLEs ruling Web.
You were awesome as always. 😊
Thanks Kyle
This is great for accessibility! (Fieldset and Legend)
This is an excellent video! I am very happy about the existence of the "progress" element.
I knew about fieldset and legend but datalist was completely new to me. Thanks!
Turns out HTML really has some unknown tags that many are not aware. By the way, thanks for the helpful info
Oh the template tag is neat. I used that in a form editor where a user can create his own form by clicking it together and I basically used this exact thing u showcase, but because i didn't know about the template tag, I used regular divs with style display none ^^
Nice. For pictures you will need to add a lazy loading to improve your page. On chromium powered browsers you can use
Thank you a lot for this video. I have some kind of frustration about tags to use on my test pages. With all the stuff you have shown I already made something to work with/
The template tag is awesome I needed that functionality but didn't know what to use .. Thanks
The tag changed my life, ngl
I did not know about the picture and template tags, quite useful thanks!
Great video Kyle! Just came across your channel for the first time today and subscribed. What text editor are you using?
You can definitely style that option list. You can style anything.
The problem with building an HTML form is that it still needs to be submitted to some other funbctional code for processing regardless of JS or backend source (PHP / dotNET etc). HTML won't pass / process / parse or store / retrieve form data in practical application (or even securely). So, if I have to jump into JS or PHP anyway, it always seems best to simply build out a form in anything other than HTML.
Thanks for this overview! I already knew most of them, but not the datalist one. It looks very promising!
I didn't know some of these tags. Thanks very much for this tutorial.
I like the element use, when copied it becomes "H2O", which is fine in context. It is apparent that it is water.
However, the use of to show powers; you lose the semantic information converyed by x^2 * y^4 ; it's just "x2 * y4". "x2" and "y4" are common variable names so it isn't apparent that they are supposed to be powers.
Is there any way to fix this problem?
x2 * y4
or am I missing something
@@acidset Yes, the problem is when the text is copied. The tags are lost and it becomes just "x2*y4" . No way to tell if it is an index or power.
If that bothers someone depends on what programs they use. _I_ pretty much always use text editors, the formatting is lost and so it bothers me.
Use a html element instead
Actually taught this Old Dog some new tricks! very good video
I recently transformed an input box to the searchable drop-down using complex ta, html and css !
I wish I would have seen this earlier.
Might want to add that this only works in modern browsers.
If you need legacy support, for example for older phones or internet explorer (yes, plenty of people still use that, and no, it's not always their choice), you need to replicate this functionality in JavaScript and find a way to either disable the default functionality in newer browsers, or only implement your workaround in legacy browsers.
Wow, thanks for this! I’m seeing notes that some of these tags are necessary supported across browsers. A great follow-up video could be detailing what works where...or we could do it the old-fashioned way and learn trial end error 😄
I'm pretty sure all the elements listed in this video have very good browser support. You can use the site caniuse.com to check the most up to date information on this
@@WebDevSimplified thanks so much!
There is no legend tag. YOU are a legend.
This is great information, Kyle.
BTW, you didn't run an ASMR channel in a previous life did you?
Manually defining media queries in a picture element should be only for when the content of the image changes, and multiple sources in the srcset is for responsiveness in terms of pixels.
The media query is based on css pixels but the srcset w is based on device pixels.
So you can put two sources with source sets on different media queries to handle layouts, but then have each with 5 or 10+ images in them more maximum responsiveness.
I created my first website in 2001 when I was 16. Now I'm 36. I consider myself fluent in HTML, CSS, JavaScript, PHP and many frameworks/libraries. Each year I think I know everything there is about HTML and CSS and every year I go... "wait what?! That's a thing in HTML/CSS?". Then I question myself what the heck I actually learned in the past 20 years :P
I used some tag in my code but I completely understand after watched this video
Thanks Kyle
Dude.....this is great! Thanks for sharing.
Isn't the IT community the best when it's about sharing info?
Keep on uploading more such videos, This one was of immense use.
These tags seemed to be pretty useful. I will definitely try them out. Thanks Kyle ❤️
I really wish they finally make / tags actually customizable and not inherited from OS design. It is just a pain in the ass to recreate a whole selection system from scratch because the default one is shit
11:14 how you add in shortcut?
If I'm right, its Ctrl + /
Edit: I tested here and its Ctrl + ; to me
I've seen this video 3 times the last six months and I still forget those Html tags
Well done dude, awesome tricks
Dude, this is also another brilliant CSS value for images on different screen sized browsers == .max{height: auto; max-width: 100%;}
Datalist blew my mind! Thanks for this video
Please do make a comprehensive video on meta tags. I often get confused when i have to work with meta tags.
Its worth noting that you can put any html in the legend tag, i.e. an enable/disable checkbox for the the fieldset itself
You always learn about how to do advanced things with CSS, but you rarely learn about how to do advanced things with HTML. I didn't know you could do so much with it.
You can do a lot, but as you said no-one teaches people the tags, when people learn they learn enough to make a website but they don`t want to dig.
I normally use to disable the whole form whenever I hit the submit button so users can't edit any input fields in the form while in sending process
DAYUMNNN, It was just yesterday I was going aroung everywhere looking for something like this. It doesn't solve my thing entirely, But this is the best so far!! thanks!
Sorry, can you elaborate on this?
Inspired by your work and the way you explain things...
You should make an firebase + angular realtime database
Your explanation is fabulous
You forgot tag
Amazing, I will use the fieldset+ legend in the forms that I have to make in an ECM where only html is possible
I remember using fieldsets about 20 years ago, but I forget about them. That might be understandable though, since I'm not a web designer. Anyways thanks for reminding me about them again.
The template tag is usually used (or makes more sense to be used) with web components
He actually means it when he says 💯🙌
Even EMMET doesn't have suggestions for these tags. 😂😂
and probably mean subscript (below) and superscript (above)
Correct
Super useful stuff! I saved it to my reference videos :)