Which elements can be safely made contenteditable? Which elements can be safely made contenteditable? google-chrome google-chrome

Which elements can be safely made contenteditable?


In my opinion, I'd say div is the safest bet across the board. Any element you wish to truly edit (be it a span, header, etc), you can place inside the div and edit as if it were just that element. Also, to account for the display:inline issue you mentioned, you could always use float:left or float:right on your editable div to give it an "inline feel" without having it actually be inline.

Hope that helps!


Since this is an evolving feature with, apparent, low priority from the browser vendors support has been sketchy and regressions not uncommon. The current state of affairs is evolving, so check the Googles, CanIUse etc and make sure support is there for your sites visitors, everything else is moot ...

Support in Firefox seems to be solid, at least for some elements, now https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_contentIt works well in Chrome as well as far as my testing goes.And CanIUse looks good: http://caniuse.com/#feat=contenteditable

There are a number of different bugs related to the feature in the different browsers though, but for simple use cases it should be ok now, as of August 2016.