HTML and CSS Reference
In-Depth Information
view, it can be targeted via JavaScript, for example, and displayed by removing the
attribute.
Where the concerns lie is in the misunderstanding and abuse of this attribute. It is
not
to be used for the temporary show/hide that you may encounter with tabbed content
and the like. Further, we already have CSS solutions that address the display of content,
such as
display: none
and
visibility: hidden
.
There is semantic value in
hidden
, though, especially compared to the CSS alternative.
If this attribute remains in the specification, over time the concerns may prove
unwarranted.
Just remember: do
not
use
hidden
for presentational purposes and don't
rely on browsers to actually
hide
the content. Use it only for semantic
purposes and use CSS to control presentation.
See Also
Peter Beverloo's article “Thoughts on the HTML5 hidden attribute” at
http://peter.sh/
1.20 Making Portions of a Page Editable
Problem
You want to allow users to directly edit content in the browser.
Solution
Add the
contenteditable
attribute to the element containing the content to be edited:
<article
contenteditable
>
<h2>Stop <code>section</code> Abuse!</h2>
<p>As the most generic of the HTML5 structural elements, <code>section</code>
is often incorrectly used as a styling container, when <code>div</code> is
more appropriate.</p>
</article>
Discussion
This attribute is well supported by today's browsers, including IE6. In fact,
con
tenteditable
first appeared in IE 5.5 and has since been incorporated by other brows-
ers. It was originally intended to support in-browser editing such as a What You See Is
What You Get (WYSIWYG) editor.
However, on its own, it only allows users to edit content. It does not have any func-
tionality to save those edits, nor does it generate editing controls commonly seen in
