English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML Reference Manual

HTML tag大全

HTML hidden attribute

The global attribute hidden is a boolean attribute that indicates an element is not yet or no longer relevant. For example, it can be used to hide a page element until the login is completed. If an element has this attribute set, it will not be displayed.

HTML Global Attributes

Changing the CSS display property of an element with the hidden attribute will override this behavior. For example, if the element is set to display: flex, it will be displayed even though the hidden attribute is set

Online Example

Demonstration of hidden paragraphs and normal paragraphs:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML hidden attribute usage (Basic Tutorial Website oldtoolbag.com)</title>
</<head>
<body>
<p hidden="hidden">This is a paragraph that is hidden.</p>
<p>This is a paragraph that is normally visible.</p>
</body>
</html>
Test and see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support.

Definition and Usage

  1. The hidden attribute is a boolean attribute.

  2. If it exists, it specifies that an element is not yet relevant or no longer relevant.

  3. Browsers should not display elements with the specified hidden attribute.

  4. The hidden attribute can also be used to prevent users from seeing an element until certain other conditions are met (such as checking a checkbox, etc.). Then, JavaScript can remove the hidden attribute and make the element visible.

HTML 4.01 differences with HTML5differences

The hidden attribute is an HTML5 new attributes.

Differences between HTML and XHTML

In XHTML, attributes are not allowed to be abbreviated, and the hidden attribute must be defined as <element hidden="hidden">.

Syntax

        <element hidden>


HTML Global Attributes