HTML hidden Global Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The hidden HTML global attribute is a Boolean attribute that specifies whether the element is hidden. It can be used on any HTML element, including elements that are not defined in the HTML standard.

When the hidden attribute is present, the browser will not render the element. This can be useful for hiding elements that are not yet relevant, such as a login form that is only displayed when a user is not logged in.

The hidden attribute can also be used to hide elements dynamically. For example, you could use JavaScript to remove the hidden attribute from an element when a user clicks a button. This would make the element visible to the user.

Here is an example of how to use the hidden attribute:

<div hidden>
  This element is hidden.
</div>

You can also use the hidden attribute to hide elements based on the state of the page. For example, you could hide a login form when a user is logged in:

<form hidden id="login-form">
  ...
</form>

Then, in JavaScript, you could remove the hidden attribute from the login-form element when a user logs out:

function logout() {
  document.getElementById('login-form').removeAttribute('hidden');
}

Syntax

<element hidden>

Values

hiddenAn attribute value is required only in XHTML.

Example

HTML

<p>The paragraph is important, so it is visible to everyone, however you will not be able to see the following link!</p> 

<a href="#" hidden>Hidden link.</a>

Result

Editor