deCODE - Our Newsletter for Jan 2022 is available for Download. 🗞   🥳
  Signup/Sign In

How to make a div element editable in HTML?

The element on the webpage which can be modified by the user is called the editable element. The HTML provides the way to make the div element editable. In this tutorial, we will learn the way to make the div element editable.

HTML contenteditable attribute

The contenteditable attribute is used to the element which can be edited by the user. It must take one of the following values.

  • true or empty string indicating that the element can be editable.
  • false indicating that the content must not be edited.

For editable elements, the browser modifies the widget and allows editing.

Example: Make a div element editable

Here is a simple example to show you how we can use contenteditable attribute to edit div contents.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
    <h2> The div element is editable </h2>
	<div contenteditable="">
       click on text to edit.
    </div>
</body>
</html>

Output

Here is the output of the above program.

Editable content

Example: Make editable HTML elements

In this program, we have used both the attribute value of contenteditable to show how it functions.

Conclusion

So now if you want to include any div element which can be edited by the user. You can easily do it by using contenteditable attribute within the div. Here we have explained it with examples.