5 HTML Tips for Better Websites

React, Angular, Vue.

Indifferent what framework do you use, as a frontend developer, you have to deal with HTML. And most of the developers have forgot that HTML is not against us(I can't say the same thing about CSS).

There are some very cool ways to improve your website with HTML, but because all developers are focusing on JavaScript, no body talks about these simple tricks.

I. Lazy loading images

Lazy loading is an attribute that you can set to the img tag. This way the images will not load until it reaches a calculated distance from the viewport.

* Don't worry, the user will not has to wait for the images to load when he scrolls to them.

According to?HTTP Archive, images are the most requested asset type for most websites and usually take up more bandwidth than any other resource. At the 90th percentile, sites send about 4.7 MB of images on desktop and mobile.

Using the lazy loading, you will prevent websites from rendering the images that user will not see and this can boost your performance a lot. Sometimes you can prevent loading of several 4k images. And even if the images are not 4k, it still is a boost for your performance and it doesn't take very much time to do it.

To use the lazy loading, you only have to add loading="lazy" to the img tag.

Here you can find more information about lazy loading.

II. Input suggestions

Offering useful suggestions when the user is trying to search something, can be a very big plus for the website, even if it seems to be a small detail.

If you want to make a simple suggestions block, you don't have to use JavaScript to prevent writing and CSS to set its position. HTML provides you a special tag named datalist and it's very easy to use.

All you have to do for creating the suggestions block for your input is to add a datalist with an id, add it options with different values and set the list attribute to input with the datalist's id.

Here you can find more information about it.

III. Picture tag

Did you ever confronted the image resize issue? If you did, you know it is awful. Sometimes, when you are resizing the tab, the image starts looking bad, it is stretching or become to small for the screen size.

With picture tag, you can avoid this situation very easy and without JavaScipt. To use it, you have to put the img tag into a picture tag, and add in source tags with the size you want to show and the srcset, which is basically the src of img.

Here you can find more information about picture tag.

IV. Base URL tag

If a web page have multiple links which have the same base, you can make your HTML look cleaner and a little less full by using base tag. Of course, now with modern JavaScript frameworks, it's not a big deal, but I, personally, find this method more comfortable to use and it takes less space, event if the amount is irrelevant.

If you want to use the base tag you only have to add it with a href attribute. The tag can be added in the body or head.

Here you can find more information about base tag.

V. Metadata Refresh

If you want to redirect the user to an afk page or just to redirect after a time, meta tag with http-equiv refresh may help you.

To redirect the user after an amount of time you have to add a meta tag in body or head with the http-equiv="refresh" and the content with the value "{time in seconds}; URL='{URL}' ".

Here you can find more information about meta.

You can also find my articles on my portfolio:?mariusatasiei.ro/blog