HTML tricks

1. Attribute `loading = lazy`

Performance tip. You can use the attribute loading = lazyto postpone the loading of the image until the user taps on them.

<img src="https://habr.com/ru/company/timeweb/blog/556214/image.jpg" loading='lazy' alt="Alternative Text">  

2. Email, calls and SMS

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

3. Ordered lists with the `start` attribute

Use the attribute startto change the starting point for your ordered lists.

4. The meter element

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

5. HTML Native Search

6. Fieldset element

You can use the element fieldsetto group multiple controls as well as labels ( label ) in 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 safety and performance implications. Turn on rel = "noopener" or rel = "noreferrer"to prevent this from happening.

<a href="https://markodenic.com/" target="_blank" rel="noopener">
	Marko's website
</a>  

8. Base element

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

9. Clearing the Favicon cache

To update your website icon, you can force browsers to load the new version by adding ?v=2 to the file name.

This is especially useful in a production environment so that users get the new version.

<link rel="icon" href="/favicon.ico?v=2" />   

10. The spellcheck attribute

Use the attribute spellcheckto determine if the item can 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 element details to create native HTML accordion

13. The `mark` tag

You can use the tag mark to highlight text.

14. The download attribute

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

<a href="https://habr.com/ru/company/timeweb/blog/556214/path/to/file" download>
  Download
</a>           

15. Performance trick

Use an image format .webpto reduce image size and improve 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> 

16. Thumbnail for video

Use the attribute posterto specify the image to be displayed while the video is loading or until the user clicks the play button.

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

To be continued…

Similar Posts

Leave a Reply