HTML TRICKS NOBODY TALKS ABOUT | 5 BEST HTML TRICKS

ads 3

HTML TRICKS NOBODY TALKS ABOUT | 5 BEST HTML TRICKS


All web developers have to use html extensively

Regardless of whichever framework or backend language you choose.

Programming languages come and go, but html is here to stay.
Here are 5 HTML tags & attributes you should know.

01. Lazy loading your image:


Lazy loading your images can  help boost your site performance and responsiveness. The image is loaded when the user scrolls and the image becomes visible otherwise. it is not loaded. All you have to do is to add loading="lazy" propert to  your Image Files.

<img src="image.png"loading="lazy"

alta"..." widths"200" heights"200">

02. Input suggestions:


Getting useful and relevant suggestions when you are trying to search for something is really helpful. HTML allows you to show a set of pre-defined  suggestions as well, using the
<datalist> tag.

<label for="country"> Choose your country from the list</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
(option value="UK=">
option value="Germany">
(option value='USA">
(option value="d'Japan">
option value="lndia">
</datalist>

03. Picture Tag:
Have you ever run into an issue with images not scaling up as nicely as you expect them top, I certainly have many times.
When you change the viewport width, you might notice certain images not scaling up and down as expected.

Luckily, HTML gives developers the opportunity topix this quite easily by using the (picturo tag allowing you to add multiple images fitting different widths instead of having a single one scale up and down. 

<picture>

<source media="(min-width:768px)" srcset="med.flag.jpgs">

<source medial"(min-width:495px)" srcset="mall_flower.jpg">

<img src="high.flag.jpg" alt="Flags" style="width:auto;">
</picture>

04. 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 ' alta="Elon Musk"
<a href;"BiIIGates">Bill Gate(/a>
</body>


The <base> tag must have either "href" or a target attribute present.

05. Document refresher:
You might have noticed this feature when you open certain sites and something along the lines "You will be redirected in 5 seconds" pop up. This behavior is baked into HTML and you can use it via the (meta) tag and setting the http-equivz "refresh" on it.

<meta http-equiv="refresh" content="4"; URL='https://google.com'/>


____________________________________________________


Conclusion 


So thats what I wanted to share with you guys 👦

And thank you for your time and support.

I wish you guys to enjoy your journey.

Also don't hesitate to share this post with your interested ones.



Gracias 





2 Comments

Previous Post Next Post