Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML hidden Attribute

  • Difficulty Level : Basic
  • Last Updated : 14 Dec, 2021

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>

 Output:

HTML hidden Attribute

Supported Browsers:

  • Google Chrome 93.0 & above
  • Internet Explorer 11.0
  • Microsoft Edge 93.0
  • Firefox 92.0 & above
  • Opera 78.0
  • Safari 14.1

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!