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.
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…
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.
However, HTML also allows you to display a set of predefined options using the
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>
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
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
<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”.
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.
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.
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