hidden boolean attribute in html5

Example

Hidden paragraph:

<p hidden>这个段落应该被隐藏。</p>

Browser support

IE

Firefox

Chrome

Safari

Opera

All major browsers support the hidden attribute, except Internet Explorer.

Definition and usage

The hidden attribute is a Boolean attribute.

If this attribute is set, it specifies that the element is still or no longer relevant.

Browsers should not display elements that have the hidden attribute specified. The

hidden attribute can also be used to prevent the user from viewing an element until certain conditions are matched (such as a certain checkbox being selected). JavaScript can then remove the hidden attribute to make this element visible.

Differences between HTML 4.01 and HTML5

The hidden attribute is new in HTML5.

Differences between HTML and XHTML

In XHTML, attribute abbreviations are prohibited, and the hidden attribute must be defined as

Syntax

<element hidden>

HTML5 brings us many very simple but very powerful HTML attributes: placeholder, download, and autofocus, etc. Another new attribute is the hidden attribute. When a web page element has the hidden attribute, its behavior is very similar to CSS' display: none;. The element will disappear without occupying any page space. The writing method is very simple:

<div hidden>
	You can&#39;t see me!</div>

If you are using an old browser that does not support this attribute, you can add the following code to CSS to support it: :

*[hidden] { display: none; }

So, why? What about using the hidden attribute? The meaning is that it is more semantically meaningful and improves the readability of the code. And compared to display:none in CSS, it’s literally simpler!

The above is the detailed content of hidden boolean attribute in html5. For more information, please follow other related articles on the PHP Chinese website!