HTML Tips and Tricks: 20 You Won’t See in Most Tutorials

Performance tip. You can use the loading=lazy attribute to defer the loading of the image until the user scrolls to them.

Link to an email address with mailto:, start a phone call with tel: and open a text message with sms:. On phones they open the right app directly. A mailto: link can also pre-fill the subject and body, like mailto:hello@example.com?subject=Hi&body=Hello.

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

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

Screen readers announce the legend with every field inside, which makes groups of radio buttons and checkboxes much clearer. More form tricks in HTML input types.

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.

Modern browsers now treat target="_blank" as rel="noopener" by default, but adding rel="noopener noreferrer" yourself is still good practice for older browsers.

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

To open just one link in a new tab, add target="_blank" to that link instead (see tip 19 below).

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.

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

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

Add min, max and step to control the range, and recolor it with the CSS accent-color property. See all the other HTML input types.

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

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

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

Use the .webp image format to make images smaller and boost the performance of your website.

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

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

Mobile keyboards also show a search key. More in HTML input types.

Use the <pre> tag to present preformatted text exactly as written in the HTML file:

Add target="_blank" to the link. Include rel="noopener noreferrer" so the new page can’t access yours through window.opener (tip 7). Use it sparingly: opening new tabs unexpectedly can annoy readers.

Wrap the image in a link. The image’s alt text becomes the link text for screen readers and search engines, so describe where the link goes.