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:email@example.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.
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:
<time> tag defines a specific time (or datetime).
<time datetime="2022-01-18T14:00:00Z">January 18, 2022 2:00 PM</time>
datetime attribute is used to translate date and time into machine-readable formate.
6) Progress bar:
Want to show progress of anything. use
<progress value="75" max="100"></progress>
7) Disable option:
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:
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.
Latest comments (1)
This is very help full post