The HTML Tags They NEVER Taught You

Поделиться
HTML-код
  • Опубликовано: 1 фев 2025

Комментарии •

  • @giodev_
    @giodev_  6 месяцев назад +196

    that was a good nap

    • @b3ll857
      @b3ll857 6 месяцев назад +1

      real

    • @yuvrajmishra-ul9lu
      @yuvrajmishra-ul9lu 5 месяцев назад +1

      that was really good though

    • @TalalSaghir
      @TalalSaghir 5 месяцев назад

      that was cool !

    • @manjilunnobi
      @manjilunnobi 5 месяцев назад

      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 5 месяцев назад +1

      Comb your hair.

  • @clairedotpng
    @clairedotpng 6 месяцев назад +724

    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 6 месяцев назад +15

      lol same dude

    • @InfiniteWithout
      @InfiniteWithout 6 месяцев назад +2

      ?

    • @Sudheesh_P
      @Sudheesh_P 6 месяцев назад +7

      Which tag is that?

    • @rokrok27
      @rokrok27 6 месяцев назад +34

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

    • @iBen-jz5xz
      @iBen-jz5xz 5 месяцев назад +15

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

  • @meqativ
    @meqativ 5 месяцев назад +487

    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 5 месяцев назад +69

    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 5 месяцев назад +2

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

  • @baltakatei
    @baltakatei 5 месяцев назад +102

    I was expecting MySpace-era and tags.

    • @SanMaster_official
      @SanMaster_official 5 месяцев назад +6

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

    • @Psycandy
      @Psycandy 5 месяцев назад +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 5 месяцев назад +2

      Geocities ftw!

    • @albedesigns
      @albedesigns 5 месяцев назад +1

      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 5 месяцев назад

      same

  • @nisnocky
    @nisnocky 5 месяцев назад +92

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

  • @lil_skatesskitter
    @lil_skatesskitter 5 месяцев назад +133

    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 5 месяцев назад +11

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

    • @peterhindes56
      @peterhindes56 5 месяцев назад

      @@cmyk8964 can't you just css it?

    • @DRTSWebWorks
      @DRTSWebWorks 5 месяцев назад

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

  • @RalfTenbrink
    @RalfTenbrink 5 месяцев назад +10

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

  • @iamtharunraj
    @iamtharunraj 6 месяцев назад +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 5 месяцев назад

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

  • @SpringySpring04
    @SpringySpring04 5 месяцев назад +31

    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 5 месяцев назад +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

    • @Asendrys
      @Asendrys 10 дней назад

      ​@@franku5575 there are browser extensions that automatically adds the furigana over all kanjis of the page with a button, like "Furiganaize" on firefox

  • @1414fritz
    @1414fritz 5 месяцев назад +9

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

  • @00001Htheprogrammer
    @00001Htheprogrammer 5 месяцев назад +2

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

  • @yerenzter
    @yerenzter 5 месяцев назад +49

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

    • @zwatotem
      @zwatotem 5 месяцев назад +4

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

    • @kaporos
      @kaporos 5 месяцев назад +5

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

    • @fleshboundtobone
      @fleshboundtobone 5 месяцев назад +4

      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.

  • @AnWe79
    @AnWe79 5 месяцев назад +8

    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...)

  • @abhinaykatta
    @abhinaykatta 6 месяцев назад +8

    def deserve a sub, never seen these tags

  • @13137713
    @13137713 5 месяцев назад +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.

  • @dermorzi_archiv
    @dermorzi_archiv 5 месяцев назад +16

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

  • @OJGamingYT
    @OJGamingYT 5 месяцев назад +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 5 месяцев назад

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

    • @OJGamingYT
      @OJGamingYT 5 месяцев назад +2

      @@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

  • @tamiko_chxn4974
    @tamiko_chxn4974 4 месяца назад

    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.

  • @pietraderdetective8953
    @pietraderdetective8953 5 месяцев назад +1

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

  • @21Mayhem
    @21Mayhem 6 месяцев назад +84

    1:20 the video starts

    • @_ioryy
      @_ioryy 5 месяцев назад

      😂😂😂😂❤❤

    • @thedanieldiya
      @thedanieldiya 5 месяцев назад

      Underrated comment!!

    • @sujalgarewal2685
      @sujalgarewal2685 5 месяцев назад +3

      Thanks for saving 1 minute and 20 seconds of my life

  • @eestpavel
    @eestpavel 6 месяцев назад +21

    But now lets talk about styling these tags…

  • @kingstonejob7840
    @kingstonejob7840 3 месяца назад

    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

  • @chelinchan24
    @chelinchan24 5 месяцев назад

    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!

  • @Sahil.1
    @Sahil.1 6 месяцев назад +5

    Drop-down was such a nightmare before this thanks man

    • @zenande699
      @zenande699 5 месяцев назад +2

      Honestly still is… try styling a select

  • @Ninjaphil24
    @Ninjaphil24 5 месяцев назад +2

    Really, really nice stuff!! Well done!

  • @IamKunalPatil
    @IamKunalPatil 5 месяцев назад

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

  • @BarDots315
    @BarDots315 6 месяцев назад +6

    Damn that was much more useful than expected

  • @wildherring9741
    @wildherring9741 5 месяцев назад +1

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

  • @Laughteragency
    @Laughteragency 3 месяца назад

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

  • @JM7Blocks
    @JM7Blocks 5 месяцев назад +2

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

    • @edgeeffect
      @edgeeffect 5 месяцев назад

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

  • @Demmyabs
    @Demmyabs 5 месяцев назад

    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

  • @nelsonrai3634
    @nelsonrai3634 4 месяца назад

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

  • @guidobuttner9083
    @guidobuttner9083 5 месяцев назад +2

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

    • @Norsilca
      @Norsilca 5 месяцев назад +1

      He's just so good with these magic tags 😉

  • @Andrea-vb9qd
    @Andrea-vb9qd 6 месяцев назад +6

    good video i love it you are my favorite youtuber

  • @Felicya-tu9to
    @Felicya-tu9to 4 месяца назад

    I subscribed! Love the way you delivered it

  • @Sabrecho
    @Sabrecho 5 месяцев назад

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

  • @TheCoder009
    @TheCoder009 4 месяца назад

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

  • @colindante5164
    @colindante5164 5 месяцев назад

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

  • @bulolo_wilber
    @bulolo_wilber 3 месяца назад

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

  • @strike6621
    @strike6621 5 месяцев назад

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

  • @RicanSamurai
    @RicanSamurai 5 месяцев назад

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

  • @thisisdana07
    @thisisdana07 5 месяцев назад

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

  • @The_SparshGupta
    @The_SparshGupta 5 месяцев назад +9

    4:05 Now that's personal 💀😂

  • @Skengman-op
    @Skengman-op 25 дней назад

    Great video! Love your enthusiasm

  • @clippet-hk
    @clippet-hk 5 месяцев назад

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

  • @Xnight-X
    @Xnight-X 5 месяцев назад

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

  • @cmyk8964
    @cmyk8964 5 месяцев назад +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
    )

  • @_abdul
    @_abdul 5 месяцев назад

    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.

  • @amalendhu8610
    @amalendhu8610 5 месяцев назад +1

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

  • @elokthewizard
    @elokthewizard 5 месяцев назад +19

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

  • @The_Wookiee
    @The_Wookiee Месяц назад

    Only learned one thing, but it was literally the thing I needed! Thank you!

  • @mikeh4068
    @mikeh4068 4 месяца назад

    that was awesome bro!!!! thanks I subscribed

  • @jvdplns
    @jvdplns 5 месяцев назад

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

  • @lazy_coding
    @lazy_coding 5 месяцев назад +1

    Awesome dude you gained sub 👏

  • @tech_with_froches
    @tech_with_froches 3 месяца назад

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

  • @top10youtubevideos64
    @top10youtubevideos64 5 месяцев назад

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

  • @saradhchandra6671
    @saradhchandra6671 5 месяцев назад

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

  • @re.liable
    @re.liable 5 месяцев назад

    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!

  • @Ricardo-pe4me
    @Ricardo-pe4me 5 месяцев назад +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!!

  • @Leoanduri
    @Leoanduri 5 месяцев назад

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

  • @yillonmusk2849
    @yillonmusk2849 6 месяцев назад +1

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

  • @y2ksw1
    @y2ksw1 5 месяцев назад

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

  • @simonsi1798
    @simonsi1798 5 месяцев назад

    Wow, that's an amazing video!

  • @kayb.804
    @kayb.804 5 месяцев назад

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

  • @SimeonFalnyi
    @SimeonFalnyi 5 месяцев назад

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

  • @EvilFeijoa
    @EvilFeijoa 5 месяцев назад +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.

  • @manishabairwa9340
    @manishabairwa9340 6 месяцев назад +1

    this was really helpful. thankyou ♥

  • @kaushalkishore5076
    @kaushalkishore5076 4 месяца назад

    Really learned new things, thanks ❤

  • @alzike420
    @alzike420 5 месяцев назад +1

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

  • @chimdikay
    @chimdikay 2 месяца назад

    This is so helpful, thank you

  • @uttamdahal858
    @uttamdahal858 6 месяцев назад +2

    bruh deserve more subs 👽👽

  • @cloudblazehuxley
    @cloudblazehuxley 5 месяцев назад

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

  • @crebuh
    @crebuh 5 месяцев назад

    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 👏🏻

  • @MhLiMz
    @MhLiMz 5 месяцев назад +1

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

  • @medsmati2063
    @medsmati2063 4 месяца назад

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

  • @sqmridhi
    @sqmridhi 4 месяца назад +1

    2:40 thankyou for that

  • @katjaanderson769
    @katjaanderson769 5 месяцев назад

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

  • @samiopal
    @samiopal 5 месяцев назад

    From skeptical to surprised in 5 minutes.

  • @albedesigns
    @albedesigns 5 месяцев назад

    Great video!

  • @mikeploythai
    @mikeploythai 6 месяцев назад

    had no idea abt the datalist, that seems super helpful in my use cases!! thanks for sharing 😎

  • @RAKibHasan_351
    @RAKibHasan_351 4 месяца назад

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

  • @DorVardy
    @DorVardy 4 месяца назад

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

  • @ImmortalHeaven1
    @ImmortalHeaven1 5 месяцев назад

    00:01 HTML is a great intro to programming
    01:03 HTML tags like abbr and code have specific uses and benefits.
    02:06 HTML provides specific tags for styling code and keyboard keys
    03:01 Adding ID attributes and options with value attributes
    03:54 Details element tag for interactive content
    04:50 Enhance SEO with Ruby and RT tags
    05:45 HTML progress and meter tags
    06:45 HTML Tags for Visual Styling and Grouping
    - By Zxnithhh

  • @blatnick81
    @blatnick81 5 месяцев назад

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

  • @leogrill5404
    @leogrill5404 5 месяцев назад +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 5 месяцев назад

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

  • @ilovegsus
    @ilovegsus 4 месяца назад

    Wow...thank you, very useful stuff!

  • @nfinzer22
    @nfinzer22 5 месяцев назад

    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.

  • @jeffwrigley1781
    @jeffwrigley1781 5 месяцев назад

    Fantastic! Thank you!

  • @alexnelson1549
    @alexnelson1549 5 месяцев назад

    You deserved my subscription

  • @ajithakdev
    @ajithakdev 5 месяцев назад +1

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

  • @Mau5trakt
    @Mau5trakt 6 месяцев назад

    Cool content bro. Maybe you can do another video like this with css or maybe show tricks to do complicated stuff in css.

  • @howardkim6010
    @howardkim6010 5 месяцев назад +1

    So informational!

  • @zanx8028
    @zanx8028 3 месяца назад

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

  • @basic_to_advance.
    @basic_to_advance. 6 месяцев назад

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

  • @gyanranjanbarick9237
    @gyanranjanbarick9237 6 месяцев назад

    DAMN that helped a lot nice video G

  • @emreaygener
    @emreaygener 5 месяцев назад

    Amazing content 🙏🏻

  • @foxypiratecove37350
    @foxypiratecove37350 5 месяцев назад

    Idk what's the worst: these HTML Tags or the fact that I knew already most of them

  • @pratikshinde1556
    @pratikshinde1556 5 месяцев назад

    Thanks a lot dude finally I got something interesting and new in this RUclips

  • @pedrol6193
    @pedrol6193 5 месяцев назад

    Excellent video!