Member-only story
5 HTML Tricks Nobody is Talking About
HTML tags and properties you should know in 2021
All web developers have to use HTML (Hyper Text Markup Language) extensively, regardless of whichever framework or backend language you choose.
Frameworks and programming languages may come and go but HTML is here to stay. But despite this wide usage, there are still tags and properties that most developers aren’t aware of.
And although there are various templating engines like Pug available, still you need to have a good grasp of HTML as well as CSS.
If you use CSS frequently, check my recent blog on some of the most useful CSS properties that are not well known.
In my opinion, it’s better to use HTML features whenever possible instead of achieving the same functionality using JavaScript even though I admit that writing HTML may become repetitive and boring.
Even though many developers use HTML daily, they don’t try to up their game and truly harness some of the rarely talked about features of HTML.
Below are 5 HTML tags and attributes you should know:
1. Lazy loading image
Lazy loading your images can help boost your site performance and responsiveness.
Lazy loading prevents the loading of images that aren’t really needed on the screen immediately. However, as you scroll down or closer to the image, the image begins to load.
In other words, the image is loaded when the user scrolls and the image becomes visible otherwise, it is not loaded.
This can be achieved by plain HTML easily.
All you have to do is add the loading= “lazy” property to your image files.
Your image element shall look something like this after adding the property:
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
