HTML tags and attributes you should definitely check out
Every web developer is familiar with HTML. Whether you are a front end or a back end developer, and despite the new technologies and frameworks available, you still need a good grasp of HTML.
It’s always better to use HTML features, like tags or attributes, instead of trying to achieve the same result by using Javascript for instance. Some of these features you can read below:
1. Lazy loading image
This HTML property loading=”lazy” can boost your website performance and its responsiveness. Using this attribute, the image is loaded only when the user scrolls and the image becomes visible. Otherwise, it is not loaded.
You should add this property to the image file. Here is an example:
<img src="image.jpg" alt="" loading="lazy" width="100" height="100" />
2. Picture tag
As a web developer, you should always find solutions to improve your website speed. If your website takes ages to load, your visitors will lose their patience and leave you. One particular problem is the size of the images you upload on the website and the need of different images on desktop and mobile devices. Also, some images that work on desktop are not so mobile friendly.
And for this problem, HTML comes to the rescue! The <picture> tag allows you to add multiple images to fit different screen sizes. Your code should look something like this:
<picture>
<source media="(max-width:767px)" srcset="image1.jpg">
<source media="(min-width:768px)" srcset="image2.jpg">
<img src="image2.jpg" alt="" />
</picture>The code above allows different images to be loaded depending on the screen size. This tag is similar to the <audio> and <video> tags.
3. Input suggestions
As a user, it is quite helpful to get relevant and useful suggestions when you search for something in particular. To achieve this, you can use the <datalist> tag for some predefined suggestions.
The only thing to remember is that this tag’s ID attribute must be the same as the input fields list attribute.
<label for="country">Select your country:</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
<option value="Romania">
<option value="Germany">
<option value="Denmark">
<option value="Norway">
<option value="Greece">
</datalist>4. Document refresher
If you want to redirect the user to a new page after a period of time of inactivity, you can do this using plain HTML. You can achieve it by using http-equiv=”refresh” in the <meta> tag, as shown below:
<meta http-equiv="refresh" content="4" URL='https://google.com' />The value of the content attribute stands for seconds. However, this is a last resort solution, even though Google claimsto treat the meta refresh like any other refresh.
5. Base URL
You can set a base URL for your website to simplify the code writing. Check the example below:
<head> <base href="https://innobyte.com/" target="_blank"> </head> <body> <img src="careers" alt="Careers"> <a href="team">Team</a> </body>
The above code will generate an image redirecting to https://innobyte.com/careers/ , and an anchor tag redirecting to https://innobyte.com/team/ . So, instead of pasting the domain URL twice, you can use the <base> tag to make your life prettier. ^_^
The <base> tag must have a “href” or a target property.
