HTML hidden Attribute

The hidden attribute in HTML is used to define the visibility of elements. It contains a boolean value. It is a semantic indicator of state in HTML code. If this attribute is used then browsers will not display elements that have the hidden attribute specified. The hidden attribute can be seen using some condition or JavaScript used to see the hidden content. This attribute can be beneficial to use in order to keep hiding the content or element to render it from the users, until some other condition is to be met such as selecting a checkbox, etc.

Syntax:

<element hidden>

Note: This attribute is new in HTML 5.

Supported Tags: This is a Global attribute, and can be used on any HTML element.

Example 1: This simple example illustrates hiding the content from the user by using the hidden attribute with the <div> element in HTML.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>hidden attribute</title>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML hidden attribute</h2>
     
    <!-- hidden paragraph -->
    <div hidden>
      This content will be hidden while
      displaying the content
    </div>
    <h4>A computer science portal for geeks</h4>
</body>
</html>

Output:

HTML hidden Attribute

Example 2: In this example, we have used the hidden attribute that will hide the content while rendering it to the browser.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>HTML hidden attribute</title>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML hidden attribute</h2>
     
    <!-- hidden paragraph -->
    <p hidden>
        We provide a variety of
        services for you to learn,
        thrive and also have fun!
    </p>
 
     
<p>
       Free Tutorials, Millions of
       Articles, Live, Online and
       Classroom Courses
    </p>
 
 
 
</body>
</html>