HTML5 attribute hidden equivalent to CSS’ display:none


While I am becoming more and more aware of some of the key features of HTML5 I would like you to know that there is a new attribute that you can make use of which is called

This attribute serves exactly the same thing that our old friend display:none does

So in CSS we used this

[geshi lang=”css” nums=”1″ target=”_self” ]

And then we apply the above style to an element as

Now lets do the exact same thing with our new HTML5 friend “the hidden attribute”

We can use hidden attribute 3 ways.

As bool

As string literal

or as an empty string literal



Browser support

No surprises here that IE does not support it. All other major browser do support it which includes firefox, chrome, opera, safari

Using hidden attribute With jQuery

This is pretty simple and we will do it the standard way we add attribute to an element

Here is a quick example

As you can see that the element with ID hide_this_element will not appear on the page as a result of above jQuery code.

jQuery with fallback


I am in double mind to use it because there are few HTML things that when kept to HTML core looks more syntactically correct but anyone can argue on this point. I will.

For the time being though I will still be using my beloved CSS display: property.

It will be another few years before we see standards getting adopted by major browsers as soon as they become standards. I hope 🙂

I hope that you find this writeup useful.

As always your comments are always welcomed


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.