There are some html tags which is which is lesser talked but has potential to reduce the developer headache.
Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.
Lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation.
<img src = "image.jpeg" alt = "Image" loading="lazy" />
This also works like magic with iframe and is supported in most of the browsers.
The HTML element contains zero or more
The browser will consider each child
<picture> <source srcset="image800px.png" media="(min-width: 800px)"> <img src="imagedefault.png" alt="" /> </picture>
This is supported by every browser except Internet Explorer.
I just want to discuss a usecase for this
Suppose when a user first comes to your website, and you want to show him some loading screen for few seconds to pre-fetch content for a better user experience. In this case it is very useful.
<meta http-equiv="refresh" content="30; https://amankumarsingh01.github.io">
this will redirect to streamstyle after 30 sec
Instructions for content attribute:
The number of seconds until the page should be reloaded - only if the content attribute contains a positive integer.
The number of seconds until the page should redirect to another - only if the content attribute contains a positive integer followed by the string ';url=', and a valid URL.
The tag represents the completion progress of a task.
<progress id="file" value="32" max="100"> 32% </progress>
The HTML element contains a set of elements that represent the permissible or recommended options available to choose from within other controls.
<label for="ice-cream-choice">Choose a flavor:</label> <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" /> <datalist id="ice-cream-flavors"> <option value="Chocolate"> <option value="Coconut"> <option value="Mint"> <option value="Strawberry"> <option value="Vanilla"> </datalist>
I Think Html and css is very powerful, and these can be used to inject life in some good websites just by using these two. Despite of heavy usage in industry many people don't dive in deep.
Hope you enjoyed reading my article!