HTML - hidden Attribute

HTML hidden is global attribute used to temporarily hide elements for user’s visibility. This attribute mostly used when there is condition likes user must login to see.

For example, it is used to hide elements of the page that can’t be used until the login process has been completed. Once login is completed JavaScript code can be used to make it visible.

Syntax

<element hidden> ...content</element>

Applies On

The hidden attribute can be applied to any HTML element to make it hide from user. However there are some elements that typically do not support or are not practical for hiding, for example tags like <html>, <head>, <title> are unhidable.

Example of HTML hidden Attribute

Below examples will illustrate the HTML hidden attribute, where and how we should use this attribute!

Hide a span Element

In the following example, we have create a sentence and keep a keyword inside of <span> tag where we used hidden attribute to hide the 'space' word.

<!DOCTYPE html>
<html>

<body>
    <h3>HTML hidden Attribute</h3>
    <p>
        <!-- HTML hidden Attribute used on span Tag -->
        A hidden element does not take <span hidden>space</span> as well
    </p>
</body>

</html>

Hide image Element

In this example we will hide the img element in the same approach, we can directly apply hidden attribute on img tag.

<!DOCTYPE html>
<html lang="en">

<body> 
    <h3>HTML hidden Attribute</h3>
    <strong>This image is not hidden</strong>
    <br>
    <img src="html/images/html.jpg" alt="Image 1" width="200"> 
    <br> 
    <strong>This image is hidden</strong>
    <br>
    <img src="html/images/html.jpg" alt="Image 4" width="200" hidden> 
</body>

</html>

Hidden Element space occupy

Here in this example we will create three div and set border to check if we hide the div does it occupy the space or not.

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div{
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body> 
    <h3>HTML hidden Attribute</h3>
    <div>
        <p>This is paragraph Element inside of a div Element</p>
    </div>
    <br>
    <div hidden>
        <p>This is paragraph Element inside of a div Element</p>
    </div>
    <br>
    <div>
        <p>This is paragraph Element inside of a div Element</p>
    </div>
    <p>
        Note: If you remove the hidden keyword from second 
        div element you can will see the gap between the div 
        reduce that is because of <br> tag.
    </p>
</body>

</html>

Supported Browsers

Attribute
hidden	Yes 6.0	Yes 11.0	Yes 4.0	Yes 5.1	Yes 11.1

html_attributes_reference.htm