HTML Hidden Attribute

The HTML hidden attribute is used to hide an element from being displayed on a webpage. It is a Boolean attribute, which means you do not need to assign a value to it. When present, the attribute indicates that the element should not be presented to the user.

In this tutorial, you will learn how the HTML hidden attribute works, how to hide and show content, and how it differs from CSS visibility properties.

What Is the HTML Hidden Attribute?

The hidden attribute tells the browser that an HTML element is not currently relevant for display.

For example:

<p>This paragraph is visible.</p>

<p hidden>This paragraph is hidden.</p>

The first paragraph appears on the webpage, while the second is normally not displayed.

The hidden attribute is a global HTML attribute, so it can be used with many HTML elements.

HTML Hidden Attribute Syntax

The basic syntax is simple:

<tagname hidden>Content</tagname>

You can also write it with an explicit value:

<p hidden="hidden">This paragraph is hidden.</p>

Both examples indicate that the element should be hidden. In HTML, Boolean attributes are enabled by their presence, regardless of whether their value is written as the attribute name.

To display the element again, remove the hidden attribute.

Hiding HTML Elements with Examples

You can hide different types of HTML elements, including headings, paragraphs, images, and sections.

<!DOCTYPE html>
<html>
<head>
    <title>Hidden Attribute Example</title>
</head>
<body>

    <h1>HTML Hidden Attribute</h1>

    <p>This content is visible.</p>

    <div hidden>
        <h2>Extra Information</h2>
        <p>This section is hidden.</p>
    </div>

</body>
</html>

In this example, the browser displays the heading and visible paragraph. The div and its contents are normally hidden.

You can also use the HTML ID attribute to identify a specific element that you want to show or hide with JavaScript.

Showing and Hiding Content with JavaScript

The hidden attribute can be changed dynamically using JavaScript. This is useful for displaying additional information after a user clicks a button.

<button onclick="toggleContent()">Show or Hide</button>

<p id="details" hidden>
    Welcome to Web4Learners!
</p>

<script>
    function toggleContent() {
        const details = document.getElementById("details");
        details.hidden = !details.hidden;
    }
</script>

Here is how the code works:

• The paragraph starts hidden because it has the hidden attribute.
• When the user clicks the button, JavaScript finds the paragraph.
• The hidden property switches between true and false.
• The paragraph appears when hidden is removed and disappears when it is applied again.

This is a simple way to create interactive content without removing the element from the HTML document.

Difference Between Hidden Attribute and CSS Display

Both the HTML hidden attribute and CSS can hide content, but they are used differently.

Feature	Hidden Attribute	CSS display: none	CSS visibility: hidden
Purpose	Marks content as not currently relevant for display	Removes the element from the layout	Hides the element but preserves its layout space
Space occupied	Normally none	None	Preserved
How to show	Remove the attribute	Change the CSS display value	Change the visibility value
Typical use	Content that should not currently be presented	Layout and styling control	Temporarily hiding content while preserving space

For example:

<p hidden>This paragraph is hidden.</p>

<p style="display: none;">This paragraph is also hidden.</p>

<p style="visibility: hidden;">This paragraph is invisible but keeps its space.</p>

The third paragraph remains invisible while its layout space is preserved.

Important Things to Remember

• The hidden attribute is a Boolean HTML attribute.
• A hidden element is normally not displayed by the browser.
• You can remove the attribute to show the element again.
• JavaScript can control the hidden property dynamically.
• Hidden content should not be used as a security measure. Users may still inspect page source or browser developer tools.
• Avoid using the hidden attribute for content that must remain available to assistive technology. Choose an appropriate accessibility technique for your specific purpose.

Frequently Asked Questions

Is the HTML hidden attribute Boolean?

Yes. The attribute is enabled by its presence. You do not need to write hidden="true".

Can I use the hidden attribute with a button?

Yes. You can apply it to a button or many other HTML elements. When hidden, the button is normally not displayed.

Does the hidden attribute delete an element?

No. It hides the element from normal presentation but does not remove it from the HTML document.

Can JavaScript show a hidden element?

Yes. You can set the element’s hidden property to false to make it display again, provided other CSS rules do not prevent it from appearing.