Treehouse

HTML5 hidden Attribute

By on  

HTML5 has given us some simple but incredibly useful HTML attributes:  placeholder, download, and autofocus to name few.  Another new attribute is the hidden attribute.  When applied to an element, the hidden attribute acts very much like CSS' display: none;  the element disappears from view and its dimensions collapse.  It's as simple as:

<div hidden>
	You can't see me!
</div>

If a given browser didn't support this attribute, you could likely style it via:

*[hidden] { display: none; }

So why use the hidden attribute?  It's more semantically correct and should more efficiently aid screen readers.  You'll even save a few characters on the display:none CSS!

ydkjs-3.png

Recent Features

  • Creating Scrolling Parallax Effects with&nbsp;CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • CSS 3D Folding&nbsp;Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • dwImageProtector Plugin for&nbsp;jQuery

    I've always been curious about the jQuery JavaScript library. jQuery has captured the hearts of web designers and developers everywhere and I've always wondered why. I've been told it's easy, which is probably why designers were so quick to adopt it NOT that designers...

  • Translate Content with the Google Translate API and&nbsp;JavaScript

    Note:  For this tutorial, I'm using version1 of the Google Translate API.  A newer REST-based version is available. In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be...

Discussion

  1. Max D

    AAaaaand moving presentation back to the HTML aren’t we.

    • “Hidden” has more meaning than visual presentation on a screen; think screen readers.

    • Sean M

      The hidden attribute has become extremely useful for us not only for accessibility, but automating quality assurance testing as well.

      The argument can be made for presentation, but it’s more a notion of states for objects/elements – and states can’t reside in the presentation layer alone.

      The checkbox element is a fair example. While the “checked” attribute clearly has a visual affect on a checkbox, the fact it has states that makes it much more meaningful.

  2. How is this more semantically correct? It’s not in my opinion.

    • Sean M

      Semantics has limitations. The question is it is needed and useful. Is it useful for objects to have states…?

  3. It’s weird:o)

  4. Chung Xa

    seems IE thinks it doesn’t make sense to support it

    • IE sense nothing, I dont understand why the hell that browser exists ?? There is only one thing i appreciate about it, and that is “we can download firefox with it” :)

  5. Nick Shebanov

    And, of course, it provides much cleaner way to output displayed/hidden state of a DOM element in your templates.

  6. As far as I understand it, screen readers don’t actually read elements set to display: none; though. Generally, if you want something hidden from view, but readable by screen readers, it’s best to have an offscreen class.

    I could see using this on an element that you want to display none initially, and then remove the attribute with JS for your state change, but accessibility wouldn’t be one of the reasons to use this.

  7. Ashutosh Singh

    Totally kool. for people who think that this is a presentation attribute it’s totally not, because this attribute tells browsers how to render the element on page. not how to style already rendered element. So I feel hidden is now where it belongs to “element attribute”

  8. Mark

    At this time, no accessibility API will pass this on to an aural AT and there is no aural AT that would understand it in this form anyway. The API would have to reinterpret the attribute, so that ends up being absolutely no different to parsing the equivalent CSS property. The only possible future advantage for accessibility is that a change in the DOM does tend to trigger a buffer refresh more reliably than a change in the CSS part of the API.
    This attribute and some other aspects of HTML5 are, at this time, more damaging to accessibility than helpful because they are not yet fit for use in the real world. Your use of the CSS property as a fall-back makes this point. Some patience and pragmatism are required with things like this.

  9. Steve

    Though I like the idea… doesn’t this fail miserably in older browsers?

    e.g. when browsers see a tag or attribute they don’t understand the rule is to ignore it… thus they would ignore the attribute and show the element!

    Likewise the CSS to select it relies on attribute selectors and we all know that Internet Explorer is horrible at obeying them in older versions.

    I think for now I prefer my “works everywhere” version…

    CSS:
    .hidden{display:none;}

    HTML:
    [div class="hidden"]You can’t see me right now, but if I tweak the CSS (e.g. the visual styling of the element) I can make it so you can see me[/div]

  10. How would one replace input[type=hidden]? That doesn’t make sense.

  11. You could argue that it’s more semantic, but then the name “hidden” is wrong. It’s the same as with b, i, u etc. tags which don’t have a semantic meaning.

    Now if you say screen reader, then “hidden” is just inappropriate. Maybe “ignored” (like enabled, disabled) or anything more representation-independent would have been a better choice.

  12. balaphp

    Hi This is nice, But how can we show this element? we should remove the hidden attribute or we have to add some classes.

    One more question will this support for jquery :hidden Selector ?

  13. Ah never realised that this was a new tag. Need to get properly brushed up on my HTML 5. Shall be reading around and hopefully will pick up more tips from you.

    Cheers

  14. Nicely Done.

  15. I’d like to see some research on this about how is actually interacts with screen readers. display:none actually isn’t accessible at all (it’s removed completely), that’s why we use top:-9999px; left:-9999px for skip links.

  16. Mark

    Tim, that is the point of the display:none property/value. One of the reasons for its existence is to prevent an element from being parsed by an accessibility API and therefore reflect its visual behaviour; and this (possibly not very well conceived) attribute is supposed to be doing the same thing. Also see my earlier comment.

  17. Do mobile websites still download the resource like when using display:none?

  18. gr8 article, definitely a great source for all web developers out there!!

  19. Well, ‘hidden’ attribute seems so comfortable but I still have one thing in doubt. HTMl are not always available to us because it is mixed with codings but CSS is. So, I think CSS ‘display: none’ is more useful than html5 attribute hidden. What do you say?

  20. webdev

    We already have two ways to hide objects: display=none and aria-hidden=true (the latter of which is expressly intended for screen readers). Why do we need a third?

    The W3c spec clearly states the attribute should not be used for content that could legitimately be shown in another presentation — like tabs or collapsible menus. The example above already gives no indication that using the “hidden” attribute to dynamically hide content is a direct violation of the spec.

  21. Jeroen Versteeg

    *[hidden] is a terrible selector, as poor browsers need to check every single DOM element.

  22. Crispen Smith

    I’m actually really glad to see this attribute, but I’d love to have a better support table for it over at canIuse.com or another similar resource.

    The spec does a really fantastic job of explaining exactly why it’s not a presentation level attribute (“When specified on an element, it indicates that the element is not yet, or is no longer, directly relevant to the page’s current state, or that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user. “)

    “Blue” is about presentation , “This element is used for another purpose than the current purpose of this page” is client-side business logic.

  23. “All HTML elements may have the hidden content attribute set. The hidden attribute is a boolean attribute. When specified on an element, it indicates that the element is not yet, or is no longer, directly relevant to the page’s current state, or that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user”

    “The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.”[1]

    [1] http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#the-hidden-attribute

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!