DEV Community

Malik-Haziq
Malik-Haziq

Posted on • Edited on

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:43211234123">Make a call</a>
<a href="mailto:abc@gmail.com">Send an email</a>


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Here it is.
This image is showing color picker

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>


Enter fullscreen mode Exit fullscreen mode

Here! how it's look like.
This is a video showing the editable text

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>


Enter fullscreen mode Exit fullscreen mode

Image description

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

Picture showing progress bar

7) Disable option:

Use disable attribute to disable any element from options.



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


Enter fullscreen mode Exit fullscreen mode

You can see Mango is disabled

picture showing disabled option

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


Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
haidernqvi profile image
haidernqvi

This is very help full post