Back to the basics: front end tips and tricks in 2021 (I)

html front end tips and tricks

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.

Even though HTML can be repetitive and boring, I’m sure that these tips and tricks can help developers on a working day basis. Give them a try and tell us what you think! 

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top