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.
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.
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.
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.
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.
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,