HTML contenteditable Attribute

HTMLWeb DevelopmentFront End Technology

The contenteditable attribute in HTML is used to set whether the content is editable or not using boolean values true or false. This attribute can be used with any element since it is a Global Attribute.

Following is the syntax −

<element contenteditable =”true|false”>

Above, set true if you want the element to be editable, else false. 

Let us now see an example to implement the contenteditable attribute in HTML −

Example

 Live Demo

<!DOCTYPE html>
<html>
<body>
   <h2 contenteditable="true">Demo Heading</h2>
   <p contenteditable="true">This is a demo line.</p>
</body>
</html>

Output

This will produce the following output. Displaying the heading and p elements are now editable −

Now, we can edit the heading and content. Therefore, let us change the heading and display the screenshot −

In the above example, we have set a heading and some text −

<h2 contenteditable="true">Demo Heading</h2>
<p contenteditable="true">This is a demo line.</p>

We have made the heading and the content as editable using the contenteditable property. On setting it true, you will be able to edit it on the web page itself −

h2 contenteditable="true"
raja
Published on 20-Jun-2019 10:48:25
Advertisements