(Latest revision as of 19:55, 20 March 2012)
hidden
attributeAll 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. User agents should not
render elements that have the hidden
attribute specified.
In the following skeletal example, the attribute is used to hide the Web game's main screen until the user logs in:
<h1>The Example Game</h1> <section id="login"> <h2>Login</h2> <form> ... <!-- calls login() once the user's credentials have been checked --> </form> <script> function login() { // switch screens document.getElementById('login').hidden = true; document.getElementById('game').hidden = false; } </script> </section> <section id="game" hidden> ... </section>
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.
Elements that are not themselves hidden
must not hyperlink to
elements that are hidden
. The for
attributes of label
and
output
elements that are not themselves hidden
must similarly not refer to
elements that are hidden
. In both
cases, such references would cause user confusion.
Elements and scripts may, however, refer to elements that are
hidden
in other contexts.
For example, it would be incorrect to use the href
attribute to link to a
section marked with the hidden
attribute. If the content is not applicable or relevant, then there
is no reason to link to it.
It would be fine, however, to use the ARIA aria-describedby
attribute to
refer to descriptions that are themselves hidden
. While hiding the descriptions
implies that they are not useful alone, they could be written in
such a way that they are useful in the specific context of being
referenced from the images that they describe.
Similarly, a canvas
element with the hidden
attribute could be used by a
scripted graphics engine as an off-screen buffer, and a form
control could refer to a hidden form
element using its
form
attribute.
hidden
attribute are still active,
e.g. scripts and form controls in such sections still execute
and submit respectively. Only their presentation to the user
changes.
The hidden
IDL
attribute must reflect the content attribute of the
same name.