O'Reilly

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!

Track.js Error Reporting

Recent Features

  • An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • Duplicate the jQuery Homepage Tooltips

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: The amount of jQuery required to duplicate this effect is next to nothing;  in fact, there's more CSS than there is jQuery code!  Let's explore how we can duplicate jQuery's tooltip effect. The HTML The overall...

  • Sexy Opacity Animation with MooTools or jQuery

    A big part of the sexiness that is Apple software is Apple's use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I've put together an example of a sexy opacity animation technique...

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.

    • Dany

      Well @webdev, the spec also says that the hidden attribute is about the state of the page:

      “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”

      For example, when you have a textarea for comments and a submit button, and the textarea is empty, the idea is to use the hidden attribute to hide the submit button (although disabling it might be a better idea in this case) because you cannot submit an empty comment.

      The second part means that you may want to use the hidden attribute for things like templates (even though there’s a template tag now as well). Other uses include for example XML content embedded in the document that you access, e.g. a mini-database for suggestions or similar.

    • Steve

      The idea of using XML in the page scares me greatly. Microsoft tried that in IE and killed it completely in IE10 https://msdn.microsoft.com/en-us/library/ie/hh801224%28v=vs.85%29.aspx (Conceptually its a bad design, if you want “external” data for the page, load some JSON instead)

      I guess the question comes back to this. We already have 6 methods for hiding content with different purposes/intentions.
      1.) display:none
      2.) visibility:hidden (don’t show, but still hold the space)
      3.) opacity:0
      4.) width:0;height:0
      5.) aria-hidden="true"
      6.) and in the case of form data, input type="hidden"

      I’m struggling to see what can’t be done now (without the new hidden attribute) and what problem the (not backwards compatible) new attribute solves?

      Especially when now to determine if an element is *really*, *really* hidden/visible I need to run an even larger set of tests to be sure.

  21. Jeroen Versteeg

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

    • Dany

      But it is also excellent in that it fixes the problem you get when you use a framework like Bootstrap which specifies display: inline-block for buttons. Chrome (and probably other browsers) will then display the buttons even if they have the hidden attribute. The selector solves this problem.

    • Mathias

      Every selector needs to check every 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!

Recently on David Walsh Blog

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...