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

Last Updated : 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>