When building web pages, there are times when you might want to include content in the HTML that shouldn’t be visible to users—at least not right away. That’s where the hidden attribute in HTML comes in.
In this post, we’ll explore what the hidden attribute is, how it works, and when you might want to use it.
What Is the hidden Attribute?
The hidden attribute is a global HTML attribute that can be added to any HTML element to indicate that the element should not be displayed on the page. When an element has the hidden attribute, it will not appear in the layout or be visible to the user.
Here’s a simple example:
<p hidden>This paragraph is hidden and will not be displayed.</p>
This paragraph will exist in the DOM (Document Object Model), but it will not be rendered on the page.
How It Works
The hidden attribute is a Boolean attribute. This means you don’t need to assign it a value—just its presence is enough to apply the effect:
<div hidden>Secret content</div>
If you inspect the page with your browser’s developer tools, you’ll still see the element in the source code, but it won’t occupy any space on the page or be visible to users.
When Should You Use hidden?
Here are some common use cases for the hidden attribute:
1. Temporarily Hiding Content
If you have content that should only appear under certain conditions (e.g., when a user clicks a button), you can initially hide it with the hidden attribute and then reveal it using JavaScript.
<div id="moreInfo" hidden>
Here’s some additional information!
</div>
<button onclick="document.getElementById('moreInfo').hidden = false;">Show More</button>
2. Form Enhancements
You might use hidden to hold alternative messages or inputs that only appear based on user interactions.
3. Storing Data or Elements Not Yet Needed
Sometimes you might want to store elements in the DOM for performance or scripting reasons, even though they’re not needed immediately. hidden is a good fit for that.
Difference Between hidden and display: none
The hidden attribute is functionally similar to using style="display: none;" in CSS, but there are some subtle differences:
hiddenis declarative and semantic, which can improve readability and maintainability.- CSS
display: none;can be more flexible for dynamic styling or class-based approaches.
In practice, both methods are valid, and the choice often comes down to project needs and personal or team preference.
Accessibility Considerations
While hidden elements are not visible, they are also not accessible to assistive technologies like screen readers. If your goal is to visually hide content while keeping it accessible, consider using other techniques like aria-hidden or offscreen CSS positioning.
Conclusion
The HTML hidden attribute is a simple yet powerful tool for controlling what content is displayed to users. Whether you’re hiding extra information, building interactive features, or just keeping your markup clean, understanding how and when to use hidden can make your web development more effective.
Try experimenting with it in your next project and see how it helps manage content visibility in a clean, semantic way!
