19
loading...
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>19