Today I learned
Learn HTML
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.
Meter
The 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.
Progress
And of course, the progress element.
Make sure you use a label for it. Otherwise, it's not accessible.
Mark
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 textQuick 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.
Samp
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.
const name = 'Patrick'
console.log(Hello ${name}!);
Hello Patrick!Looks all the same but the last line is rendered as samp instead of code.
Wbr
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.
Sources
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