HTML5 Hidden Attribute

One of the new global attributes in HTML5 is the hidden attribute. It is not the most advanced or revolutionary attribute in HTML5, since all it does is actually to hide the content of the element.

To use it, all you have to do is to add it to an element, and you can see that the content is gone.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hidden attribute</title>
</head>
<body>
    <h1>Hidden attribute</h1>
    <div>I´m visible!</div>
    <div hidden>I´m invisible!</div>
</body>
</html>

Result:

screen

The purpose of this attribute is to tell the browser that its content is irrelevant as it is, but could be used to store elements or information that you might need to use with JavaScript for example.

Since it is not available in IE 10 and earlier (introduced in IE 11), the attribute will be ignored. To hide it in older browsers, all you have to do is to add some CSS:

<style>
    [hidden] {
        display: none;
    }
</style>

This is only going to hide the content as long as CSS is activated and parsed, while browsers with support for the attribute will hide the content whether or not CSS is activated.

No Comments