HTML5 Semantics: The contenteditable Attribute

Friday, April 15th, 2011

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.

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.

Outline Styles

Setting editable element outline styles with CSS attribute selectors:

Complete example

run

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.

Tags: , , , , , , , ,

{ 3 comments to read ... please submit one more! }

{ 0 Pingbacks/Trackbacks }