Web Development

This part is of the HTML5 Post Series dedicated to spread knowledge about HTML5

HTML5, HTML5 HTML5 Everywhere!

In the last 5 years or so, we have seen so many javascript plugins that do many fantastic things we wish we could have with only simple HTML like validation, datepickers and autocomplete.

Here we are faced with one fascinating HTML5 attribute, contenteditable.

Values

  • true – The contenteditable attribute when given the value of true, makes content inside elements editable.
  • false – The attribute contenteditable can be given a false value which renders it useless.
  • inherit – It can also be given the value of inherit which makes it inherit contenteditable functionality if the parent is editable.

Sample Code

Can be edited

 <div contenteditable="true">
    This an editable element. Edit the content as much as you can.
  </div>

Cannot be edited

 <div contenteditable="false">
    This an editable element. Edit the content as much as you can.
  </div>

Usage

The contenteditable attribute is quite useful especially when creating CMS that uses javascript to directly edit HTML.

In Action

If you’re using one of the browsers that supports contenteditable, feel free to visit our demo

Browser Compatibility

The contenteditable attribute is supported in modern browsers like IE7+, Firefox 12, Chrome 20, Safari 5.1 and Opera 12.