6 Cool Things Boring Old HTML Can Do 🤯
Tags: webdev, programming, html, javascript
Published: 2022-10-16 07:17:55

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!

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

## 2. Add Custom Link Previews for the page 🖼️

![metadata](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgag0ukkklv9jonxhy8d.jpg)

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

```html
<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!

```html
<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!

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

## 5. Add a Color Picker 🎨

![color-picker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbdh01b6s2p6z5fto6dv.png)

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

```html
<input type="color" />
```

## 6. Editable Content ✏️

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

```html
<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**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

I am a Digital Nomad and occasionally travel. Follow me on [Instagram](https://www.instagram.com/tapajyotib/) to check out what I am up to.

Follow my blogs for **bi-weekly new tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

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

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.