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.
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">
You can gain some insights regarding the bytes you’ll save with this trick by using Google’s Lighthouse tool.
2. Input suggestions
Getting useful and relevant suggestions when you are trying to search for something is really helpful.
However, HTML allows you to show a set of pre-defined suggestions as well, using the tag.
Remember that this tag’s ID attribute must be the same as the input fields list attribute.
<label for="country">Choose your country from the list:</label> <input list="countries" name="country" id="country"> <datalist id="countries"> <option value="UK"> <option value="Germany"> <option value="USA"> <option value="Japan"> <option value="India"> </datalist>
3. Picture tag
Have you ever run into an issue with images not scaling up as nicely as you expect them to? I certainly have many times.
This usually happens when you are trying to build gallery sites or using a large image and showing it as a thumbnail image.
When you change the viewport width, you might notice certain images not scaling up and down as expected.
Luckily, HTML gives developers the opportunity to fix this quite easily by using the tag allowing you to add multiple images fitting different widths instead of having a single one scale up and down.
Your code will look something like this:
<picture> <source media="(min-width:768px)" srcset="med_flag.jpg"> <source media="(min-width:495px)" srcset="small_flower.jpg"> <img src="high_flag.jpg" alt="Flags" style="width:auto;"> </picture>
As you can see, we specified the minimum widths at which a certain image has to be shown.
This tag is very similar to and tag.
4. Base URL
This is one of my favorite tags when creating an index of sites or a sitemap.
This tag comes in handy when you have a lot of anchor tags redirecting to a certain URL and all the URLs start with the same base address.
For example, if I want to specify the URL to the Twitter handles of Elon Musk and Bill Gates, the start of the URL( the domain) will be the same but what follows that will be their respective IDs.
Normally, I have to paste the link twice along with the same domain name.
However, HTML has a tag which enables you to set a base URL as shown below:
<head> <base href="https://www.twitter.com/" target="_blank"> </head> <body> <img src="elonmusk" alt="Elon Musk"> <a href="BillGates">Bill Gate</a> </body>
The tag must have either “href” or a target attribute present.
5. Document refresher
If you want to redirect the user to another page after a period of inactivity or even immediately, you can do so easily by using nothing but plain HTML.
You might have noticed this feature when you open certain sites and something along the lines “You will be redirected in 5 seconds” pop up.
This behavior is baked into HTML and you can use it via the tag and setting the http-equiv= “refresh” on it.
<meta http-equiv="refresh" content="4; URL='https://google.com' />
Here the content property specifies the seconds after which the redirect shall happen.
It is worth noting that although Google claims to treat this form of redirect like other redirects, it is not wise to use this type of redirects unless you really have to.
Therefore, use it only in certain cases like redirecting the page after a significant amount of inactivity.
HTML and CSS are quite powerful and you can build fantastic websites by using just the two.
However, despite the heavy usage of these two languages, many developers don’t really dive deep and fun with these.
There are a lot of such tips and tricks besides the few which I have shared above and surely they are worth trying out in your project.
Learning anything and becoming proficient in it requires time, dedication, and practice and HTML is no exception.
Hope you enjoyed reading my article!
Be sure to follow and react!