Hello Everyone, Today we are giving you information about Five HTML Tricks Nobody Tells You! If you like this information, please share it with your friends. Leave me a comment to improve my writing skills and subscribe by email for future updates.
All web developers have to use HTML (HyperText 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.
Below are 5 HTML tricks you should know:
1. Lazy loading image:
Lazy loading prevents the loading of images that aren't really needed on the screen immediately. As you scroll down or closer to the image, the image beings to load.
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
2. Input suggestions
Use this input hack to get useful and relevant suggestions when you are trying to search for something really helpful.
<label for="country">Choose your country from the list:</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
<option value="India">
<option value="Germany">
<option value="USA">
<option value="Japan">
<option value="UK">
</datalist>
<input list="countries" name="country" id="country">
<datalist id="countries">
<option value="India">
<option value="Germany">
<option value="USA">
<option value="Japan">
<option value="UK">
</datalist>
3. Document refresher
This will redirect the user to the provided URL that is "https://google.com" in 4 seconds and then set it to 0 for an immediate redirect.
<meta http-equiv="refresh" content="4; URL='https://google.com' />
4. Base URL
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.
<head>
<base href="https://www.twitter.com/" target="_blank">
</head>
<body>
<img src="Elonmusk" alt="Elon Musk">
<a href="BillGates">Bill Gate</a>
</body>
<base href="https://www.twitter.com/" target="_blank">
</head>
<body>
<img src="Elonmusk" alt="Elon Musk">
<a href="BillGates">Bill Gate</a>
</body>
5. Picture tag
Using the <picture> tag witch allows you to add multiple images fitting different widths instead of having a single one scale up & down.
<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>
<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>
<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>
Do try them!
Have knowledge of other tricks that can help reduce HTML coding time? Feel free to share in the comment section below!