In this article, I will share with you some very useful HTML tips. Let’s start!
This is a Performance tip. You can use the loading=lazy attribute to defer the loading of the image until the user scrolls to them.
<img src='image. jpg' loading='lazy' alt='Alternative Text'>
Use the webp image format to make images smaller and boost the performance of your website.
<picture>
<!-- load .webp image if supported -->
<source srcset="logo.webp" type="image/webp">
<!-- Fallback if .webp images or <picture> tag not supported by the browser. -->
<img src="logo.png" alt="logo">
</picture>
Use the type=’search” for your search inputs and you get the “clear” button for free.
<form>
<label for="text">Input Type Text</label>
<input type="text" id="text" name="text">
<label for="search">Input Type Search</label>
<input type="search" id="'search" name="search">
</form>
To refresh your website’s favicon you can force browsers to download a new version by adding ?v=2 to the filename.
This is especially helpful in production to make sure the users get the new version.
<link rel="icon" href="/favicon.ico?y=2" />
If you want to open all links in the document in a new tab, you can use <base> element.
<head>
<base target="_blank">
</head>
<!-- This link will open in a new tab. -->
<div class="wrapper">
This link will be opened in a new tab:
<a href="http://localhost/codelearner/"> Free Code
Tools
</a>
<p>Read more: <br><a href="https:// developer.mozilla.org/en- US/docs/Web/HTML/Element/base">
MDN Documentation
</a>
</p>
</div>
Pages opened with target=”_blank” allow the new page to access the original’s window.opener. This can have security and performance implications. Include rel=”noopener” or rel=”noreferrer” to prevent this.
<a href="" target="_blank">Click me - no rel attribute</a>
<a href="" target="_blank" rel="noopener"> Click me - rel="noopener" attribute </a>
<a href="" target="_blank" rel="noopener noreferrer"> Click me - rel="noopener noreferrer" attribute </a>
<pre id="log"></pre>