5 HTML Tricks Nobody is Talking About

HTML tags and properties you should know in 2021

Photo by Jamie Haughton on Unsplash

All web developers have to use HTML (Hyper Text Markup Language) extensively, regardless of whichever framework or backend language you choose.

Frameworks and programming languages may come and go but HTML is here to stay. But despite this wide usage, there are still tags and properties that most developers aren’t aware of.

And although there are various templating engines like Pug available, still you need to have a good grasp of HTML as well as CSS.

If you use CSS frequently, check my recent blog on some of the most useful CSS properties that are not well known.

In my opinion, it’s better to use HTML features whenever possible instead of achieving the same functionality using JavaScript even though I admit that writing HTML may become repetitive and boring.

Even though many developers use HTML daily, they don’t try to up their game and truly harness some of the rarely talked about features of HTML.

Below are 5 HTML tags and attributes you should know:

1. Lazy loading image

Lazy loading your images can help boost your site performance and responsiveness.

Lazy loading prevents the loading of images that aren’t really needed on the screen immediately. However, as you scroll down or closer to the image, the image begins to load.

In other words, the image is loaded when the user scrolls and the image becomes visible otherwise, it is not loaded.

This can be achieved by plain HTML easily.

All you have to do is add the loading= “lazy” property to your image files.

Your image element shall look something like this after adding the property:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

You can gain some insights regarding the bytes you’ll save with this trick by using Google’s Lighthouse tool.

2. Input suggestions

Getting useful and relevant suggestions when you are trying to search for something is really helpful.

Input suggestions and autocomplete are fairly common these days and you must have noticed it on sites like Google and Facebook.

You can use JavaScript to add input suggestions by setting an event listener on the input field and then matching the term searched for with the predefined suggestions.

However, HTML allows you to show a set of pre-defined suggestions as well, using the tag.

Remember that this tag’s ID attribute must be the same as the input fields list attribute.

<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 tag

Have you ever run into an issue with images not scaling up as nicely as you expect them to? I certainly have many times.

This usually happens when you are trying to build gallery sites or using a large image and showing it as a thumbnail image.

When you change the viewport width, you might notice certain images not scaling up and down as expected.

Luckily, HTML gives developers the opportunity to fix this quite easily by using the tag allowing you to add multiple images fitting different widths instead of having a single one scale up and down.

Your code will look something like this:

<picture>
  <source media="(min-width:768px)" srcset="med_flag.jpg">
  <source media="(min-width:495px)" srcset="small_flower.jpg">
  <img src="high_flag.jpg" alt="Flags" style="width:auto;">
</picture>

As you can see, we specified the minimum widths at which a certain image has to be shown.

This tag is very similar to and tag.

4. Base URL

This is one of my favorite tags when creating an index of sites or a sitemap.

This tag comes in handy when you have a lot of anchor tags redirecting to a certain URL and all the URLs start with the same base address.

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

Normally, I have to paste the link twice along with the same domain name.

However, HTML has a tag which enables you to set a 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 redirecting to “twitter.com/elonmusk” and an anchor tag redirecting to “twitter.com/billgates”.

The tag must have either “href” or a target attribute present.

5. Document refresher

If you want to redirect the user to another page after a period of inactivity or even immediately, you can do so easily by using nothing but plain HTML.

You might have noticed this feature when you open certain sites and something along the lines “You will be redirected in 5 seconds” pop up.

This behavior is baked into HTML and you can use it via the tag and setting the http-equiv= “refresh” on it.

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

Here the content property specifies the seconds after which the redirect shall happen.

It is worth noting that although Google claims to treat this form of redirect like other redirects, it is not wise to use this type of redirects unless you really have to.

Therefore, use it only in certain cases like redirecting the page after a significant amount of inactivity.

Final thoughts

HTML and CSS are quite powerful and you can build fantastic websites by using just the two.

However, despite the heavy usage of these two languages, many developers don’t really dive deep and fun with these.

There are a lot of such tips and tricks besides the few which I have shared above and surely they are worth trying out in your project.

If you plan on using JavaScript as well, then be sure to check out my recent blog discussing some of the tips that might save you time. 5 Modern JavaScript Tips and Tricks To Save Time Reduce workload and write clean code using these JavaScript tipsmedium.com

Learning anything and becoming proficient in it requires time, dedication, and practice and HTML is no exception.

Hope you enjoyed reading my article!

Be sure to follow and react!