Open In App

How to make your content editable in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

The contenteditable attribute is used to specify whether the element’s content is editable by the user or not. It uses the boolean values true or false.

If the attribute is given without a value, like <h1 contenteditable>GEEKSFORGEEKS</h1>, its value is treated as an empty string and the empty string will be treated as true.

This attribute can be used with any element since it is a Global Attribute.

Syntax:

<element contenteditable="true | false">

Attribute Values:

Attribute Values

Description

true

If the value of the contenteditable attribute is set to true then the element is editable.

false

If the value of the contenteditable attribute is set to false then the element cannot be edited.

Example 1:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1 contenteditable="true">
        This is an Editable Heading element.
    </h1>
</body>
 
</html>


Output:

Example 2:  

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1 contenteditable="false">
        This is element cannot be edited.
    </h1>
</body>
 
</html>


Output:       

Example 3: If the contenteditable attribute is missing or its value is invalid, then its value is inherited from its parent element, So the element is editable if its parent is editable. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1 contenteditable>GeeksforGeeks.</h1>
</body>
 
</html>


Output:

Example 4:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        div {
            width: 400px;
            border: 2px solid black;
        }
    </style>
</head>
 
<body>
    <div contenteditable="true">
        <h1>GeeksforGeeks.</h1>
        <p>Welcome to geeksforgeeks</p>
 
    </div>
</body>
 
</html>


Output:



Last Updated : 12 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads