Definition and Usage

The hidden attribute indicates that an element is hidden, meaning it is not visually rendered and is not accessible to screen readers.

Use this attribute when the element's content should not be presented to the user.

  • The hidden attribute is a global attribute that can be used on any HTML element.
  • It is a Boolean attribute, meaning you only need to include the attribute name without specifying a value.

Basic Example

HTML 
<style>
    p {
        padding: 1em;
        border: 1px solid #cdcd4c;
        border-radius: 0.5em;
        background-color: beige;
    }
</style>
<p>
    This content is important and should be read right away.
    <br>
    I'm really glad you found it! 😃
</p>

<!--
    As a Boolean attribute,
    only the attribute name is included
    without specifying a value.
-->
<p hidden>
    This content is not currently relevant to this page and should not be displayed.
    <br>
    There's nothing to see here. 😥
</p>
Add Emojis to Your Web Pages
Rendered Output

Features

Browsers do not render elements with the hidden attribute. As a result, elements with the hidden attribute have the following characteristics:

  • They are not displayed on the screen.
  • They do not take up any space in the layout.
  • They are hidden from all forms of presentation, including screen readers and other assistive technologies.

By default, browsers apply display: none to elements with the hidden attribute.

The Difference Between Using the HTML hidden Attribute and CSS display: none

Even without the HTML hidden attribute, applying CSS display: none to an element results in nearly identical browser behavior.
The element is not displayed, occupies no space, and is hidden from screen readers.

However, there is a fundamental distinction between using the HTML hidden attribute and CSS display: none.
The key difference lies in the intended purpose.

Difference Between the HTML hidden Attribute and CSS display: none
HTML hidden Used to explicitly define in the HTML that the content is currently irrelevant and should not be presented to the user.
(Semantic Importance)
CSS display: none Used primarily to hide an element visually as a matter of styling.
(Presentational Importance)

Usage Notes

Even if an element has the HTML hidden attribute, its visibility can be overridden using the CSS display property.
Browsers apply display: none as the default style for elements with the hidden attribute, but this default behavior can be redefined through CSS.

Let's examine this with the following example.

HTML 
<style>
    p {
        padding: 1em;
        border: 1px solid #cdcd4c;
        border-radius: 0.5em;
        background-color: beige;
    }
</style>
<p>
    This content is important and should be read right away.
    <br>
    I'm really glad you found it! 😃
</p>
<p hidden style="display: block;">
    This content is not currently relevant to this page and should not be displayed.
    <br>
    There's nothing to see here. 😥
</p>
Rendered Output

As shown in the example above, you can override the default display: none behavior by assigning a different display value, such as display: block or display: flex.

However, the hidden attribute is a semantic indicator that an element is hidden, ensuring it is neither visually rendered nor accessible to screen readers. For this reason, you must exercise caution when overriding this attribute's default behavior to avoid creating semantic contradictions.

Practical Example

Since browsers do not render elements with the hidden attribute, you might think it is better to omit those elements from the markup entirely.

However, modern web pages rely heavily on JavaScript to deliver dynamic content. In these scenarios, the hidden attribute becomes incredibly useful for managing content that needs to be toggled dynamically.

Let's examine this through an example.

This example has been adapted from the MDN - HTMLElement: hidden property documentation.

The following example demonstrates how a hidden block is used to store a "Thank you" message that only appears after the user agrees to a specific request.

CSS Styles for the example 
.card {
    text-align: center;
    padding: 1.5em;
    background: rgba(251, 233, 235, 0.5);
    border: 1px solid red;
    border-radius: 0.5em;
    max-width: 300px;
    margin: auto;
}
#agree.card {
    border-color: green;
    background: rgba(235, 250, 235, 0.6);
}

The HTML includes two cards: a welcome card that asks the user for permission to view the content, and a second card that is initially hidden using the hidden attribute.

HTML 
<div role="dialog" class="card" id="welcome">
    <h3>Welcome!</h3>
    <p>Click the "Agree" button to view our awesome content.</p>
    <button type="button" id="agreeButton">Agree</button>
</div>
<div class="card" id="agree" hidden>
    <h3>Thank You!</h3>
    <p>We hope you have a wonderful day.</p>
</div>
HTML role Attribute

When the "Agree" button is clicked, the welcome card is hidden by setting its hidden property to true. Simultaneously, the hidden property of the "Thank You!" card is set to false, making it visible on the screen.

JavaScript 
const agreeButton = document.getElementById("agreeButton");

agreeButton.addEventListener("click", () => {
    document.getElementById("welcome").hidden = true;
    document.getElementById("agree").hidden = false;
});

You can see the result in action below.

Rendered Output Click the "Agree" button!

As demonstrated in this example, the hidden attribute is a powerful tool when combined with JavaScript to manage dynamic content effectively.

Browser Compatibility

Browser compatibility for the hidden Attribute
Attribute
Desktop Chrome
Chrome
Desktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
hidden 10 12 4 5.1

Specifications

Specification for the hidden Attribute
Specification
hidden HTML Standard
#the-hidden-attribute

References

See Also