In this article, I will share with you some very useful HTML tips. Enjoy!
* Post will be updated regularly with new tips!

But first, what is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Let’s start!

1. The `loading=lazy` attribute

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'>           
    

Copy

2. Email, call, and SMS links:

          
<a href="mailto:{email}?subject={subject}&body={content}">
  Send us an email
</a>

<a href="tel:{phone}">
  Call us
</a>

<a href="sms:{phone}?body={content}">
  Send us a message
</a>           
    

Copy

3. Ordered lists `start` attribute.

Use the start attribute to change the starting point for your ordered lists.

4. The `meter` element

You can use the <meter> element to display quantities. No JavaScript/CSS needed.

5. HTML Native Search

6. Fieldset Element

You can use the <fieldset> element to group several controls as well as labels (<label>) within a web form.

7. Window.opener

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="https://markodenic.com/" target="_blank" rel="noopener">
	Marko's website
</a>           
    

Copy

8. Base Element

If you want to open all links in the document in a new tab, you can use <base> element:

9. Favicon cache busting

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?v=2" />           
    

Copy

10. The `spellcheck` attribute

Use the spellcheck attribute to define whether the element may be checked for spelling errors.

11. Native HTML sliders

You can use <input type="range"> to create sliders.

12. HTML Accordion

You can use the details element to create a native HTML accordion.

13. `mark` tag

You can use the <mark> tag to highlight text.

📷

14. `download` attribute

You can use the download attribute in your links to download the file instead of navigating to it.

          
<a href='path/to/file' download>
  Download
</a>           
    

Copy

15. Performance tip

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>           
    

Copy

16. Video thumbnail

Use the poster attribute to specify an image to be shown while the video is downloading, or until the user hits the play button.

          
<video poster="path/to/image">           
    

Copy

17. input type="search"

Use the type="search" for your search inputs and you get the “clear” button for free.

To be continued…