In this section, we will learn what the contenteditable attribute is and how to use it in HTML.
HTML contenteditable Attribute Definition and Usage
The content of HTML elements like <p> for example is not editable by default. That means after browsers rendered that content, you can’t just select and start to edit them!
But with the help of contenteditable, we can change this default behavior!
Basically, if we apply this attribute to an element and set its value to true, the content of that element becomes editable and we can change the content just on the rendered page.
Note: this attribute is inheritable. That means if we apply such an attribute to the <body> element, for example, then the entire elements within the body of <body> tag become editable as well.
HTML contenteditable Attribute Syntax
<element contenteditable = “on | off”>
HTML contenteditable Attribute Values
The value we set for the contenteditable could be either “true” or “false”.
If the value is set to “true”, that means the content of the target element is editable.
But if the value is set to “false” that means the content of the target element is not editable. (This is the default value).
Example: editable table in HTML
See the Pen editable table in HTML by Omid Dehghan (@odchan1) on CodePen.
In this example, because the `contenteditable` attribute for the <table> element is set to true, the table becomes editable and so we can select any cell and change its content.
Example: document body contenteditable true
See the Pen document body contenteditable true by Omid Dehghan (@odchan1) on CodePen.
In this example, the `contenteditable` attribute is set to true in the <body> element. That means the entire content of this HTML document is editable.
