5 Cool HTML Tricks and Tips

by keshav

---

---

In this article, we'll go through some of the Cool HTML Tricks and Tips that will make your development more pleasurable. As developers, we all want to present the user with appealing content that is also valuable. All of the tricks are explained in detail below, along with an example.

1. Tool Tip:

You can make a simple tool-tip using the “span” tag. Tool-tips are the piece of text that is displayed when you hover over some elements in your webpage.

Following is an example to create a tooltip.

See the Pen
Tool-Tip by Vidyasheela (@_vidyasheela)
on CodePen.

2. Color Picker:

You can make your own color picker using a single line of code in HTML. The trick is you place the “type” property with the value of “color” to act the input field as a color picker. 

Following is an example to create a color picker.

 

See the Pen
html-color-picker by Vidyasheela (@_vidyasheela)
on CodePen.

Also Read:

• HTML tags cheat sheet [pdf included]
• How to make Sticky Nav Bar Using HTML and CSS?
• How To Make Show Password Button Using Javascript

3. Clickable Image Maps:

You can make any specified clickable area inside an image using the “maptag in HTML. The “mapcontains a number of “area” elements that define the clickable areas in the image map.

See the Pen
Clickable Image Maps by Vidyasheela (@_vidyasheela)
on CodePen.

4. Editable Contents:

In HTML you can make any element editable. All you have to do is set the “contenteditable” attribute to “true” on nearly any HTML element to make it editable.

Here's a simple example that creates a “div” element whose contents the user can edit.

 

See the Pen
Editable-elements by Vidyasheela (@_vidyasheela)
on CodePen.

5. Hidden Inputs:

A hidden input field lets web developers include data that cannot be seen or modified by users when a form is submitted. For example, a unique security token or the ID of the content that is presently being ordered or modified. In the displayed page, hidden inputs are completely invisible, and there is no method to make them visible in the content.

Note: While the value is not visible to the user in the content of the page, it may be viewed (and altered) using any browser's developer tools or "View Source" capabilities. So don’t use hidden inputs as means of security.

Following is the example to create hidden Inputs,

See the Pen
Hidden Inputs by Vidyasheela (@_vidyasheela)
on CodePen.

---