5 HTML tricks that nobody talks about

All web developers use HTML extensively, no matter what framework or server-side language is used. Frameworks and programming languages ​​can come and go, but HTML isn’t going anywhere. But despite this widespread use, there are still tags and properties that most developers don’t know about.

Although there are various templating mechanisms such as Pug, you still need to have a good grasp of HTML. In my opinion, it is better to use the capabilities of HTML whenever possible, rather than achieve the same functionality with JavaScript, although I admit that writing HTML can get tedious.

Despite the fact that many developers use HTML on a daily basis, they do not try to hone their skills and therefore do not apply some of the rarely discussed features of HTML. Especially for the start of a new stream web development course, here are 5 HTML tags and attributes you should know about.

1. Lazy loading of an image

Lazy loading images can improve the performance and responsiveness of your site.

Lazy loading prevents the immediate loading of images that are not really needed. Typically, the image starts to load when you scroll the page and move closer to it.

In other words, the image is loaded when the user scrolls the page and the image becomes visible, otherwise it won’t load.

This is easily accomplished with plain HTML.

All you need to do is add a loading = “lazy” property to the img tag.

After adding the property, your element should look something like this:

…

You can get some idea of ​​the bytes you will save with this trick by using the tool Google lighthouse

2. Autocomplete

Getting hints right on the line when you’re trying to find something is really cool.

Autocomplete is pretty common these days and you must have noticed it on sites like Google and Facebook.

You can use JavaScript to implement autocomplete by setting up an input field event listener and then matching the search words with predefined choices.

However, HTML also allows you to display a set of predefined options using the tag.

Remember that the ID attribute of this tag must match the list attribute of the input tag.

<label for="country">Choose your country from the list:</label>

<input list="countries" name="country" id="country">

<datalist id="countries">

  <option value="UK">

  <option value="Germany">

  <option value="USA">

  <option value="Japan">

  <option value="India">

</datalist>

3. Picture

Ever run into an issue where images are not zoomed in as expected? I – many times.

This usually happens when you are trying to create a gallery site or are using a large image and display it as a thumbnail.

When you change the width of the viewport, you may notice that some of the images do not scale up and down as expected.

Fortunately, HTML gives developers the ability to fix this fairly easily by using the tag, which allows you to add multiple images with different widths.

Your code will look something like this:

<picture>

  <source media="(min-width:768px)" srcset="https://habr.com/med_flag.jpg">

  <source media="(min-width:495px)" srcset="https://habr.com/small_flower.jpg">

  <img src="https://habr.com/ru/company/skillfactory/blog/546110/high_flag.jpg" alt="Flags" style="width:auto;">

</picture>

As you can see, we have specified the minimum width at which a certain image should be displayed.

This tag is very similar to the

4. Base URL

This is one of my favorite tags when creating a sitemap.

This tag comes in handy when you have many link tags that redirect to a specific URL and all URLs start with the same base address.

For example, if I want to point the Twitter URL of Elon Musk and Bill Gates, the start of the URL (domain) will be the same, and what follows it will be their respective IDs.

I usually have to paste a link twice with the same domain name.

However, there is a tag in HTML that allows you to set the base url as shown below:

<head>

<base href="https://www.twitter.com/" target="_blank">

</head>

<body>

<img src="elonmusk" alt="Elon Musk">

<a href="BillGates">Bill Gate</a>

</body>

The above code will generate an image with a link to “https://www.twitter.com/elonmusk” and a link tag redirecting to “https://www.twitter.com/billgates”.

The tag must have either “href” or “target” attributes.

5. Document update

If you want to redirect the user to another page after a period of inactivity, or even right away, you can easily do this using simple HTML.

You may have noticed this feature when you opened certain sites and saw something like “You will be redirected in 5 seconds.”

This behavior is built into HTML, and you can use it by using the tag and setting http-Equiv = “refresh” to it:

<meta http-Equiv="refresh" content="4; URL='https://google.com'/>

Here the content property specifies the time in seconds after which the redirect should occur.

It’s worth noting that while Google claims to treat this form of redirection in the same way as other redirects, it is unwise to use this type of redirect unless you really need to.

Therefore, use it only in certain cases, for example for a redirect after significant inactivity.

Conclusion

HTML and CSS are pretty powerful tools, and you can create fantastic websites using them.

However, despite the heavy use of these two languages, many developers are not particularly keen on them.

There are many such tips and tricks, in addition to the ones that I have shared with you, and they are definitely worth trying in your project.

If you’re planning on using JavaScript, be sure to check out my recent post, which discusses some tips that can save you time.

5 modern JavaScript tips and tricks to save time. Reduce your workload and write cleaner code with these JavaScript tips.

Learning and mastering this skill takes time, dedication and practice, and HTML is no exception. And if you want to devote more time to web development under the guidance of experienced mentors, then a new stream will start soon. corresponding course

find outhow to level up in other specialties or master them from scratch:

Other professions and courses

Similar Posts

Leave a Reply