September 9, 2022

How to Make Div Editable in HTML

In this tutorial, we will learn how to make div editable in HTML. The content that can be edited by the user is considered to be editable content. To make a div element editable, we have to use a contenteditable attribute with a value of true. After adding a contenteditable attribute to a div element, you can easily edit the text inside the element.

The contenteditable attribute can be set to any other element in HTML. It can have any one of these values; empty string, inherit, true, or false. The default value is inherit”

In the following example, we have one div element and we will make the text content inside the div element editable. Please have a look over the code example and the steps given below.

HTML

We have one div element in the HTML file.
Within the div element, we have a style attribute containing various CSS properties.
We are using a contenteditable attribute and its value has been set to “true”. As a result, we can easily edit the text content inside the div element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div element editable</title>
</head>

<body>
    <div style="border: 5px solid black; height: 300px; width: 300px;" contenteditable="true">
        Type here.....
    </div>
</body>

</html>

You May Also Like: