5 Cool HTML Tricks and Tips

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.

<span title=" Iam tool tip :)">Hover over me and wait to see Tool-tip</span>

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.

<input type="color" id="color" name="color" onchange="colorValue(this.value)" value="#e66465">

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 map tag in HTML. The map contains a number of area elements that define the clickable areas in the image map.

<img src="https://medplus.co.nz/media/thumbnails/blog/entry/2020/05/15/Green_and_red_800__600_horizontal.png.0x300_q90_crop-smart_upscale.png" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
<area shape="rect" coords="0,0,350,110" alt="Green" href="https://en.wikipedia.org/wiki/Green">

<area shape="rect" coords="0,110,350,220" alt="Cup of coffee" href="https://en.wikipedia.org/wiki/Red">
</map>

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.

<div contenteditable="true">
This peice of text can be edited by the user.
</div>

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 dont use hidden inputs as means of security.

Following is the example to create hidden Inputs,

<p> When the form is submitted the value Cust-55214 is send in the name Id</p>
<input type="hidden" id="Id" name="Id" value="Cust-55214">