Five Cool HTML Tricks That Every Developer Should Know in 2021

vidyasheela
2 min readSep 23, 2021

--

HTML Tips and Tricks

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.

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.

https://vidyasheela.com/post/5-cool-html-tricks-and-tips

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.

https://vidyasheela.com/post/5-cool-html-tricks-and-tips

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.

Following is the example of an Image map

https://vidyasheela.com/post/5-cool-html-tricks-and-tips

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.

https://vidyasheela.com/post/5-cool-html-tricks-and-tips

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,

https://vidyasheela.com/post/5-cool-html-tricks-and-tips

--

--

vidyasheela
vidyasheela

Written by vidyasheela

Educational Website {http://vidyasheela.com} || Free website templates, web pages and widgets #HTML #CSS || Free tutorials on AI, ML, DL and Computer Programing

No responses yet