Skip to content
Related Articles
Open in App
Not now

Related Articles

HTML hidden Attribute

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 02 Jun, 2022
Improve Article
Save Article

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 
  • Internet Explorer 11.0 and above
  • Microsoft Edge 12 and above
  • Firefox 
  • Opera 
  • Safari 

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!