DEV Community


Posted on • Updated on


HTML cool things that you can do

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

   <option disabled>Mango</option>
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)

haidernqvi profile image

This is very help full post

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.