HTML Tips


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!

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

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

Codepen Preview

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

See the Pen Base Element by Marko (@denic) on CodePen.

See the Pen Native HTML Search by Marko (@denic) on CodePen.

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

See the Pen Fieldset Element by Marko (@denic) on CodePen.

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>  

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

See the Pen Base Element by Marko (@denic) on CodePen.

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

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

Mark Tag implementation

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>  

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