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

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

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.

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.

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.

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.

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)

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

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

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

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.

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

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.

Awesome stuff Kevin!

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

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

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?

Really cool!