html tips

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:
        &nbsp;
        <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>

Leave a Reply

Your email address will not be published.

Recent post

Redux to a Next JS App
Redux to a Next JS App
  • July 16, 2021
How to Create Objects In JavaScript
How to Create Objects In JavaScript?
  • June 29, 2021
HTML forms
HTML Forms
  • June 23, 2021
Need a successful project?

Lets Work Together

Estimate Project
  • right image
  • Left Image