How to detect HTML 5 is supported or not in the browser ?

10 Nov, 2021
HTML 5 is the latest standard of HTML that includes many new changes and features. HTML 5 support can be detected by using three approaches:Method 1: Checking for Geolocation support: The Geolocation API was added in HTML5. It is used for identifying the user’s location. The presence of this API could be detected by checking if the geolocation property is present in the navigator object. This is done by using navigator.geolocation which returns the Geolocation object. If the object exists, it means that HTML5 is supported by the browser.Example:  
html
<!DOCTYPE html><html> <head>    <title>        How to detect HTML 5 is supported        or not in the browser ?    </title></head> <body>    <h1 style="color: green">        GeeksforGeeks    </h1>         <b>        How to detect HTML5 support        in the browser ?    </b>          <p>        Geolocation features is added in HTML5.        Checking the Geolocation supports.    </p>           <p>        Click on the button to check        for Geolocation support    </p>           <p>        Gelocation is supported:        <span class="output"></span>    </p>          <button onclick="checkGeolocation()">        Check for Geolocation    </button>         <script type="text/javascript">                 function checkGeolocation() {            if (navigator.geolocation)                isSupported = true;            else                isSupported = false;             document.querySelector('.output').textContent                    = isSupported;        }    </script></body> </html>
Output:  
Before clicking the button:  
After clicking the button:  
Method 2: Checking for the canvas element: The canvas element is used to render shapes or bitmap elements. This is a new feature added in HTML5. The canvas element has a getContext() method which is used to return the drawing context of the canvas element. It returns a null value if the context identifier is not supported. This property can be used to check whether the canvas element is supported. A new canvas element is created using the document.createElement() method. The getContext method is checked by accessing it on the created input object. The result of this expression is checked with an if-statement. If the result is true, it means that HTML5 is supported by the browser.Example:  
html
<!DOCTYPE html><html>     <head>    <title>        How to detect HTML 5 is supported        or not in the browser ?    </title></head> <body>    <h1 style="color: green">        GeeksforGeeks    </h1>         <b>        How to detect that HTML5 is        not supported by JavaScript?    </b>          <p>        The Canvas features added in HTML5. Checking        for canvas support in HTML5.    </p>           <p>        Click on the button to check        for Canvas support    </p>           <p>        Canvas is supported:        <span class="output"></span>    </p>          <button onclick="checkCanvas()">        Check for canvas    </button>         <script type="text/javascript">        function checkCanvas() {                         if (document.createElement('canvas').getContext)                isSupported = true;            else                isSupported = false;                         document.querySelector('.output').textContent                    = isSupported;        }    </script></body> </html>
Output:  
Before clicking the button:  
After clicking the button:  
Method 3: Checking for text input types: HTML5 introduced new input types that can be used to enter different forms of data with validation. The input element before HTML5 didn’t support these new types and using them would automatically revert to the default ‘text’ type. This can be used to check if the browser supports HTML5. A new input element is created using the document.createElement() method. The setAttribute method is then used on the created element to set the type of input to any of the newer input types. The type of this element is checked using an if-statement to see whether it matches the default ‘text’ value. If the value does not revert back to the default setting, it means that HTML5 is supported by the browser.Example:  
html
<!DOCTYPE html><html> <head>    <title>        How to detect HTML 5 is supported        or not in the browser ?    </title></head> <body>    <h1 style="color: green">        GeeksforGeeks    </h1>         <b>        How to detect HTML5 support        in the browser ?    </b>          <p>        New input types are one of the        features added in HTML5. <br>        Checking for the new input types        means that HTML5 is supported.    </p>           <p>        Click on the button to check if        the new input types are supported    </p>           <p>        New input types supported:        <span class="output"></span>    </p>          <button onclick="checkInputType()">        Check for input types    </button>         <script type="text/javascript">        function checkInputType() {            let tempElement = document.createElement("input");            tempElement.setAttribute("type", "color");             // Check if the type attribute falls back            // to default text type            if (tempElement.type !== "text")                isSupported = true;            else                isSupported = false;                     document.querySelector('.output').textContent                    = isSupported;        }    </script></body> </html>
Output:  
Before clicking the button:  
After clicking the button:  
 
rajeev0719singh
JavaScript-Misc
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to append HTML code to a div using JavaScript ?