HtmlConceptBeginner · 3 min read

What is Hidden Attribute in HTML: Simple Explanation and Usage

The hidden attribute in HTML is a Boolean attribute that hides an element from the webpage when present. It makes the element invisible and removes it from the page layout, but the element still exists in the HTML code.

⚙️

How It Works

The hidden attribute works like a simple switch that tells the browser not to show an element on the page. Imagine you have a note on your desk but you put it inside a drawer; the note is still there, but you can't see it. Similarly, when you add hidden to an HTML element, the browser hides it from view and does not allocate space for it.

Unlike using CSS to hide elements, the hidden attribute is a built-in HTML feature that browsers understand directly. It is a Boolean attribute, which means you just write hidden without any value, and the element becomes hidden. If you remove the attribute, the element shows up again.

💻

Example

This example shows a paragraph that is hidden using the hidden attribute. The paragraph will not appear on the page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hidden Attribute Example</title>
</head>
<body>
  <p>This paragraph is visible.</p>
  <p hidden>This paragraph is hidden and will not show on the page.</p>
</body>
</html>

Output

This paragraph is visible.

🎯

When to Use

The hidden attribute is useful when you want to keep some content in your HTML but not show it to users right away. For example, you might hide a message that appears only after a user clicks a button or completes a form.

It is also helpful for accessibility and scripting, where you want to toggle visibility without removing elements from the page structure. Since the element is still in the DOM, JavaScript can easily show or hide it by adding or removing the hidden attribute.

✅

Key Points

The hidden attribute hides elements without deleting them.
It is a Boolean attribute: just add hidden to hide, remove it to show.
Hidden elements do not take up space on the page.
JavaScript can toggle the hidden attribute to show or hide content dynamically.
It is a simple and semantic way to control visibility in HTML.

✅

Key Takeaways

The hidden attribute hides an element from view and layout without removing it from the HTML.

It is a Boolean attribute that requires no value, just presence to hide the element.

Use hidden to toggle visibility easily with HTML and JavaScript.

Hidden elements do not take up space on the page but remain in the DOM.

This attribute provides a simple, semantic way to manage element visibility.