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…
