DEV Community

Cover image for 5 HTML Tricks Nobody Tells You 😎
 Bhagirath Bhatti
Bhagirath Bhatti

Posted on

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"/>
Enter fullscreen mode Exit fullscreen mode

#2 Downloading files

πŸ‘‰ They will download the specified file and with the name provided.

<a href="file.pdf" download="pdf-file">Download</a>
Enter fullscreen mode Exit fullscreen mode

#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>
Enter fullscreen mode Exit fullscreen mode

#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>
Enter fullscreen mode Exit fullscreen mode

#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>
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
diegoireland1975 profile image
Diego Raffa

Interesting, especially the picture tag

Collapse
 
bhagirath1312 profile image
Bhagirath Bhatti

Thank you ☺