As developers, we all want to show our users something compelling, and it has to be useful.
In this article, we’ll discuss tips for making your development fun.
All techniques are described below with appropriate examples. ! [](https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200228184313/HTML-trics.png)
Top 5 HTML tips and tricks:

Color pickers: This trick is used for color pickers in input labels, where you can place the Type property with the value of Color to use the input field as a color picker.

Ex. : 

<! DOCTYPE html> <html> <head> <title>Color picker in input field</title> <style> .conatiner { text-align: center; } h1 { color: green; } </style> </head> <body> <div class="conatiner"> <h1>GeeksforGeeks</h1> <b>Color picker in input filed: </b> <input type="color"> </div> </body> </html>Copy the code
Output:

Document refresher: This technique is used to automatically refresh documents after the time mentioned. Use when there is no activity on your site. We can also define it in the Content property by using the HTTP-equiv = “refresh” property
The refreshTime.

Ex. :

<! DOCTYPE html> <html> <head> <title>Document Refresher</title> <meta http-equiv="refresh" content="10"> <style> .conatiner { text-align: center; } h1 { color: green; } </style> </head> <body> <div class="conatiner"> <h1>GeeksforGeeks</h1> <b>Document will refresh after 10sec</b> </div>  </body> </html>Copy the code
Output:

Theme color change
Editor:This trick is used to change the theme color of a web site by using the name = “theme-color” attribute
Theme colorsWe must define the color code in the Content property. This will change the color of the title bar and address it in the latest version of Chrome on Lollipop for Android.

** Note: ** This only works on mobile devices (Lolipop).

Ex. : 

<! DOCTYPE html> <html> <head> <title>Theme color changer</title> <meta name="theme-color" content="#26F809"> <style> .conatiner { text-align: center; } h1 { color: green; } </style> </head> <body> <div class="conatiner"> <h1>GeeksforGeeks</h1> <b>Theme color changer</b> </div> </body> </html>Copy the code
Icon Addler: This technique is used to add an icon to the position of the icon icon. You only need the path to the source file. Include the link tag within the Body tag, which will place an icon in your favorites location.

Ex. : 

<! DOCTYPE html> <html> <head> <title>Icon adder</title> <meta name="theme-color" content="green;" > <link rel="icon" href="/icon.ico" type="image/x-icon"/> <style> .conatiner { text-align: center; } h1 { color: green; } </style> </head> <body> <div class="conatiner"> <h1>GeeksforGeeks</h1> <b>Icon adder</b> </div> </body> </html>Copy the code
Output:

Speech recognition: This tip is used to add a voice search to an input field. Similar to Google search, it uses voice recognition to search. ** Note: ** This only works on mobile devices (Lolipop Google browser only).

Ex. : 

<! DOCTYPE html> <html> <head> <title>Voice recognition</title> <style> .conatiner { text-align: center; } h1 { color: green; } </style> </head> <body> <div class="conatiner"> <h1>GeeksforGeeks</h1> <b>Voice recognition</b> <input type="text" x-webkit-speech> </div> </body> </html>Copy the code

www.geeksforgeeks.org/top-5-html-…