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>
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"/>
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>
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.
Top comments (1)
This is very help full post