5 Amazing Hacks for HTML
Hi Devs,
I will show you 5 amazing hacks for HTML in this post. This article goes into detail on 5 amazing tricks and hacks for HTML. Everyone should know these hacks to make their HTML life easy. These are easy and amazing hacks.
So, let's get started one by one.
How to refresh & redirect page in HTML?
You can refresh & redirect the page with just an HTML meta tag. Did you hear about this hack before it? No problem, I will show you how can we do this. We can refresh and redirect the page with a unique meta tag inside your document's head.
<meta http-equiv="refresh" content="30">This meta tag will provide you with refreshing functionality in HTML. In the http-equiv attribute you will define action refresh and in the content attribute, you will define set time, then after a set timeout (time represents seconds), the page will refresh automatically.
<meta http-equiv="refresh" content="30;https://google.com">This meta tag will allow you to perform redirection in HTML. In the http-equiv attribute you will define action refresh and in the content attribute, you will define a set time and redirection path, then after a specified timeout (time represents seconds), the page will redirect automatically on the given path.
How to disable right click on website?
Sometimes we need to disable the context menu of the browser when the user right-clicks. We can get this with a simple attribute.
To prevent right-clicking on the entire web page, we need to use this attribute in the body tag.
<body oncontextmenu="return false">To prevent right-clicking on a specific area or element we can use this attribute in this way.
<section oncontextmenu="return false"> Right Clicking Disabled </section>How to capture the User's Camera and Microphone in HTML?
We can capture the user's camera and microphone with the use of <input/> tag. We will use the capture attribute inside the <input/> tag to allow users to take a photo or video or even audio to your website. It will work only on mobile devices. On the desktop, the default behavior of uploading files is choosing from the device.
Opens the back camera to take video or an image.
<input type="file" capture="environment" accept="video/*">
<input type="file" capture="environment" accept="image/*">Opens the front camera to take a selfie.
<input type="file" capture="user" accept="image/*">same as above, we can open an audio recording to get an audio file.
<input type="file" capture="user" accept="audio/*">How to create input suggestion list in HTML?
Sometimes we have to create an input with suggestions like countries or product searches. We can get this in a simple way with HTML.
<input type="text" list="countries">
<datalist id="countries">
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Canada">Canada</option>
<option value="Pakistan">Pakistan</option>
<option value="Albania">Albania</option>
<option value="Afghanistan">Afghanistan</option>
...
</datalist>How to make content editable in HTML?
You can make content editable on our web page like any input. This can be done with a simple HTML attribute.
<p contenteditable="true">You can edit this content</p>I hope, you will find it helpful.
Happy Coding :)
