HTML - Global hidden Attribute

The Hidden is a HTML Global attribute indicates that the content of an element should not be displayed to the user. It can also be used to define the visibility of elements.

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

This attribute can take any one of these values−

  • An empty string, the keyword hidden − set the element's visibility to hidden.
  • The keyword until-found − sets the element to the hidden until found state.

Syntax

Following is the syntax of the hidden attribute −

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

Example

In the following example, we are creating an HTML document and using the hidden attribute and a different value to hide the content of the page, as follows −

<!DOCTYPE html>
<html>
<body>
   <span hidden>I'm hidden</span>
   <span>I'm not hidden</span>
   <span>I'm also not hidden </span>
   <span hidden="hidden">I'm also hidden</span>
   <span hidden="something else">I'm hidden too!</span>
</body>
</html>

On running the above code, the output window will pop up displaying the text on the webpage.

Example

Considering the another scenario, where we are going to use the div element and adding the hidden attribute.

<!DOCTYPE html>
<html>
<head>
   <title>hidden attribute</title>
</head>
<body>
   <h2>HTML hidden attribute</h2>
   <h1>tutorialspoint</h1>
   <div hidden> This content will be hidden while displaying the content </div>
   <h4>TutorialsPoint is an EdTech website that makes your life simple and easy learning!</h4>
</body>
</html>

When we run the above code, it will generate an output consisting of the text displayed on the webpage.

Example

Let's at the following example, we are creating an HTML document and using the hidden attributes without any value to hide some of the content when the browser renders it, as follows −

<!DOCTYPE html>
<html>
<head>
   <title>HTML hidden attribute</title>
</head>
<body>
   <h2>HTML hidden attribute</h2>
   <h1>GeeksforGeeks</h1>
   <p hidden=""> This is hidden paragraph, I will hide when browser will rendered </p>
   <p> Free Tutorials, Millions of Articles and Reference Api, 6000+ CS courses, and Math, Che, Phy, and Bio courses for 6th, 7th, 8th, 9th, 10th, 11th, and 12th </p>
</body>
</html>

On running the above code, the output window will pop up displaying the text on the webpage.

html_attributes_reference.htm
Advertisements