HTML tags and attributes you need to know in 2021

Web developers use HTML extensively. No matter what framework you use or which back-end language you choose, frameworks change, but HTML stays the same. Despite being widely used, there are some tags or attributes that most developers are not familiar with. Although there are many template engines available, the teachers at Lebyte Education tell us that we need to be as familiar with HTML content as possible, just like CSS.

In my opinion, it is better to use HTML features for our functionality whenever possible than to use JavaScript for the same functionality, although I admit that writing HTML can be repetitive and boring.

Although many developers use HTML every day, they don’t try to improve their projects or really take advantage of some of HTML’s lesser-known features.

Here are 5 HTML tags/attributes that I feel I need to know about:

Lazy loading of images

Lazy loading of images can help improve site performance and responsiveness. Image lazy loading avoids loading images that are not immediately displayed on the screen and starts loading when the user scrolls through the adjacent images.

In other words, the image is loaded when the user scrolls until it appears, but not otherwise. This reduces the number of images requested during on-screen content presentation and improves site performance.

This is often done in javascript, listening for page scrolling events to determine which resources are loaded. However, in the case of incomplete compatibility, we can actually do this directly through HTML.

Note: The compatibility of tags and attributes mentioned in this article depends on the actual situation

This can be done by adding loading=”lazy” to image files:

The input prompt

It would greatly improve the user experience to be able to provide an effective prompt when entering a search function. Input suggestions and autocomplete functions are now everywhere, and you can add input suggestions using Javascript by setting event listeners on the input box and matching the searched keywords to the predefined suggestions.

In fact, HTML also allows us to implement predefined input suggestions, through tags. Note that the id attribute of this tag needs to be the same as the list attribute of the input element.

Picture the label

Have you ever encountered the problem of image display fitting in different scenes or on different sizes of devices? I think we all have.

When there is only one size of image material, we can usually use the OBJECT -fit property of CSS to cut and fit. But sometimes we need to display different sizes of images with different resolutions, can we directly achieve it through HTML?

HTML provides tags that allow us to add multiple image resources and display different images according to different resolution requirements.

We can define different ranges of minimum resolution to determine the image material, the use of this tag is somewhat similar to and tag.

Base URL

When our page has a large number of anchor jumps or static resource loads, and these jumps or resources are in the same domain name scenario, we can simplify this process by using tags.

For example, if we have a list to jump to the home pages of different big Vs of Weibo, we can simplify the jump path by setting it

Page redirection (refresh)

When we want to redirect to another page after a period of time or immediately, we can do it directly through HTML.

We often come across sites that have a feature that says, “The page will jump after 5 seconds.” This interaction can be embedded in HTML, directly through the tag, setting http-equiv=”refresh”

Here the Content property specifies the number of seconds in which the redirect occurs. It’s worth noting that while Google claims that this form of redirection works just as well as any other, using this type of redirection isn’t exactly elegant and tends to be obtrusive.

Therefore, it is best to use it in special cases, such as redirecting to the target page after a long period of user inactivity.

Afterword.

HTML and CSS are very powerful, and we can create some fantastic websites using just these two technologies. Although they are widely used and common, there are still a lot of developers who don’t really understand them, and there are still a lot of things to learn and understand and practice, and a lot of techniques to discover.

The article reprinted the joy byte

Finally, I would like to recommend some super detailed Java self-study courses of B station:

Servlet Tutorial BV1D5411373E

Vue, Vuejs tutorial, BV19V41177od

SpringBoot+Vue project actual combat