The HTML5 Specification introduces many new semantic attributes in addition to new semantic elements. One particularly interesting addition is the introduction of the contenteditiable attribute, which can be found under the User Interaction Specification in Section 7.5.
A Brief Overview
The contenteditiable attribute allows for the editing of content within any valid HTML5 element. By default, elements implicitly inherit edibility from their parent element unless explicitly defined.
The API
The contenteditiable attribute is an enumerated attribute with three states which map to the four keywords:
| true | |
The true state indicates that the element is editable; it is specified by the ("" Empty String) or true keywords. | |
| false | |
The false state indicates that the element is editable; it is specified by the false keyword. | |
| inherit | |
The inherit state indicates that the element is editable if it’s immediate parent element is editable. | |
Examples
The following examples provide basic “live” demonstrations and source implementations of the contenteditiable attribute. (Note: These examples assume an HTML5 compatible Browser which support this attribute.)
A basic editable element
This content is editable, try it.
1 2 3 | <p contenteditable="true">This content is editable!</p> |
A basic nested editable and non-editable element
- By default, this content is editable via it’s inherited parent elements value.
- This content is not editable via it’s explicit contenteditable value.
1 2 3 4 5 6 7 8 | <ul contenteditable="true"> <li>By default, this content is editable via its inherited parent elements value.</li> <li contenteditable="false">This content is <b>not</b> editable via its explicit contenteditable value.</li> </ul> |
Outline Styles
Setting editable element outline styles with CSS attribute selectors:
1 2 3 4 5 6 7 8 | [contenteditable=true] { outline: 1px dotted #cccccc; } [contenteditable=true]:hover { outline: 1px dotted #ff0000; } |
Complete example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!doctype html> <html> <head> <title>HTML5 Semantics: The contenteditable Attribute</title> <meta charset="utf-8"> <style> [contenteditable=true] { outline: 1px dotted #cccccc; } [contenteditable=true]:hover { outline: 1px dotted #ff0000; } </style> </head> <body> <p contenteditable="true">This content is editable!</p> <ul contenteditable="true"> <li>By default, this content is editable via its inherited parent elements value.</li> <li contenteditable="false">This content is <b>not</b> editable via its explicit contenteditable value.</li> </ul> </body> </html> |
Some Concluding Thoughts
As you can see, enabling and disabling an editable element in HTML5 is quite simple with the addition of the contenteditiable attribute. This allows for some very interesting possibilities when implemented in conjunction with many of the other new features in HTML5; specifically, the Web Storage API and the spellcheck attribute.
css3, html5, html5 attributes, html5 elements, html5 family, html5 semantics, localStorage, sessionStorage, web storage
Actually I want to know that with the help of this feature what facility can be provide for user.
Please suggest me.
Hi Rajnish,
While not offering much particular value on its own, the content editable attribute will be of most use when used in conjunction with other HTML5 APIs; e.g. Web Storage, etc..
Hope that helps.
Best,
Eric
The demos in your post made it very clear how the nesting works, thank you!
Do you have any idea how contenteditable works on mobile, and if there are any special concerns there?