Today I learned

Learn HTML

Edit this Post Opens in new tab

This is technically not a "Today I learned" post because I already knew that knowing semantic HTML is important. This post is more of a reminder to myself and others that HTML is still the most important language to learn.

So today, I learned that learning and knowing semantic HTML is still important.

Every developer saw these websites where the DOM consists of a bunch of divs and maybe even worked on a website like that themselves. I know I did. And I wasn't proud of it. But thankfully, we can do better.

This week I stumbled over two blog posts. The first one is I'm betting on HTML Opens in new tab, which highlights their favorite HTML elements. The second one is A Blog Post With Every HTML Element Opens in new tab by Patrick Weaver in which, as the title says, he uses every HTML element in a blog post.

I'd like to share my favorite parts of these blog posts here, so let's jump right in.

The range of input types is amazing. You get so much functionality without any JavaScript.

Different input types

Built-in datepickers? Come on! Everyone who has ever built a datepicker knows how much work it is to make it accessible and usable. And here we have it for free.


The meter element is also pretty cool.

50% 75% 100%

Firefox shows them all as green, but Safari shows them as red, yellow, and green depending on the value.


And of course, the progress element.


Make sure you use a label for it. Otherwise, it's not accessible.


I've worked with JS libraries just to highlight some text. Did you know that's possible with HTML? I didn't. What a shame.

highlighted text

Quick and reasy way to highlight text without any JS.

Differences between elements

The difference between strong and b is also interesting. strong is for the meaning of the text and b is for the presentation. So use strong if you want to emphasize the text and b if you want to make it bold.

I think the same goes for em and i. em is for single words, and i is for phrases.


Have you ever used samp? I haven't. I didn't even know it existed until I read Patrick's blog post. It's used to render the output of a computer program. I always used code for that.

A little JavaScript program:
const name = 'Patrick' console.log(Hello ${name}!); Hello Patrick!

Looks all the same but the last line is rendered as samp instead of code.


Another one I have never heard before is wbr. It's used to tell the browser where it can break long words. It's a gread thing to use for long URLs. The points where it breaks are more clear which makes it more readable compared to not using wbr.

These were the highlights of my weekly HTML digest. I strongly recommend reading both mentioned blog posts above because they cover a lot more than I did here.


I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter Opens in new tab or via Email Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

β˜•οΈ Buy me a coffee β˜•οΈ

I wish you a wonderful day! Marco