HTML cool things

Here are some HTML tips and tricks that people usually don't know.

1) Make a call or mail:

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

<a href="tel:[phone]">Make a call</a>
<a href="mailto:[e-mail]">Send an email</a>

2) Add a color picker:

Need a color picker to you webpage? No need to use any libraries. It's just one line far.

<input type="color"/>

Here it is.

3) Editabele Content:

Make you any content editable by just adding the contenteditable attribute to the element.

<p contenteditable="true">
   This is a paragraph
</p>

Here! how it's look like.

GIF

4) Mark tag:

Got something that is very important and wanna highlight it?
Here is the solution.

<p>It is very <mark>Important</mark></p>

5) Time tag:

The <time> tag defines a specific time (or datetime).

<time datetime="2022-01-18T14:00:00Z">January 18, 2022 2:00 PM</time>

The datetime attribute is used to translate date and time into machine-readable formate.

6) Progress bar:

Want to show progress of anything. use progress tag.

<progress value="75" max="100"></progress>

7) Disable option:

Use disable attribute to disable any element from options.

 <select>
   <option>Apple</option>
   <option>Orange</option>
   <option disabled>Mango</option>
 </select>

You can see Mango is disabled

8) Lazy Loading Image:

The loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them.

<img src="image.jpg" loading="lazy" alt="Some detail mentioned">

Hope you liked this post. If you got something to say Comment section is for you.

Comments

[haidernqvi]

This is very help full post