How many HTML 5 tricks do you have in your tool belt? Whenever you need to reduce the need for custom code, simplify common tasks, add specific desktop functionality, or simplify your in-browser work on a website, will “tricks” become your precious trump card? Well, it’s never too “clunky”, right? That’s why we’ve prepared for you a list of cool things you can do with HTML 5 that you may not be familiar with.
1. 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.
<meta http-equiv="refresh" content="30"›
<meta http-equiv="refresh" content="30;https://google.com"›
2. 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 />
3. Disable Right Clicking
Sometimes you might want to disable the context menu of the browser on your _ page when the user right clicks ! This can easily be done using a simple t !
Prevent right clicking the entire web page
<body oncontextmenu="return falf
Prevent right clicking a specific element
<section oncontextmenu="return false">Not Allowed.
4. 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 filed:
5. Capturing The User’s Camera
For users 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 prick 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="image/*">
6. Recolor The Toolbar
Just type in the magic formula
<meta name="theme-color" content="#FFFFFF"/> and let it work its “spell”: recoloring your browser UI when viewing your website.
7. Edit Content Right Within Your Browser
Convenience at its best! This is how you could call the
<h1 contentEditable>Hello World</h1> trick that you can pull in HTML 5.
It empowers you to edit the content on your website right inside your web browser! Just click the content that you need to edit and start typing in.
And this is the list of cool things that you can do with HTML 5 looks like!
Were you already familiar with (some of) them? What other great HTML and CSS “tricks” have you added to your own tool belt. Feel free to share them in the comments section below!