5 HTML Tricks Nobody Tells You 😎

The 5 HTML tricks nobody is talking about and if you like please share and like my article 😊.

So let's go 😎.

#1 Lazy loading image

👉 Lazy loading prevents the loading of images that are not really needed on the screen immediately. as you scroll down or closer to the image, the image begins to load.

<img src="image.png" loading="lazy" width="100" height="100"/> 

#2 Downloading files

👉 They will download the specified file and with the name provided.

<a href="file.pdf" download="pdf-file">Download</a> 

#3 Picture tag

👉 Using the tag which allows you to add multiple images fitting different widths instead of having a single one scale up & down.

<picture> <source media="(min-width:700px)" srcset="image1.png"/> <source media="(min-width:400px)" srcset="image2.png"/> <img src="image.png" alt="image" style="width:autox"/> </picture> 

#4 Hide elements

👉 Despite putting the presentation in the HTML, which is bad, this can sometimes turn out useful.

<div hidden="hidden"> <p>Hello World!</p> </div> 

#5 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="UK"> <option value="USA"> <option value="Japan"> <option value="Australia"> </datalist>