HTML cool things

Fida Jafri — Tue, 02 Jul 2024 17:35:57 +0000

1) Make a call or mail:
Need a link to make a call or mail? a tag to the rescue
Make a call
Send an email
2) Add a color picker:
Need a color picker to you webpage? No need to use any libraries. It's just one line far.

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.

This is a paragraph

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

4) Mark tag:
Got something that is very important and wanna highlight it?
Here is the solution.

It is very Important

Image description

5) Time tag:
The tag defines a specific time (or datetime).
January 18, 2022 2:00 PM
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.

Picture showing progress bar

7) Disable option:
Use disable attribute to disable any element from options.

Apple
Orange
Mango

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.

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

DEV Community: Fida Jafri

HTML cool things