Today I learned
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
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 ↗, which highlights their favorite HTML elements. The second one is A Blog Post With Every HTML Element ↗ 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.
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.
meter element is also pretty cool.
Firefox shows them all as green, but Safari shows them as red, yellow, and green depending on the value.
And of course, the
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
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 is for single words, and
i is for
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
code for that.
Looks all the same but the last line is rendered as
samp instead of
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
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.
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