5 HTML Tricks Nobody Tells You 😎

Bhagirath Bhatti — Wed, 23 Jun 2021 07:14:37 +0000

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>

Forem: Bhagirath Bhatti

5 HTML Tricks Nobody Tells You 😎