Some important HTML tags, one should know about

#react #html #css #javascript

There are some html tags which is which is lesser talked but has potential to reduce the developer headache.

1. Lazy loading the image

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.

2. Picture tag

The HTML element contains zero or more elements and one element to offer alternative versions of an image for different display/device scenarios.

The browser will consider each child element and choose the best match among them. If no matches are found—or the browser doesn't support the element—the URL of the element's src attribute is selected. The selected image is then presented in the space occupied by the element.

<picture>
    <source srcset="image800px.png"
            media="(min-width: 800px)">
    <img src="imagedefault.png" alt="" />
</picture>

This is supported by every browser except Internet Explorer.

3 http-equiv= “refresh”

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.

4. Progress

The tag represents the completion progress of a task.

<progress id="file" value="32" max="100"> 32% </progress>

5. Datalist

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>

Conclusion

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!