Obscure HTML elements that almost no one uses (but should!)

[@codeman99-dev]

Important note about The purpose of this element is to allow the author to reference back to the definition later with an anchor tag.

[@태평-m1w]

good point

[@MKRCodes]

Something to note: the title attribute works on every HTML element and creates a tooltip with the value.

[@dancarter6044]

Old trick of the trade.

[@SebastianZartner]

This video deserves a second or even third part as there are many more HTML elements people may not know about, e.g. , , , , , and .

[@memoryleakerz]

youre genius, the base tag is hella useful my friend. thank you! ♥

[@igordasunddas3377]

I would like to see these compared on what is usually done to replace the functionality.

[@rentokawaii1216]

isnt that obscure, you gona often use it when using css framework like bootstrap

[@_erayerdin]

If you are writing a blog post about coding, is also very useful. It styles element like keyboard buttons. Add that one too.

[@RyanGrissett]

I just used an hour ago, it doesn't feel very obscure. The figure tag is cool though, I'm gonna use that one when I have a chance.

[@BenRangel]

I love the readability that unusual tags bring, just by standing out from the crowd of divs. I think many devs are too scared to use them because they feel "if I change one thing does that mean I have to change it all to be consistent" Answer is no - in fact the greatest benefit is when you use these rarely. My site just uses for article pubDates and that's fine, overall makes looking through the article html a bit easier.

[@chewcodes]

Another interesting tag is , if you set a base anchor just like an tag, such as it'll use that for the base of all anchor tags, instead of using the browser URL. This helps me a lot when I have a sidebar that's based on URL but I go to a page too deep, so I set the base URL to be sane so the sidebar functions like normal.

[@KevinPowell]

Oh yes, that's a good one! I should include it in the next video I do like this, thanks for mentioning it!

[@AbdicateDotNet]

P.S. Even the closed caption has you saying "Hello my friend and friends" instead of "front-end friends". 😱😂

[@KevinPowell]

Oh no, lol

[@TheBjornar97]

Wait what? I always thought he said "friend and friends" and never understood it XD. I had to close my eyes and listen carefully to hear it was "front-end friends". That makes a lot more sense 😅

[@gesucristo9763]

The what, friend and friends doesn’t have really sense but for some reason I’m not the only one earring it until now

[@user-ms8ei9le7x]

