The HTML Tags They NEVER Taught You

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ก.ย. 2024

ความคิดเห็น • 358

  • @giodev_
    @giodev_  หลายเดือนก่อน +144

    that was a good nap

    • @b3ll857
      @b3ll857 หลายเดือนก่อน +1

      real

    • @yuvrajmishra-ul9lu
      @yuvrajmishra-ul9lu หลายเดือนก่อน +1

      that was really good though

    • @TalalSaghir
      @TalalSaghir หลายเดือนก่อน

      that was cool !

    • @manjilunnobi
      @manjilunnobi หลายเดือนก่อน

      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

    • @Renee-85o
      @Renee-85o 24 วันที่ผ่านมา

      Early

  • @clairedotpng
    @clairedotpng หลายเดือนก่อน +555

    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 หลายเดือนก่อน +11

      lol same dude

    • @InfiniteWithout
      @InfiniteWithout หลายเดือนก่อน +2

      ?

    • @Sudheesh_P
      @Sudheesh_P หลายเดือนก่อน +5

      Which tag is that?

    • @rokrok27
      @rokrok27 หลายเดือนก่อน +24

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

    • @iBen-jz5xz
      @iBen-jz5xz หลายเดือนก่อน +10

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

  • @meqativ
    @meqativ หลายเดือนก่อน +352

    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

    • @ddtgaming841
      @ddtgaming841 หลายเดือนก่อน +19

      so there are still good people on this planet 💀.. appreciate it

    • @kshitijbhatia6611
      @kshitijbhatia6611 หลายเดือนก่อน +2

      thanks

    • @rayusaki88
      @rayusaki88 หลายเดือนก่อน +2

      Thanks 🙏🏻

    • @guruware8612
      @guruware8612 28 วันที่ผ่านมา +3

      again... it's NOT

    • @colindante5164
      @colindante5164 27 วันที่ผ่านมา +1

      thanks)

  • @mrwensveen
    @mrwensveen 27 วันที่ผ่านมา +40

    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 18 วันที่ผ่านมา +1

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

  • @baltakatei
    @baltakatei หลายเดือนก่อน +86

    I was expecting MySpace-era and tags.

    • @SanMaster_official
      @SanMaster_official หลายเดือนก่อน +3

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

    • @Psycandy
      @Psycandy หลายเดือนก่อน +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 27 วันที่ผ่านมา +2

      Geocities ftw!

    • @albedesigns
      @albedesigns 19 วันที่ผ่านมา

      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 13 วันที่ผ่านมา

      same

  • @lil_skatesskitter
    @lil_skatesskitter หลายเดือนก่อน +100

    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 27 วันที่ผ่านมา +4

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

    • @peterhindes56
      @peterhindes56 23 วันที่ผ่านมา

      @@cmyk8964 can't you just css it?

    • @DRTSWebWorks
      @DRTSWebWorks 5 วันที่ผ่านมา

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

  • @artanme
    @artanme หลายเดือนก่อน +81

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

  • @SpringySpring04
    @SpringySpring04 หลายเดือนก่อน +19

    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 15 วันที่ผ่านมา

      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

  • @yerenzter
    @yerenzter หลายเดือนก่อน +42

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

    • @zwatotem
      @zwatotem หลายเดือนก่อน +3

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

    • @kaporos
      @kaporos หลายเดือนก่อน +4

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

    • @fleshboundtobone
      @fleshboundtobone 22 วันที่ผ่านมา +1

      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.

  • @iamtharunraj
    @iamtharunraj หลายเดือนก่อน +37

    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 หลายเดือนก่อน

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

  • @dermorzi_archiv
    @dermorzi_archiv หลายเดือนก่อน +13

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

  • @AnWe79
    @AnWe79 25 วันที่ผ่านมา +6

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

  • @cmyk8964
    @cmyk8964 27 วันที่ผ่านมา +5

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

  • @RalfTenbrink
    @RalfTenbrink 23 วันที่ผ่านมา +3

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

  • @00001Htheprogrammer
    @00001Htheprogrammer 18 วันที่ผ่านมา +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.

  • @EvilFeijoa
    @EvilFeijoa 24 วันที่ผ่านมา +4

    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.

  • @The_SparshGupta
    @The_SparshGupta หลายเดือนก่อน +8

    4:05 Now that's personal 💀😂

  • @eestpavel
    @eestpavel หลายเดือนก่อน +17

    But now lets talk about styling these tags…

    • @jeremiah3178
      @jeremiah3178 หลายเดือนก่อน +2

      Class attribute

  • @1414fritz
    @1414fritz หลายเดือนก่อน +7

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

  • @elokthewizard
    @elokthewizard หลายเดือนก่อน +18

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

  • @21Mayhem
    @21Mayhem หลายเดือนก่อน +81

    1:20 the video starts

    • @_ioryy
      @_ioryy หลายเดือนก่อน

      😂😂😂😂❤❤

    • @thedanieldiya
      @thedanieldiya หลายเดือนก่อน

      Underrated comment!!

    • @sujalgarewal2685
      @sujalgarewal2685 หลายเดือนก่อน +3

      Thanks for saving 1 minute and 20 seconds of my life

  • @TheGamer2024Short
    @TheGamer2024Short หลายเดือนก่อน +5

    Are you okay? 4:31

  • @pietraderdetective8953
    @pietraderdetective8953 หลายเดือนก่อน +1

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

  • @OJGamingYT
    @OJGamingYT หลายเดือนก่อน +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 หลายเดือนก่อน

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

    • @OJGamingYT
      @OJGamingYT หลายเดือนก่อน +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 หลายเดือนก่อน +8

    def deserve a sub, never seen these tags

  • @Sahil.1
    @Sahil.1 หลายเดือนก่อน +5

    Drop-down was such a nightmare before this thanks man

    • @zenande699
      @zenande699 หลายเดือนก่อน +2

      Honestly still is… try styling a select

  • @BarDots315
    @BarDots315 หลายเดือนก่อน +6

    Damn that was much more useful than expected

  • @guidobuttner9083
    @guidobuttner9083 หลายเดือนก่อน +2

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

    • @Norsilca
      @Norsilca 27 วันที่ผ่านมา +1

      He's just so good with these magic tags 😉

  • @13137713
    @13137713 หลายเดือนก่อน +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.

  • @Ninjaphil24
    @Ninjaphil24 หลายเดือนก่อน +2

    Really, really nice stuff!! Well done!

  • @alzike420
    @alzike420 8 วันที่ผ่านมา +1

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

  • @Andrea-vb9qd
    @Andrea-vb9qd หลายเดือนก่อน +6

    good video i love it you are my favorite youtuber

  • @cloudblazehuxley
    @cloudblazehuxley 11 วันที่ผ่านมา

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

  • @khalafnasirov
    @khalafnasirov 29 วันที่ผ่านมา +1

    Awesome dude you gained sub 👏

  • @thisisdana07
    @thisisdana07 17 วันที่ผ่านมา

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

  • @clippet-hk
    @clippet-hk 16 วันที่ผ่านมา

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

  • @Demmyabs
    @Demmyabs 23 วันที่ผ่านมา

    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

  • @Ricardo-pe4me
    @Ricardo-pe4me หลายเดือนก่อน +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 9 วันที่ผ่านมา

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

  • @chelinchan24
    @chelinchan24 หลายเดือนก่อน

    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!

  • @katjaanderson769
    @katjaanderson769 23 วันที่ผ่านมา

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

  • @MhLiMz
    @MhLiMz หลายเดือนก่อน +1

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

  • @user-fk4ji5sk3e
    @user-fk4ji5sk3e 26 วันที่ผ่านมา

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

  • @ajithakdev
    @ajithakdev 7 วันที่ผ่านมา +1

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

  • @wildherring9741
    @wildherring9741 หลายเดือนก่อน +1

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

  • @DorVardy
    @DorVardy 4 วันที่ผ่านมา

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

  • @OrtinFargo
    @OrtinFargo หลายเดือนก่อน +1

    5:05 did not expect Ayanokoji in my HTML video

    • @spaghettiking653
      @spaghettiking653 21 วันที่ผ่านมา

      Neither but a welcome inclusion

  • @joelyoungcbi
    @joelyoungcbi 29 วันที่ผ่านมา +16

    HTML is a language. Not a programming, but still a language. It's a language for marking up hypertext. HyperText Markup Language.

    • @kingideaofficial
      @kingideaofficial 10 วันที่ผ่านมา

      EXACTLY! It's a language that's not for programming, as programming languages have compilers, or scripting languages are interpreted or run off of another language. :)

  • @mikeh4068
    @mikeh4068 วันที่ผ่านมา

    that was awesome bro!!!! thanks I subscribed

  • @colindante5164
    @colindante5164 27 วันที่ผ่านมา

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

  • @medsmati2063
    @medsmati2063 3 วันที่ผ่านมา

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

  • @kayb.804
    @kayb.804 28 วันที่ผ่านมา

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

  • @zecchansilverlake5189
    @zecchansilverlake5189 28 วันที่ผ่านมา

    man, never know about datalist. subscribed.

  • @nfinzer22
    @nfinzer22 18 วันที่ผ่านมา

    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.

  • @RAKibHasan_351
    @RAKibHasan_351 2 วันที่ผ่านมา

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

  • @blatnick81
    @blatnick81 21 วันที่ผ่านมา

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

  • @JM7Blocks
    @JM7Blocks หลายเดือนก่อน +2

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

    • @edgeeffect
      @edgeeffect 18 วันที่ผ่านมา

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

  • @RandomGeometryDashStuff
    @RandomGeometryDashStuff 23 วันที่ผ่านมา

    05:23 browsers that ruby will show "Main text Little text Little text"

  • @IamKunalPatil
    @IamKunalPatil หลายเดือนก่อน

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

  • @re.liable
    @re.liable หลายเดือนก่อน

    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!

  • @JonasBergling
    @JonasBergling หลายเดือนก่อน

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

  • @Sabrecho
    @Sabrecho 27 วันที่ผ่านมา

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

  • @㘭
    @㘭 20 วันที่ผ่านมา

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

  • @RohitRajput-e8b
    @RohitRajput-e8b 17 วันที่ผ่านมา

    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

  • @Xnight-X
    @Xnight-X 25 วันที่ผ่านมา

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

  • @jademonass2954
    @jademonass2954 22 วันที่ผ่านมา

    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

  • @kaushalkishore5076
    @kaushalkishore5076 2 วันที่ผ่านมา

    Really learned new things, thanks ❤

  • @y2ksw1
    @y2ksw1 26 วันที่ผ่านมา

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

  • @NosAltarion
    @NosAltarion 22 วันที่ผ่านมา

    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

  • @RicanSamurai
    @RicanSamurai หลายเดือนก่อน

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

  • @pratikshinde1556
    @pratikshinde1556 5 วันที่ผ่านมา

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

  • @alexnelson1549
    @alexnelson1549 29 วันที่ผ่านมา

    You deserved my subscription

  • @simonsi1798
    @simonsi1798 หลายเดือนก่อน

    Wow, that's an amazing video!

  • @_Bence
    @_Bence 18 วันที่ผ่านมา

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

  • @shobuj_pata
    @shobuj_pata 26 วันที่ผ่านมา

    That was fun ! A lot of things I have learned🎉🎉

  • @amalendhu8610
    @amalendhu8610 หลายเดือนก่อน +1

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

  • @SeriousSnake
    @SeriousSnake 2 วันที่ผ่านมา +1

    I wish they taught me all of these things.

  • @uttamdahal858
    @uttamdahal858 หลายเดือนก่อน +2

    bruh deserve more subs 👽👽

  • @leogrill5404
    @leogrill5404 23 วันที่ผ่านมา +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 23 วันที่ผ่านมา

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

  • @crebuh
    @crebuh หลายเดือนก่อน

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

  • @yillonmusk2849
    @yillonmusk2849 หลายเดือนก่อน +1

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

  • @tommysmith5479
    @tommysmith5479 หลายเดือนก่อน

    Very cool - I need to brush up on my HTML elements; no point in re-inventing the wheel. Just one thing: are they all CSS customisable?

    • @PaulMcCannWebBuilder
      @PaulMcCannWebBuilder 25 วันที่ผ่านมา +1

      Every HTML can be styled. Some things about form elements can be tricky though.

  • @aminmahmidi1076
    @aminmahmidi1076 หลายเดือนก่อน

    That's great, I was using div for everything 😅

  • @strike6621
    @strike6621 29 วันที่ผ่านมา

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

  • @_abdul
    @_abdul หลายเดือนก่อน

    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.

  • @chess4964
    @chess4964 หลายเดือนก่อน

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

  • @jeffwrigley1781
    @jeffwrigley1781 26 วันที่ผ่านมา

    Fantastic! Thank you!

  • @fleshboundtobone
    @fleshboundtobone 22 วันที่ผ่านมา

    Devs love to make rods for their own backs. Always prefer simple HTML over JS & CSS wherever possible.

  • @mobile_genshin
    @mobile_genshin 27 วันที่ผ่านมา

    this video os excellent, thank you so much!!

  • @samiopal
    @samiopal 29 วันที่ผ่านมา

    From skeptical to surprised in 5 minutes.

  • @Zxnithh
    @Zxnithh 24 วันที่ผ่านมา

    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

  • @TheMisiekMisiek
    @TheMisiekMisiek หลายเดือนก่อน

    very useful. great job. do more.

  • @manishabairwa9340
    @manishabairwa9340 หลายเดือนก่อน +1

    this was really helpful. thankyou ♥

  • @ExtremeTeddy
    @ExtremeTeddy 28 วันที่ผ่านมา

    The more interesting question that I would put here, who of us was taught HTML? I guess most of us are either self-taught and catching up with each HTML revision or just neglecting any progress. The KBD tag was unknown to me, although I won't see it in any of my daily life websites to implement.
    I agree on that the mentioned elements are often overlooked. However except for the Dialog tag, which is fairly new, most of them exist for more than 10 years.

    • @PaulMcCannWebBuilder
      @PaulMcCannWebBuilder 25 วันที่ผ่านมา +1

      As an instructor who taught basic HTML and web dev for more than a decade, I taught everyone of these tags (although never put 'ruby' to use.) Most of these are HTML5 tags, supported for at least a decade.

  • @jvdplns
    @jvdplns หลายเดือนก่อน

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

  • @takiahmed5575
    @takiahmed5575 หลายเดือนก่อน

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

  • @legadax1716
    @legadax1716 21 วันที่ผ่านมา

    The legend tag just saved ne a shit yon of hours 😭. Thanks mate

  • @leosh9026
    @leosh9026 13 วันที่ผ่านมา

    This is actually neat :D

  • @UliTroyo
    @UliTroyo หลายเดือนก่อน

    High key love HTML. Just because it’s misused doesn’t mean it isn’t great for describing content.

  • @rayusaki88
    @rayusaki88 หลายเดือนก่อน

    Thanks for this? Very helpful tutorial. Learned something new in your tutorial