6 Cool Things You Can Do With HTML

01

of 06

Preload & Cache Assets

The HTML rel=”preload” attribute is used to hint to the browser that a particular resource should be preloaded and cached.

<link 
     rel="preload"
     href="https://example.com/asset.png"
     as="image" />

02

of 06

Custom Link Previews

Mystified by how link previews are generated? All it needs are the meta tags!

<meta property="og:title" content="Page title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="https://example.com/asset.png" />

The meta tags shown above use Open Graph Protocol, you can use any meta tag generator to generate the tags for all the other platforms.

03

of 06

Redirect To Another Link

Redirecting users to other links (used after payment confirmation) is just a single line of code away!

<meta
   http-equiv="refresh"
   content="3;
   url=https://google.com/"
/>

The above code will redirect the user to Google after 3 seconds.

04

of 06

Make A Call Or Mail

Need a link to make a call or mail? a tag to the rescue!

<a href="tel: 1234567890">Call</a>
<a href="mailto:[email protected]">Mail</a>

05

of 06

Add A Color Picker

Want to add a color picker to your website? One line is all you need, no fancy libraries or even JavaScript required!

<input type="color"/>

06

of 06

Editable Content

You can make any content editable by just adding the contenteditable attribute to the element.

<p contenteditable="true">
    This is an editable paragraph
</p>