Ever wondered does HTML always have to be boring? No way! Here are 6 cool things you can do with HTML that you might not have known about!

1. Preload & cache assets 📥

Wondering how to preload and cache assets? It just requires a single line of code & you are done!

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

2. Add Custom Link Previews for the page 🖼️

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 (eg: Twitter Cards)

3. Redirect to another link ↪️

Redirecting users to other links (used commonly 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.

4. Make a call or mail 📞

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

<a href="tel:+919876543210">Call</a>
<a href="mailto:user@emaul.com">Mail</a>

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

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

When used with proper styling, it can even be used to create a WYSIWYG editor.

NOTE: Beware of the security issues that might arise when using this attribute, so steer clear of it if you are unaware of the implications.

That's all folks! 🎉

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Thanks for reading

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

I am a Digital Nomad and occasionally travel. Follow me on Instagram to check out what I am up to.

Follow my blogs for bi-weekly new tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
1. Front End Development Roadmap
2. Front End Project Ideas
Would you mentor me?

Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

6 Cool Things Boring Old HTML Can Do 🤯