Regardless of what framework or server-side language one uses, all web developers rely on HTML after some use, regardless of their knowledge of how the technologies stack and interact. HTML won’t go away. Yet though widely used, there are still tags and properties that most developers would not know about.
Of course, there are many ways to create templates (Pug for one), but you have to understand HTML to do so. However, we think it’s better to use existing HTML features whenever possible, rather than creating something similar with JavaScript, though writing HTML can be boring.
Developers use HTML every day but don’t strive to be really good at using it and don’t use all of the less talked about HTML features. This is exactly why we’re sharing material that summarizes 5 HTML tags and attributes you should know.
#1. Lazy Image Loading
Lazy-loading images can improve the performance and responsiveness of your website. Lazy loading prevents you from immediately loading images that you don’t really need. Typically, an image starts loading when you scroll down the page and approach the image. In other words, the image loads when the user scrolls the page and the image becomes visible, otherwise, it doesn’t load.
This is easy to achieve with plain HTML. All you need to do is add the loading=”lazy” property to the img tag. After adding the property, your element should look something like this:
<img src="image.png" loading="lazy" alt="description" width="250" height="250">
You can get some idea of the bytes you’ll save with this trick by using the Google Lighthouse tool.
#2. Autocomplete
Getting hints right on the line when you try to search for example Software Staff Augmentation companies is a really cool trick. 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 an input field event listener and then mapping the searched words to predefined choices. However, HTML also allows you to display a set of predefined variants using the <datalist> tag. Remember that the ID attribute of this tag must match the list attribute of the input tag.
<label>Pick a car: <input list="cars" name="carList" /></label> <datalist id="carList"> <option value="Volvo"> <option value="Tesla"> <option value="Toyota"> <option value="Ferrari"> </datalist>
#3. Picture
Have you ever had a problem with images not enlarging as you expected? We have – many times.
This usually happens when you are trying to create a gallery site or using a large image and displaying it as a thumbnail. When you change the width of the viewport, you may notice that some images don’t scale up and down as expected. Fortunately, HTML gives developers the ability to fix this fairly easily by using the <picture> tag, which allows you to add multiple images to match different widths.
Your code will look something like this:
<picture> <source media="(min-width: 480px)" srcset="car.jpg"> <source media="(min-width: 320px)" srcset="town.jpg"> <img src="tree.jpg" alt="Flags" style="width: auto;"> </picture>
As you can see, we have specified the minimum width at which a particular image should be displayed. This tag is very similar to the <audio> and <video> tags.
#4. Base URL
This tag comes in handy when you have many link tags redirecting to a specific URL, and all URLs start with the same base URL.
For example, if we want to point a URL to Twitter Jeff Bezos and Tim Cook, the beginning of the URL (domain) will be the same, and what follows will be their respective identifiers. Normally you would have to insert a link with the same domain name twice. However, HTML has a <base> tag that allows you to set the base URL as shown below:
<head> <base href="https://www.twitter.com/" target="_blank"> </head> <body> <img src="jeffbezos" alt="Jeff Bezos"> <a href="timcook">Tim Cook</a> </body>
The above code will generate an image linking to “https://www.twitter.com/jeffbezos” and a link tag redirecting to “https://www.twitter.com/timcook“. The <base> tag must have either “href” or “target” attributes.
#5. Refreshing a Document
If you want to redirect a user to another page after a period of inactivity or even immediately, you can easily do so using simple HTML. You may have noticed this feature when you open certain websites and see something like “You will be redirected in 5 seconds“.
This behavior is built into the HTML, and you can use it by using the <meta> tag and setting http-equiv=”refresh” in it:
<head> <meta http-equiv="refresh" content="4; URL='https://google.com'"> </head>
Here the content property specifies the time in seconds after which the redirection should take place.
Conclusion
HTML and CSS are pretty powerful tools, and you can create fantastic websites using them. There are many such tips and tricks beyond the ones I’ve shared with you, and they are definitely worth trying in your project.