HTML 'hidden' attribute

In nearly all of the projects I worked on before, I used to have a CSS helper class '.hidden' to hide the elements you may need to display later. Something like:

.hidden{
  display: none;
}

Today I learned that you can use the HTML attribute 'hidden' to hide your HTML elements.

<p hidden="hidden">This is a hidden paragraph.</p>

I believe this is a more semantic solution, specifically built for this problem. With the following CSS polyfill it will work with Internet Explorer down to version IE7.

[hidden]
  display: none