The HTML Tags They NEVER Taught You

Поділитися
Вставка
  • Опубліковано 22 лис 2024

КОМЕНТАРІ • 433

  • @giodev_
    @giodev_  3 місяці тому +190

    that was a good nap

    • @b3ll857
      @b3ll857 3 місяці тому +1

      real

    • @yuvrajmishra-ul9lu
      @yuvrajmishra-ul9lu 3 місяці тому +1

      that was really good though

    • @TalalSaghir
      @TalalSaghir 3 місяці тому

      that was cool !

    • @manjilunnobi
      @manjilunnobi 3 місяці тому

      Admin pannel or user pannel create videos nextjs with typescript
      Admin create user
      Balance transfer admin to user
      Products buy user cut balance
      MySQL/post SQL database backup or restore website full
      Time or calenders expired date products
      Time add

    • @Christobanistan
      @Christobanistan 3 місяці тому

      Comb your hair.

  • @Nametxt
    @Nametxt 3 місяці тому +713

    I can't believe I spent days making a dynamic bar graph with nothing but divs to only now find out it's a built-in tag

    • @abhinaykatta
      @abhinaykatta 3 місяці тому +15

      lol same dude

    • @InfiniteWithout
      @InfiniteWithout 3 місяці тому +2

      ?

    • @Sudheesh_P
      @Sudheesh_P 3 місяці тому +7

      Which tag is that?

    • @rokrok27
      @rokrok27 3 місяці тому +34

      I downloaded and installed full Calendar not knowing there an input type calendar

    • @iBen-jz5xz
      @iBen-jz5xz 3 місяці тому +15

      ​@@rokrok27😂
      Confession is very good for the soul.

  • @meqativ
    @meqativ 3 місяці тому +476

    cheatsheet
    1:20 - explain acronym/abbreviation
    1:58 - codeblock tag to not have to implement it yourself
    2:23 keyboard key (just makes it monospace, use css to make it look like a key)
    2:40 + reccomendations/option menu
    3:26 easy popups/modals
    3:49 + native dropdowns (no js/css)
    4:38 accessibility tag for time
    4:58 + / ruby notation, ancient typography tag
    5:31 native looking progress bar
    6:03 looks like progress bar, but changes color depending on where it falls on the treshholds
    6:53 + cool looking box

  • @mrwensveen
    @mrwensveen 3 місяці тому +67

    I'm a table-layout era survivor. I love how far html has come. There were a few gems that were new to me, so huge thanks!

    • @nfinzer22
      @nfinzer22 3 місяці тому +2

      Love it. I remember when table layout was the hot new thing because now frames were considered lame. Good times.

  • @lil_skatesskitter
    @lil_skatesskitter 3 місяці тому +129

    I hate myself for not knowing the meter tag. I almost went bald trying to make a progress bar that changes color with value. Used some tripy js with rgba and now... speechless

    • @cmyk8964
      @cmyk8964 3 місяці тому +9

      The tag is cool until you wanna style them in a way that reflects across different browser engines.

    • @peterhindes56
      @peterhindes56 3 місяці тому

      @@cmyk8964 can't you just css it?

    • @DRTSWebWorks
      @DRTSWebWorks 2 місяці тому

      Yep... we've all been there mate :D

  • @baltakatei
    @baltakatei 3 місяці тому +100

    I was expecting MySpace-era and tags.

    • @SanMaster_official
      @SanMaster_official 3 місяці тому +5

      Marquee may not be supported by modern browsers as it is not officially part of mark of language

    • @Psycandy
      @Psycandy 3 місяці тому +7

      myspace era? my current site uses marquee, it's such a kickass tag. Columns of autoscrolling links, the scroll pauses on mouseover - really cool for populating sidebars with dynamic content, no css or js, animated. Hah! I was expecting and maybe the inline and obscure things like .

    • @mrwensveen
      @mrwensveen 3 місяці тому +2

      Geocities ftw!

    • @albedesigns
      @albedesigns 3 місяці тому

      I was so excited when I re-did the Matrix numbers with a million marquee tags on my Tripod page back in '99/'00 😅

    • @codewithazam3750
      @codewithazam3750 2 місяці тому

      same

  • @nisnocky
    @nisnocky 3 місяці тому +90

    I was a little skeptical at first, but you were right, really good video

  • @SpringySpring04
    @SpringySpring04 3 місяці тому +29

    As someone learning Japanese i cannot believe Ive never heard of the Ruby tags until now. They're extremely useful for adding furigana over Kanji that I would otherwise not know how to pronounce

    • @franku5575
      @franku5575 2 місяці тому +4

      Same here, wish there were more Japanese developers that would use them in their websites, at least in those that display song lyrics and such

  • @RalfTenbrink
    @RalfTenbrink 3 місяці тому +8

    I learnt HTML more than 20 years ago. And I didn't know several of these tags. Great video.

  • @iamtharunraj
    @iamtharunraj 3 місяці тому +38

    Omg, how did I not know these tags?!
    This the first time I'm seeing the `meter` tag and it's so cool! *Well prepared video, deserves a sub for sure!*

    • @byailen
      @byailen 3 місяці тому

      Seems like someone doesn't like reading documentation....
      Please take a look at mdn web docs

  • @SARDORALOYEV
    @SARDORALOYEV Місяць тому +4

    7:18 omg bro you cheat my like button border 5 px solid red

  • @AnWe79
    @AnWe79 3 місяці тому +7

    Nice! I haven't coded a website in over a decade, and apart from code and option, I had never come across these until now.
    (Back when I was learning, the meme was "but does it work in Netscape?". Yeah, I'm old...)

  • @dermorzi_archiv
    @dermorzi_archiv 3 місяці тому +16

    Please mention the “datetime” attribute of the time tag, it makes it more useful.

  • @1414fritz
    @1414fritz 3 місяці тому +7

    7:08 you can also add the disabled attribute to any fieldset to disable all fields

  • @yerenzter
    @yerenzter 3 місяці тому +47

    Most of these are semantic tags which is best practice for SEO, even many people think it is just useless.

    • @zwatotem
      @zwatotem 3 місяці тому +4

      Clearly he doesn't understand that concept, it he puts on buttons just to make them display a tooltip.

    • @kaporos
      @kaporos 3 місяці тому +4

      ​@@zwatotemNah he was speaking about the title attribute. He noticed that it works on any tag, not only abbr

    • @fleshboundtobone
      @fleshboundtobone 3 місяці тому +2

      It's not incidentally good for SEO, lots of semantic stuff is good for accessibility which in turn is rewarded by SEO. Blind folks use the web, too.

  • @00001Htheprogrammer
    @00001Htheprogrammer 3 місяці тому +1

    The tag can have a `datetime' attribute that contains the machine-readable timestamp if the contents of that tag is not a valid timestamp.

  • @kingstonejob7840
    @kingstonejob7840 Місяць тому

    I work with CSS more often and yet I have never used the details and summary tags. Thanks a lot for bringing them to my attention

  • @cmyk8964
    @cmyk8964 3 місяці тому +7

    Important note!
    is short for “ruby PARENTHESES”! The example in the video is NOT the correct way to use it.
    Correct example:
    colonel
    (
    kernel
    )

  • @bulolo_wilber
    @bulolo_wilber Місяць тому

    The tag is 🤯, imagine all the css I'd have to write just to do something that simple

  • @eestpavel
    @eestpavel 3 місяці тому +19

    But now lets talk about styling these tags…

  • @13137713
    @13137713 3 місяці тому +2

    Wow! Thank you a ton! I really did learn a lot today. Especially details, ruby, progress tags I already have ideas on how to put them to a good use those in my current projects.

  • @Sahil.1
    @Sahil.1 3 місяці тому +5

    Drop-down was such a nightmare before this thanks man

    • @zenande699
      @zenande699 3 місяці тому +2

      Honestly still is… try styling a select

  • @Ricardo-pe4me
    @Ricardo-pe4me 3 місяці тому +1

    3:48 nahhh I once tried to do that wiht only CSS, and it took me a lot of time to even make a basic replica of that, i didnt knew it was that easy!!

  • @OJGamingYT
    @OJGamingYT 3 місяці тому +3

    Good video. I've been learning over the past year that HTML alone is pretty damn good. Usually I use a div and use JS to set the width of it so it looks like a progress bar, but little did I know that HTML + JS is so much simpler because you can just set the attribute of the meter or progress tag, instead of changing a div's width lol.

    • @itsmenatika
      @itsmenatika 3 місяці тому

      But the problem is backwards compatibility :( older browsers doesn't support these tags

    • @OJGamingYT
      @OJGamingYT 3 місяці тому +1

      @@itsmenatika they also don’t support newer js. So there’s no difference. Most sites just don’t let you load on older browsers for this reason

  • @abhinaykatta
    @abhinaykatta 3 місяці тому +8

    def deserve a sub, never seen these tags

  • @pietraderdetective8953
    @pietraderdetective8953 3 місяці тому +1

    More of these videos please!
    Anything frontend stuff: HTML and CSS tips and tricks.
    Liked and subbed!

  • @21Mayhem
    @21Mayhem 3 місяці тому +84

    1:20 the video starts

    • @_ioryy
      @_ioryy 3 місяці тому

      😂😂😂😂❤❤

    • @thedanieldiya
      @thedanieldiya 3 місяці тому

      Underrated comment!!

    • @sujalgarewal2685
      @sujalgarewal2685 3 місяці тому +3

      Thanks for saving 1 minute and 20 seconds of my life

  • @tamiko_chxn4974
    @tamiko_chxn4974 2 місяці тому

    You put so much joy when you explain it's contagious!
    Plus you won me with the CotE reference xD
    Thank you mate ^^ I just sent this to my coworker to laugh at how many things we could have done simpler with a few more HTML knowledge.

  • @Sabrecho
    @Sabrecho 3 місяці тому

    I already knew abbr, fieldset & legend... the rest was all new and appreciated. Thank you.

  • @re.liable
    @re.liable 3 місяці тому

    is very useful (for me) for disabling several for elements at once (e.g. inputs, buttons). for some reason cannot do that. and can be used outside of (as shown in the video).
    Good vid!

  • @Demmyabs
    @Demmyabs 3 місяці тому

    I like the video cause it creates familiarity with some less used tags and I do know some of these tags but the data list and option tag blew my mind

  • @clippet-hk
    @clippet-hk 3 місяці тому

    Most helpful. Thanks for sharing. I will most surely be implementing some of the things you talked about. Much appreciated.

  • @blatnick81
    @blatnick81 3 місяці тому

    Definitely learned a few things..as I am attempting to self teach myself coding

  • @wildherring9741
    @wildherring9741 3 місяці тому +1

    Thanks, dude. That was cool. Gonna use it all the time now

  • @EvilFeijoa
    @EvilFeijoa 3 місяці тому +5

    Avoid using the "title" attribute.
    It's bad for accessibility: we can't change its font-size, it does not display on touchscreen devices, screen readers don’t support access to the title attribute content.
    So it's better to use a custom tooltip and aria-attributes.

  • @Laughteragency
    @Laughteragency Місяць тому

    I don't know if one subscriber will change anything but bro I'm definitely following you.

  • @TheCoder009
    @TheCoder009 2 місяці тому

    Hey, you broke me up into fine particles. That's so cool mate. Let me learn more from you.

  • @Ninjaphil24
    @Ninjaphil24 3 місяці тому +2

    Really, really nice stuff!! Well done!

  • @nelsonrai3634
    @nelsonrai3634 2 місяці тому

    So many tags i didn't know existed. Really thanks a lot

  • @chelinchan24
    @chelinchan24 3 місяці тому

    I'm building my own design system now and your video saves a ton of my time, and prevents me from re-coding a lot of already existing features. Thanks, mate!

  • @cloudblazehuxley
    @cloudblazehuxley 2 місяці тому

    I was low-key hoping for a brush-up on image maps. Those were all the rage before Flash and the Browser Wars!

  • @IamKunalPatil
    @IamKunalPatil 3 місяці тому

    Wow! I didn't know alot of these tags besides the abbreviation and datalist tags. Thanks for such informative content! ❤

  • @MhLiMz
    @MhLiMz 3 місяці тому +1

    I only knew fieldset/legend. The rest was new to me, so thanx. However, I wasn't able to destroy the like button.

  • @nfinzer22
    @nfinzer22 3 місяці тому

    Wow fieldset and legend are the only two on here I knew because they are old school. Surprised to see them on the list, although I suppose they aren't used so much in the wild anymore. They were more popular 25+ years ago when I learned HTML.

  • @thisisdana07
    @thisisdana07 3 місяці тому

    Another tags to use in my future projects! Thanks a lot :)

  • @The_SparshGupta
    @The_SparshGupta 3 місяці тому +9

    4:05 Now that's personal 💀😂

  • @guidobuttner9083
    @guidobuttner9083 3 місяці тому +2

    Amazing! When you said "by destroying that like button", it actually flashed for half a second. Cool stuff. 😀

    • @Norsilca
      @Norsilca 3 місяці тому +1

      He's just so good with these magic tags 😉

  • @jademonass2954
    @jademonass2954 3 місяці тому

    i spent hours the other day trying to make a dynamic automatically scrolling div
    after failing repeatedly i found out about
    amazing tag 10/10

  • @crebuh
    @crebuh 3 місяці тому

    Although it was just briefly mentioned, I think the tag is super helpful, especially in terms of SEO. Maybe you could make another video for tags that are helpful for SEO friendly websites. Thanks for the great video 👏🏻

  • @strike6621
    @strike6621 3 місяці тому

    I didn’t know that any of these tags existed, this is so useful!

  • @colindante5164
    @colindante5164 3 місяці тому

    This should have a million likes!!! how could these tags ever be overlooked!!!

  • @BarDots315
    @BarDots315 3 місяці тому +6

    Damn that was much more useful than expected

  • @amalendhu8610
    @amalendhu8610 3 місяці тому +1

    details, summary, progress, meter blow my mind.
    And also I remember positioning title to the content box when legend lives

  • @RicanSamurai
    @RicanSamurai 3 місяці тому

    Nice video without much fluff. I like how much is built natively into HTML these days

  • @ajithakdev
    @ajithakdev 2 місяці тому +1

    Wow, I can't believe it! I just discovered something that completely satisfies my craving! 😵👊🔥

  • @JM7Blocks
    @JM7Blocks 3 місяці тому +2

    Didn't know the details tag. Mind blown as well. This video made my day, thank you.

    • @edgeeffect
      @edgeeffect 3 місяці тому

      Yeah, that's another one that you could end up spending hours messing around in JS to try to achieve.

  • @alzike420
    @alzike420 2 місяці тому +1

    bro these little things help us so much thanks bro💀💀💀💀💀

  • @Andrea-vb9qd
    @Andrea-vb9qd 3 місяці тому +6

    good video i love it you are my favorite youtuber

  • @TheGamer2024Short
    @TheGamer2024Short 3 місяці тому +5

    Are you okay? 4:31

  • @Leoanduri
    @Leoanduri 2 місяці тому

    I would recomend this to everybody who is working on learning html. Incredible.

  • @chess4964
    @chess4964 3 місяці тому

    useful ones : datalist, dialogue, ruby, progress, meter, progress, fieldset. Gonna start using it now lol.

  • @Felicya-tu9to
    @Felicya-tu9to 2 місяці тому

    I subscribed! Love the way you delivered it

  • @_abdul
    @_abdul 3 місяці тому

    That was Amazing and So useful to know.... Thank You so much buddy, Now I'm gonna go and Program some juicy HTML for me.

  • @msaiff322
    @msaiff322 3 місяці тому

    Awesome video, thank you. Here is an old tag that still works hello

  • @SimeonFalnyi
    @SimeonFalnyi 3 місяці тому

    I thank God that i found this video! This is solid GOLD bro!👍👍👍👍

  • @JonasBergling
    @JonasBergling 3 місяці тому

    I somehow didn't know kbd, ruby/rt/rp and meter, despite making web pages since 1995. Thanks!

  • @tech_with_froches
    @tech_with_froches Місяць тому

    Subscribed 🎉🎉
    This video is super helpful 🙏
    And super simple! Thank you 😊

  • @OrtinFargo
    @OrtinFargo 3 місяці тому +1

    5:05 did not expect Ayanokoji in my HTML video

  • @kayb.804
    @kayb.804 3 місяці тому

    Thank you. Learned much. didn't know any of these.

  • @RohitRajput-e8b
    @RohitRajput-e8b 3 місяці тому

    Damn, that's why we need to read documentations, because I mean literally no one says, my best in this video was details and summary tags

  • @lazy_coding
    @lazy_coding 3 місяці тому +1

    Awesome dude you gained sub 👏

  • @zanx8028
    @zanx8028 Місяць тому

    I don't think I knew any of these tags. Thanks for teaching me

  • @Xnight-X
    @Xnight-X 3 місяці тому

    Now this what what call good content, keep it ip 💪

  • @RAKibHasan_351
    @RAKibHasan_351 2 місяці тому

    I'm new to html & CSS and I Loved your video😊

  • @NosAltarion
    @NosAltarion 3 місяці тому

    Literally yesterday night, I was working on a database course for my students and didn't want to continuously write down the whole "base de données" (db in French) where I could just write down "db"... And was wrapping the word in a span with title and custom css... On my way to edit that

  • @㘭
    @㘭 3 місяці тому

    The loading bar is actually really useful. I have been WASTING time. Even w3schools tells me to go straight to CSS for the bars

  • @y2ksw1
    @y2ksw1 3 місяці тому

    Nice collection and a couple I didn't know about.

  • @phillmugshd9836
    @phillmugshd9836 Місяць тому

    I feel relieved... Trying to build django, but I need good html... Don't want to stress with knowing css

  • @katjaanderson769
    @katjaanderson769 3 місяці тому

    Yes, I know HTML. So why am I here? It never hurts to be sure! (Good video.)

  • @jvdplns
    @jvdplns 3 місяці тому

    This video covered an insane amount of cool stuff that I needed to know.

  • @saradhchandra6671
    @saradhchandra6671 3 місяці тому

    Great one man..! Good come back ✨✨🌟

  • @manishabairwa9340
    @manishabairwa9340 3 місяці тому +1

    this was really helpful. thankyou ♥

  • @zecchansilverlake5189
    @zecchansilverlake5189 3 місяці тому

    man, never know about datalist. subscribed.

  • @sqmridhi
    @sqmridhi 2 місяці тому +1

    2:40 thankyou for that

  • @elokthewizard
    @elokthewizard 3 місяці тому +18

    “if you don’t understand html why are you here” *proceeds to give a crash course on html*

  • @Kodjomessie
    @Kodjomessie Місяць тому

    Honestly I never knew this.
    i will be using it for my website
    Thanks alot

  • @basic_to_advance.
    @basic_to_advance. 3 місяці тому

    Thanks Buddy. It's help for all and mostly for HT.

  • @top10youtubevideos64
    @top10youtubevideos64 3 місяці тому

    Such an awesome videos without ton of information. Thanks alot. Subscribed

  • @mikeh4068
    @mikeh4068 2 місяці тому

    that was awesome bro!!!! thanks I subscribed

  • @medsmati2063
    @medsmati2063 2 місяці тому

    You're very good!👍 I did forget that these tags exist.😲

  • @_Bence
    @_Bence 3 місяці тому

    I’ve just realized that the UA-cam Like button had an effect after you said it at like 7:18

  • @leogrill5404
    @leogrill5404 3 місяці тому +1

    I started learning frontend as part of my degree last year and have often heard the HTML= Skelly and CSS=Skin/Hairstyle etc. analogy. Wouldn't JS = Muscles be more fitting, since its primarily used for movement? Then the backend could be the organs or brain in the analogy.

    • @leogrill5404
      @leogrill5404 3 місяці тому

      Then again CSS Media queries could be facial expressions or the Latissimus. Ok... maybe im getting lost in the details here🤣

  • @yillonmusk2849
    @yillonmusk2849 3 місяці тому +1

    Very informative. Very educational. Very well delivered. Please make more videos like this.

  • @pratikshinde1556
    @pratikshinde1556 2 місяці тому

    Thanks a lot dude finally I got something interesting and new in this UA-cam

  • @kaushalkishore5076
    @kaushalkishore5076 2 місяці тому

    Really learned new things, thanks ❤

  • @sagarganiga3417
    @sagarganiga3417 Місяць тому

    Lucky me who is learning front end rn thanks a lot for this

  • @takiahmed5575
    @takiahmed5575 3 місяці тому

    This video just made me cry. You're kidding me dude. I spent last 20 days learning how to use Js, so I could do this, but they exist in HTML 😭😭😭

  • @TotalImmort7l
    @TotalImmort7l 3 місяці тому

    Damn this one is really informative. I'm a backend engineer but it's good to learn something new, especially about HTML 😂

  • @ilovegsus
    @ilovegsus 2 місяці тому

    Wow...thank you, very useful stuff!

  • @DorVardy
    @DorVardy 2 місяці тому

    Damn, that wasn't a clickbait. I love it!