DEV Community

keshavs759
keshavs759

Posted on • Originally published at vidyasheela.com

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>

  1. 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:

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

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

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

<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">


Discussion (0)