The hidden Attribute in HTML: How it Works with Examples

The HTML hidden attribute hides elements from users but keeps them in the code. You can use it when you want content to stay on the page but not appear.

What Does the hidden Attribute Do in HTML?

The hidden attribute tells the browser not to show the element. The tag stays in the page but does not display anything.

Browsers skip the hidden element and do not draw it on the screen. Screen readers may also ignore it based on the setup.

Here is the tag:

<div hidden>Some content</div>

You can place it on almost any element. It works on <div>, <p>, <input>, and others.

Here is another example:

<p hidden>This will not appear.</p>

This code stays in the document, but the browser does not show it.

The element becomes invisible. It also becomes unreachable by keyboard. In most cases, screen readers skip it. Some tools may still access the element.

You can store data inside a form without showing it.

<input type="hidden" name="user_id" value="67">

The user cannot see or change the value, but the server can receive it.

The Differences Between hidden and CSS display: none

hidden is an HTML tag. display: none is a CSS rule. Both hide the element from the page.

The hidden is easier and faster to apply in HTML. CSS display: none gives more control and can be changed with classes or media queries.

Use hidden for simple logic in HTML forms or with templates. Use display: none to control styles or apply changes with JavaScript.

Examples of The hidden Attribute in HTML

Hide a Section of Text:

<div hidden>This text is hidden from the user.</div>

This element does not appear on the screen. The browser does not draw it, and users can’t see or click it.

Use hidden with an Input Field

<form> <input type="hidden" name="status" value="active"> </form>

The form sends the status to the server. The user does not see the input, but it still works as part of the data.

Toggle Visibility with JavaScript

<p id="note" hidden>This note is now visible.</p> <button onclick="document.getElementById('note').hidden = false;">Show Note</button>

The hidden tag hides the message at first. When you click the button, JavaScript removes the tag and shows the note.

Use hidden for Dynamic Forms

<div id="extra" hidden> <label>More Info</label> <input type="text" name="info"> </div> <button onclick="document.getElementById('extra').hidden = false;">More</button>

This setup keeps extra form fields out of view. When the user clicks the button, more inputs appear and allow the user to enter data.

Wrapping Up

In this article you learned what the hidden attribute does and how browsers treat it. You also saw the difference between it and CSS display: none.

Here is a quick recap:

• The hidden keeps the element in the page but does not show it.
• It works well with inputs and static HTML.
• It does not take space and it blocks keyboard access.
• display: none is a CSS way that lets you change visibility with classes or media.

FAQs

Similar Reads