Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML hidden Attribute

  • Difficulty Level : Basic
  • Last Updated : 27 Sep, 2021

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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:



This attribute 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 hide the content or element to render it from the users, until some other condition 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: 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:

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!