In this section, we will learn what the hidden attribute is and how to use it in HTML.

HTML hide element with hidden attribute

The hidden attribute, as the name suggests, is used to hide an element in an HTML document.

Basically, browsers won’t render an element that has this attribute in its opening tag.

We use this attribute when want to keep users from seeing an element until they do some actions in an HTML document.

The `hidden` attribute is accessible in programming languages like JavaScript and with the help of this language, we can un-hide a hidden element. So basically, we can program in an HTML document to wait for a specific action from users and then visible the already hidden element in a document (or vice versa).

Note: for both hide and un-hide an HTML element, we can use JavaScript.

HTML hidden Attribute Syntax

<element hidden>

HTML hidden Attribute Values

The hidden attribute is a boolean attribute. That means we only need to put this element in the opening tag of an element. After that, the element becomes hidden in the document.

Example: hide a div in HTML

See the Pen hide a div in HTML by Omid Dehghan (@odchan1) on CodePen.

In this example, there’s a div element in the document. We then used JavaScript to access the <div> element and set its `hidden` attribute to true after a user clicked the button on the page.

Example: HTML button hidden

See the Pen HTML button hidden by Omid Dehghan (@odchan1) on CodePen.

In this example, there’s a hidden element in the HTML document. We then used JavaScript to access the button and un-hide it after a user clicked the paragraph.