:))))))) i`m bad speak english , ..... :)))))

[@n_mckean]

I've known it is "front end friends" for ages but still hear "friend and friends". It seems like Kevin is actively trying to better articulate it lately, but it does still come through unclear.

[@nicejungle]

is definitely useful when you print date/time with some "duration ago" for example : Posted 2 days ago I didn't know about , thanks for the tip

[@TheElkster]

That is a really helpful comment as I often write articles that include "last year we..." and "we've been going for a few years now..." so that would be a place I can now use the element! 😊

[@n_mckean]

The insight here is that HTML is a language (hence the L) and so just like any language, things have meaning. If you use things incorrectly, people might still understand what you are trying to say eventually, but it makes it harder to communicate. To me, learning the meaning of elements of HTML is no less important of learning how to construct a sentence in Spanish or any other language.

[@marklnz]

You're going to start a war by saying that lol. Personally I think of it as a SYNTAX rather than a language per se. But that's largely just semantics, and I'm just considering things from the point of view of *programming*. Regardless, you're right - these elements are there to impart specific meanings and people should use them.

[@n_mckean]

@@marklnz Nobody needs any more wars, so let's call it a metaphor at worst :)

[@gabiold]

@@marklnz Every lamguage is syntax AND semantics coupled together.

[@IshCaudron]

@@marklnz I don't think he said programming language anywhere, so no war.

[@TheNewton]

Deeper insight is that developer tooling for HTML is subpar in not being able to hint at something different when divitis starts happening. Super weird when you consider how easily spellcheck is being upgraded to grammar-suggest everywhere now but the baseline creators of the internet content have no similar system for what actually marks up content itself. Developers shouldn't have to wait for an after action report to come from marketing about how the SEO could be improved with semantic markup. Worse even something like github copilot cannot address this because it's such a low level problem that most of it's samples are polluted.

[@PeppertopComics]

I often use the element with some JS to pull out the value of the datetime attribute when the page loads, format it to the user's locale, and replace the content of the element with the localised version. Not so useful in a paragraph of text, per the example in the video, but good if you're using dates and times as pure data in something like a table or on the axes of a chart.

[@zachjensz]

I was trying to use a element yesterday and it was so hard to style that I ended up just using a div. It's great when they are simple to style like these ones.

[@Technoph1le]

How is it possible for you write a day ago?

[@jasper5945]

@@Technoph1le different timezones

[@buddingromance]

@@Technoph1le time traveling

[@LBlendYT]

commented while the video was unlisted

[@gabydewilde]

Yeah, the defaults are so sad at times.

[@jtcreates5120]

Finally, someone is bringing these elements into the light. The use of divs and spans is just unnecessary high.

[@rhebucks_zh]

it's like saying in english "thing that is/thing with {properties}" instead of the word

[@0ZeldaFreak]

Things like datetime and abbreviation makes sense with automation. With abbreviation it makes sense when in your editor, it will detect an existing abbreviation from your list and will add it automatically, so you don't need to think about it. With datetime, it makes a ton of sense with timezones. In general with units, that makes a ton of sense. When I would write stuff, I would use Celsius for temperature. It makes sense for me and I understand Celsius, so it makes sense for me to write temperature in Celsius. But there are people where Fahrenheit is more natural to them and when reading, it makes sense that they understand it. When I say 19°C is my preferred room temperature, not everyone knows how to fell about that. When they know its 66.2°F, they understand it. Sure sometimes the number is more important. Someone else might say 69°F is there preferred temperature. Well the number speaks for itself but knowing that its 20.6°C is also important, to understand its still a somewhat normal temperature. Nobody wants to deal with such stuff manually. No one wants to check the conversion themselves and when writing, no one wants to do it manually. Timezones are even more important. Sure there are information that only make sense in the current timezone. When I say the party at my house starts at 5pm, Timezones aren't important. When I say my new song drops at 5pm EST, someone in Europe want to know the time for them. They can look up what EST is and see its UTC -5. They know they are at UTC +1 and then can add 6 hours. There are 2 steps involved, knowing what EST means in UTC and then doing the math. When you need to deal with Daylightsavings, it gets a bit more tricky.

[@CreaZyp154]

A lot of these elements can be reproduced with CSS, but it is important to use them for both SEO, and accessibility (like screen readers)

[@n_mckean]

is very underused and has accessibility benefits. A screen-reader could pronounce WHO as "Who", when you want it to announce World Health Organisation. Equally you would want to hear "pound", not "lub" (lb,)

[@erikjansson1790]

Adding to the accessibility aspect: sadly ”title” only helps mouse/touch-users.

[@n_mckean]

@@erikjansson1790 Nice add. Title isn't universally supported by screen-readers either, but its the intention that counts.

[@erikjansson1790]

@@n_mckean indeed! Perhaps we should contribute with a better solution while we’re at it? 😅 If I use an abbreviation I know some readers don’t know, I always write it out in the text. That way no interaction is needed. I still use to get the correct pronunciation. If I wanted to create a keyboard accessible title-like solution I guess I would make the abbr a tab target? What’s your approach?

[@diablo.the.cheater]

@@erikjansson1790 It would be nice to be able to define the abreviations in the header, with something like Cascading StyleSheet And then when you want to add the definition just put the word in the for inside the tag CSS If you want the data to be diferent from the text then css So that you only need to define the meaning of the abbreviation once in the header, and then if you do not write nothing, it will search the text in abbr in the data in the header, while if you put for it will use that to search

[@o156GTA]

I don't get the element. What's the difference with just using ?

[@robertcarsten4050]

An em element is for emphasizing the content text Such as "we need to get out of here now! While a dfn is for indicating the text content is a term being defined Such as " Calling something a Godzilla would indicate that it is a particularly enormous example of something"

[@n_mckean]

They look the same to a sighted user (both italic) but then so does . The difference is semantic. is used to show you are definiting something, is used to apply emphasis to an area of text. With emphasis, a screen-reader will read the text more forcefullly, with emphasis.

[@toma1610]

Is it better to use the element instead of the and of the definition lists?

[@HarryPujols]

The abbr tag is useful when you have a text overflow ellipsis in table cells.

[@gabydewilde]

I use for that. It looks even more spectacular if you nest them out of sync for overflow x and y. I like keep people in the holy trinity of "is this guy brilliant, an idiot or am I being trolled?"

[@gg-gn3re]

yea but abbr doesn't work on phones, which is why nobody uses it

[@truvc]

Using mark, time, etc is also very valuable for accessibility, which not enough people pay attention to. Thinking empathically is important with design. You need to consider everyone - not just people like yourself.

[@sarahwbs]

@TheExplorer I think you should try explaining to your boss that they can be sued for not making their content accessible to all users. Also, more accessible content is more search engine friendly content - maybe you can sell it as SEO.

[@erickbonk]

@TheExplorer if you think these elements are a waste of time then maybe you write really slowly, try to use emmet more often it really isn't more than a couple seconds to write 1 extra tag, besides that, like Sarah said: at this point there's thousands of lawsuits being filed because of poor a11y in websites and the trend is going up, plus I'm sure we'll see more laws about it in the future. Making sure your website is accessible is not a waste of time or useless, that's alienating like 15% of the population according to WHO.

[@nathanhedglin931]

@@sarahwbs "can", they only care "when" they get sued. I've been on a project to make ADA updates where the client was already getting sued.

[@ShiaMajer]

I really like the tutorials you made, simple to understand and no bias in the middle. Subbed!

[@adambright5416]

I love them and hate them at the same time. I love tags like these cuz they have purpose, they solve problems. I hate them cuz most of them awfully looking by default and stupid (some have built-in accessibility perks, but it's not the point). Some tags are not customisable at all, or it's PItA to do, some just don't fit in your design, no matter how you play with them, plus you can have whatever tag fits you and it will work, just provide CSS and JS, so... output? dfn? mark? abbr? I believe the only reason for them to exist is global spec, so any external tool like search engine, narrator, etc. can understand your complicated markup, but judging by how rarely I see any of those used...

[@skoapiee]

Exactly this!! And search engines like google are build around people stupidiness, so they know when is what etc. A simple wysiwyg editor with these functionalities won't give u 1000+ points on google for these obscure elements....

[@KevinPowell]

It's not about SEO, it's about tools like narrator, like you said. It's important that people (not bots) who visit your site are able to actually navigate it and understand the content. And that's from screen readers to others who navigate by keyboard only and use other tools. It's all about user experience. Those accessibility perks are a big win, and all of these are very easy to style. The only elements that are a real nightmare to style are form related stuff, and there is some *very* slow progress going on there.

[@gg-gn3re]

more useful than all of those.. rarer than some of them. It's pretty crazy how many there are these days

[@anb1142]

main thing time tag is used is in emails, google automagically adds things to calendar

[@textual]

slightly off-topic, i thought youve been sayig 'hello my friend and friends' for like 3 years. You're saying 'Hello my front-end friends...'?!!?! makes so much more sense!

[@dougc84]

I would love for you to talk about definition lists a bit. They're highly underrated, but I also don't know enough about proper use cases either.

[@BenRangel]

3:50 for article pub date wouldn't all serious article pages have a date meta tag for handling SEO? Isn't the time tag attributes more for screen readers etc?

[@gabydewilde]

Articles not just appear alone on article pages.

[@BenRangel]

@@gabydewilde Good point 👌

[@AaronWeissRocks]

I've been using the and elements successfully getting rich snippet and meta descriptions pulls in SERPs.

[@garvani]

I would really like to see a good solution for for mobile devices which don't have mouseover

[@erickbonk]

honestly the best solution would be to just explain the abbreviation with text, not only is not mobile friendly but also not keyboard friendly, if users can't use the mouse they won't be able to focus that abbr. So just use text otherwise you'd have to have all these things in mind and seems like too much work that can be dealt with simply by adding some more text.

[@eccenux]

You could setup onclick for mobile to show the tooltip. I'm kind of surprised this is not default in mobile browsers.

[@jpisello]

@@eccenux In at least some mobile browsers, it is the default, although I think it's actually actuated by a long press. The problem with that is that your finger might be covering the tooltip so you don't know it's there until you move your finger away.

[@eccenux]

@@jpisello long press is for selecting text in all browser I tried. No browser seem to show the tooltip. I tried Chrome, Firefox and Samsung mobile browsers.

[@loic.bertrand]

Today I used the tag for toast notifications and for error messages on form fields :)

[@alexmelnytskyy4356]

He is the best, I use his tricks all the time

[@kevincrinklaw7422]

Anyone else just like listening to Kevin's voice? Thanks for what you do, friend! Hope you are well!!!

[@alubhau]

you can use the mark element for certain parts of headlines too to make that part pop more

[@dailymeow3283]

The one is usefull

[@GuillermoRetamar]

Very useful. I always learn something from you, even if I only have 2 or 3 minutes. So, thanks.

[@manytrickpony695]

Yet again pleased to learn from you. For="multiple ids". Like using multiple classes for an element is good to know.

[@pablom2274]

awesome thanks for this class, i took notes from this.

[@arpitbharti6245]

my favourite elements are dl, dt, dd, you don't see them often

[@jpisello]

I also love the definition list, and I think it's criminally underused. Definitely useful when you have a "list" of "labelled" things. And now that the HTML spec allows wrapping individual pairs (or, I guess, any number of s) with a , you can effectively lay them out using grid or flexbox.

[@ZipplyZane]

You can't directly style tooltips, but you can use Javascript libraries to make tooltips, and they work fine on these types of elements. The JavaScript can even read the title attribute, if you want, though you must also use a workaround to suppress the normal tooltip. I'm not sure why tooltips can't be directly styled. Not even at the OS level, at least in Windows. They've been locked to a specific font size. At least Firefox (back in the day, at least) was smart enough not to use the OS tooltips, so they could scale with accessibility options.

[@hjetwd]

CSS is Cascading Style Sheets - wrong CSS is Cascading Style Sheets - right right and wrong - my personal opinion, the specification may not agree with me =)))) abbr - abbreviation of the phrase (HTML, JS, CSS, SASS, FBI, KGB, etc.) dfn - definition, an established phrase without an abbreviation, i.e., dfn can be the title of an abbreviation, but not the contents of the abbr p/s/ thanks Kevin, this is the first time in my life I see the tag =)) "live for a century - learn for a century" @ proverb

[@VicTipsTM]

Hi Kevin, what program do you use to edit your videos?

[@KevinPowell]

I use Premiere, but only because I already use a lot of the Adobe apps. I know a lot of YTers who use Davinci Resolve, which is free :)

[@callumwheatley5865]

For the abbr tag if you want custom tooltips best way to make them is by scratch using HTML CSS and JavaScript. I have an example if anyone wants one

[@tzisorey]

Bring us the glory of and !!!

[@overlordprincekhan]

0:05 Facx... that's so true

[@kamertonaudiophileplayer847]

I use abbr sometimes, others will start using after your video.

[@robinleee1799]

Good day sir! Can you give some recommendations of font styles that are good to use in system/website? 😊

[@pratikkore7947]

DTML : Div Tree Markup Lang

[@laurensverhoeven2084]

[@seanmills3502]

The BLINK tag should make a comeback.

[@m4rt_]

HTML is easy, its just when you have to combine it with other things such as CSS and JS, it becomes more complicated if you try to do it optimally, and optimize SEO.

[@MatthewWeiler1984]

Off topic, but also being in the GTA, where do you get your CO2 for homebrewing? I was just watching your video and when you said that you're a homebrewer, it got me thinking.

[@KevinPowell]

I'm on the south shore of Montreal, so sorry I can't help for Toronto! (also, very late reply, sorry 😅)

[@MatthewWeiler1984]

@@KevinPowell no worries, thanks for the reply.

[@WrittenInFilm]

You really shouldn’t go crazy using super unused elements, it can create confusion for other developers who will read your code later and has a much higher chance of needing refactoring in the future due to depreciation or changes. They aren’t used that often for a reason most of the time.

[@KevinPowell]

There is a big difference between unused elements, and underused elements. When elements have semantic meaning, they often should be used, rather than simply using divs, spans, or i and b tags. They aren't often used because people don't know about them, not because they're the wrong thing to use.

[@WrittenInFilm]

​@@KevinPowell The problem with "underused" elements, regardless of how good their purpose is, is that there is a natural resistance of support as ecosystems grow that cater to those who use it, because why would developers waste time supporting unpopular features in the long run. If people arent using a feature, its 99% of the time not that important, and likely wont have the attention they need over time, this not only dramtically decreases your codes lifespan and increases it's maintenance cost, but its also bad practice in terms of future devs who manage the code later not knowing what they're even for. Elements that are used for important semantic purposes arent in the category of "under used elements" because most of these are heavily used.

[@HerrTimsn]

so this is totally unhelpful but i accidentally had the video on 0.75 speed and thought wow Kevin is sooo drunk

[@commelinales]

dfn seems useless to me, I would definitely choose instead.

[@KevinPowell]

But why? is for idiomatic text (they changed it from the old itatlic). . We should use elements for what they're made for, and not because it's a few less keystrokes. They carry meaning, which gets conveyed in different ways depending on how someone is visiting your site. People use screen readers and other accessibility tools.

[@chrisd848]

Awesome stuff Kevin!

[@le9038]

>>knows very little about HTML. >>finds video >>Get's very interested in something i know nothing about Yes...

[@Technoph1le]

Hi, Kevin Powell. Can you also show steps on how you created your website? Like, all root variables and layout and design and e.t.c. I would really appreciate it

[@berndtsoderstrom4664]

"Millimeter" is the US spelling. The rest of the English-speaking world uses the spelling "millimetre".

[@cooperised]

And given that the US is one of the few countries not to use millimetres, it follows that their spelling is irrelevant. :-)

[@KevinPowell]

In Canada we tend to do the "er" version of the ending of words, over "re", even though both are accepted here. It's one of the few things that's snuck in. We still use 's' over 'z' in a lot of words, and of course, colour 🙂

[@cooperised]

@@KevinPowell Things that have snuck in along with "snuck", right? :-) Over here it would be "sneaked" (though "snuck" is gaining popularity among The Youth!).

[@connorallen162]

I kinda miss when he said "front end friends" faster, and it sounded like "hello my friend and friends" and I got to feel like "friend" singular was referring to me haha

[@nro337]

Really cool!

[@hirenrathod9817]

im big fan ...kevin thank for everthing sharing with us giving new idea's and all info.

[@Epinardscaramel]

I used to use ! But I haven’t created sites in a while

[@user-ms8ei9le7x]

< abbr title="Thank

[@hjetwd]

">😂 u forgot

[@user-ms8ei9le7x]

@@hjetwd no

[@stillonov]

Thank you, Kevin, for useful video.

[@KangJangkrik]

They're obscure because most programmers want browser to show an app, not document. I did tried to re-design HTML to be "designed for creating app" back then, but I feels that not going to work as I'm not one of browser dev

[@rhebucks_zh]

can a web app use these obscure elements or does it have to only be divs?

[@KangJangkrik]

@@rhebucks_zh yeah, but these obscure elements means nothing to customer and SEO if the app is really app (not a blog or wiki). That's why most web app devs still use divs only

[@diablo.the.cheater]

@@rhebucks_zh WebApps just do not benefit from using those elements because WebApps are complex enough for screen readers to get confused anyway even if you use them, so there is little to be gained from using them in webapps. But for webpages they should be used as they make the page redeable for screenreaders for blind people. Using them in webapps is just not as useful because even if you use them, webapps will still be mostly unussable for blind people. There are some other edge cases apart from blind people, for example gmail uses the tag in emails to create google calendar stuff, and some tools may use those tags for integration. But the main use is for screenreaders in webpages for blind people. It also future proofs your page, browsers are starting to add more and more features than simply rendering a page, and they may fallback in to that data to provide for those features.

[@markuseberlein3394]

and on mobile devices the title attribute won't work anymore by default :(

[@Gabriel-by6gb]

[@dan2800]

That's what you do in java as well you use the if for everything

[@jreaper5392]

I opened the video, I got told there's more than divs. I feel attacked, emotionally scarred, but intrigued

[@igordasunddas3377]

How is using abbr better than using e.g. a span with a title (or div or anything)?

[@KevinPowell]

The semantics of it are important for screen readers, and it also can gain focus for people who use keyboard navigation. It has built in functionality for accessibility that you'd have to recreate otherwise :)

[@dennischow7784]

I use and .

[@kylevandeusen]

Great video! More like these please! I wonder if using dfn could help with getting rich snippets 🤨

[@mervinmarias9283]

I have even seen instructors using data attributes because they were not aware of the time element.

[@malfoy2797]

Had learnt all these in my college 6 years back as basics. 😂

[@TheNewton]

Use Mark for incoming search result terms

[@jeetmandaliya2188]

I always here "Friend and friends" instead of "Front-end friends"

[@johnkeck]

Doesn't the TITLE attribute on any element show a tooltip on hover? So ABBR is pretty much equivalent to a SPAN, for example, with some underline styling.

[@colinjamesfirth]

Visually, you could get the same effect with all sorts of elements. But, as with most of html, it's the semantic context that's important. Choosing the correct element can make an enormous difference to the user experience for someone using assistive technology.

[@jpisello]

@@colinjamesfirth I suppose there is some minor accessibility benefit to using the element to signify an actual abbreviation, acronym or initialism. Adding a title attribute to any element gives that element an "accessible name" specified by the value of that attribute. It's just like the aria-label attribute (which is preferred in such situations, and will override a title attribute-accessibility-wise), except that the aria-label attribute does not display a visual tooltip on long hover. (The "accessible name" is announced by screen readers, and can be used to add context to visual text where that context would be obvious to a visual user but wouldn't be to someone only hearing the text being read aloud.)

[@colinjamesfirth]

@@jpisello To do it properly, we need all three. The correct element lets assistive tech (AT) know how to present the information to the user; an aria-label gives it context; and the title attribute additional machine-readable information, useful for things like visible tooltips. Interestingly, the title attribute is ignored by some AT, which is one of the reasons we have to do both.

[@janekschleicher9661]

If you want to build a company wide lexicon of all abbreviations used in the company (and keep it up to date), it's very easy done if they are marked as abbr and the same is true for definitions, etc. If something like span is used, this simple problem becomes a hard AI problem once span is used. HTML (for at least originally) was not a language to deliver executables that have graphics, but to provide informations (to humans and computers). I know, we deviated of it, but the natural idea for HTML is to markup the information and not just which color and font should be used for it. (HTML != Postscript or PDF for a reason)

[@phpgod]

At 8:18 did you just say "igen", the hungarian yes? :D

[@peteryates308]

How do you see abbr tooltips on mobile?

[@lolerskates876]

"Html is more then just divs" Ha! Can you imagine half a million subs for a channel that was just "so let's go over divs again"

[@Someone-jf1zq]

Hey Kevin, Can I ask a question? Your a web developer right? If your proffesion now is doing some html, css, js etc. Do you work too as programming like doing some other language like python or any language? Or your just focusing in doing html?

[@KevinPowell]

I'm an educator now, so I primarily focus on CSS these days tbh. Before I was a teacher HTML, CSS, JS. Very much a front-end dev.

[@Someone-jf1zq]

@@KevinPowell thank you

[@clamhammer2463]

I have been working with code since HTML 1.0 days. I now am capable to advanced in about 15 other languages, not all of them are web-based. However, I struggle with more complex topics due to this lack of mastery. In hindsight, I wish that I would have specialized in 2-4 languages. Now I am expected to be an expert in the full stack of tech in any project that I undertake and that is more pressure than it's worth.

[@vftdan]

Html element, that almost nobody uses and shouldn't:

[@gamerel5028]

Hey Kevin, you make fantastic tutorials. One question: i use an to implement in an extra another html site. i select on the left with a dropdownlist an entry, and on the right hand side the description on an extra html site appears. Compicated description sorry. Now everybody says, that no more good to use. You should use others but nothing works like tag. Could you do some tutorial about it? I heard too, that the with the "sandbox" attrb is making famous to use again? What is about that? Greets

[@LadyLexyStarwatcher]

Dude! Love the shirt! ;) DFTBA

[@SteinGauslaaStrindhaug]

is too much typing... i us for everything :P

[@kuckuk]

*sees video duration* nice.

[@saidialhaye1281]

Please main point. I wanted to watch the hole vidéo but explations are too wide

[@FredrikHistherRasch]

But what about marquee? 🙃

[@TimothyBushell]

I use all the tags in my classless CSS library elioSin.

[@shaamtechnology]

Thank you you are the best

[@jonnybritton2540]

This is the Mandela affect 😲 I swore he always said friend and friends 😲

[@ABaumstumpf]

there is a general problem with "web"developers often having no clue what HTML, php and others actually bring to the table. It is surprising just how often i encounter webpages that do not work at all with JS disabled - not even simple things like mouse-over description, sometimes even LINKS !!! "abbr" is one of those. recently i was looking through one of our company-internal pages that deals with common terminology, and specially abbreviations..... and of course they heavily use those abbreviations in the description (so when you look up one thing it describes it in terms of 3, 4 or even more other abbreviations).... those would be prime examples of were to use simple HTML. But nope - they all got JS behind them. You can not open them in another tab - you have to click it and it overwrites the current page.....

[@KevinPowell]

The amount of JS written to badly replicate native HTML functionality is depressing

[@janekschleicher9661]

Indeed, and beside accessibility problems and added complexity, such functionality is also hard to test. Of course, you can add some end-to-end user testing (slow) or trust a unit test for it (they can mainly test whether the business logic for getting the abbreviation content or link reference is working, but not whether it really works when the user really hover over it or tries to click on a link). And really, it's stupid in 2022 if links don't work or similar, but still reality. (In contrast, it's easy to test if abbreviations or links are correct and accessible in pure HTML). In addition, it's hard to scrape the data. Why would we want it? (beside of course that search machines matter): To support APIs or automated usage not thought when implementing the web app. In all business oriented application, this will matter at some point later and the disappointing fact is that this ends up in a RPA (robot process automation), so something similar like a Selenium driving approach to access the data (In principle you could hire also experts that reverse engineer the Javascript code, but they are rare, expensive and you (let's say Business Analysts) can't maintain it without these experts again). While that works to some extend, it's slow, not very robust and will need another digitalization round some years later. In non business areas, it's also against any open data principles (don't we want efficient systems?).

[@ABaumstumpf]

Small extra story: Our business-software recently got a new release... now the terminal login-page is a "normal" webpage with all the same problems of JS. It is the simplest of simple login-pages - 2 input-fields, 1 ok button, and a regex (that was the source of some bugs). Opening the page on my laptop takes about 2 seconds, checking the debugger reveals that over 100k lines of JS were loaded. A SINGLE-BUTTON PAGE has over 100 000 lines of code.

[@gamersunite9026]

actually i think abbr is pretty well known

[@TheNewton]

After watching this and similar unused tags "tip" videos I can't stop thinking how weird it is _basic_ code-editor tooling for HTML development has stagnated. HTML tooling hasn't progressed to the point where divitis and in-accessibility have to be a *purposeful* choice to opt-in when using anything slightly more advanced than notepad. We've made a habit for web tools to push all the responsibility of html-fluency to happen after-the-fact in things like SEO and accessibility audits if they happen at all. Consider how odd it is to say "semantic html linter" when that should be a standard practice 🤔, and shocking when someone doesn't use one; instead of it basically not existing at all during the authoring phase. Even a bit odder if you try to google "semantic html linter" or variations, it's like there's a hole in our collective mind and we do not want to look at it. ( or my google-fu sucks and my practices are what's dated as most "lint" tools are just structural correctors like htmltidy ,htmllint , or htmlhint under the hood, semantics need not apply)

[@FFAs]

Uhhh what is a semantic html linter? Newbie learning that has no idea. Is it just a form of validator?

[@Userk2406]

But I use them sometimes!!!😅🙋🏻

[@wiepcorbier]

You know ...and you know...button you know ...so...you know....omg

[@0hate9]

my favorite thing about html5 is that you can just make up tags if you want

[@tworsfeline2302]

10:50 You misspelled language as langauge.

[@EDS432]

why watch this when uduev siumplified has same videos

[@fatesteyneit2990]

to everyone out there.. I've been in a JavaScript course for about a month now and I unless I find a JS 'project' to work on, I won't graduate/ have the certificate.. If anyone of y'all can help me out with any idea of what could that project be it would be appreciated.. the project does not have to be original concept or big.. as long as it is useful on a daily basis or there's a potential target users..

[@jpisello]

The canonical example would be a To Do list application. But depending on how complicated you wanted to get, you could try something like a game (think Wordle or something similar).

[@EDS432]

why watch this when web dev simplified has same videos

[@buddingromance]

honestly dfn seems a little pointless to me