HTML is more powerful than many developers realize! Beyond structuring web pages, it offers some hidden tricks that can enhance user experience and add useful functionalities with minimal effort.
In this article, we'll explore five amazing HTML tricks that can refresh pages automatically, enable voice recognition, disable right-click, provide a color picker, and even access the user's camera. Let’s dive in!
Time Page Refreshes & Redirect
You can add a special <meta> tag inside your document's head to refresh the page at a set interval or to redirect users to different websites after a set delay.
<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="30;https://google.com">
Add Voice Recognition
Voice Recognition : This tricks is used to add voice search in the input field. Like Google search, it searches on by voice recognition.
Note : This will only work on mobile devices(Lolipop only Google Chrome).
<input type="text" x-webkit-speech />
Disable Right Clicking
Sometimes you might want to disable the context menu of the browser on your web page when the user right clicks ! This can easily be done using a simple trick !
Prevent right clicking the entire web page
<body oncontextmenu="return false">
Prevent right clicking a specific element
<section oncontextmenu="return false">Not Allowed</section>
Add Color Picker
This is a really cool HTML trick!
with HTML5, there are some really interactive customizations that visitors to your website will like.
This feature will be particularly user-friendly for those new to coding or without a lot of coding knowledge.
<b>Color picker in input field: </b>
<input type="color">
Capturing The User's Camera
For those who are on mobile devices, you can use the <input /> tag with a capture attribute to open the user's cameras and allow them to take a photo or video to upload to your website! On desktop, the default behavior of uploading files is kept!
Opens back facing camera to take a video
<input type="file" capture="environment" accept="video/*">
Opens front facing camera to take a photo
<input type="file" capture="user" accept="photo/*">
These simple yet powerful HTML tricks can help you create more interactive and user-friendly web pages without relying on complex JavaScript or third-party plugins.
Whether you're looking to enhance usability, improve accessibility, or add some fun features, these techniques are a great addition to your toolkit. Try them out and see how they can improve your web projects! 🚀
💡 Let’s Connect!
📩 Email me at: getintouchwithvishnu@gmail.com
☕ Support my work: Buy me a Coffee
Top comments (1)
Great list! These tricks are super useful. Another handy one is the
downloadattribute for<a>, which allows users to download files directly. Thanks for sharing!