5 HTML Features You Should Know

#webdev #programming #html #css

We deal with a variety of technologies, frameworks, and programming languages as web developers. While learning HTML, CSS, and JS is simple, mastering each of them is difficult.
Even though there are numerous advantages to knowing more about HTML's features, it is sometimes disregarded. You can save a lot of time by using HTML features rather than creating them from scratch. Furthermore, your markup will be considerably cleaner and more user-friendly.
So let's look at five HTML features you've probably never heard of before! I hope this article will help you a lot!.

1. Input Suggestions

The html

<datalist>

element contains a set of

<options>

elements that represent the recommended options availabe to choose from within other controls.

2. Details Discloure

The html

<details>

element creates a discloure widget in which information is visible only when the widgets is toggled into an "open" state.

3. The Base Element

The html

<base>

element specifies the base URL to use for all relative URLs in a document.

In this example I am setting base Url to https://i.pravatar.cc and target to blank. The images are loading taking into account that base URL + their respective src attribute. The anchor elements are redirecting to the base URL + the href attribute.

4. Lazy Loading Images And Iframes

You can add the loading attribute and set its value to lazy to defer the loading of both images and iframes until they become visible in the browser.

5. The Picture Element

The html

<picture>

element contains zero or more

<source>

elements and one

<img>

element to offer alternative versions of an image for different display/device scenarios.

In the above example if the browser width is atleast 800px then either head.jpg or head2x-jpg is used, depending on the device resolution. If the browser is between 450px and 800px then either head-small-2x.jpg is used again depending on the device resolution.