The HTML contenteditable attribute allows users to edit the content of an HTML element directly in the browser. It is useful for creating editable text areas, simple note-taking tools, interactive content, and web-based editors.
Unlike a normal text input, the contenteditable attribute can make elements such as paragraphs, headings, and div containers editable.
In this tutorial, you will learn how the HTML contenteditable attribute works, explore its values, and build a simple editable content area.
What Is the HTML Content Editable Attribute?
The contenteditable attribute specifies whether the content inside an element can be edited by the user.
For example:
<p contenteditable="true">
You can edit this paragraph directly.
</p>When you open this HTML in a browser, you can click the paragraph and change its text.
The contenteditable attribute is a global HTML attribute, meaning it can be used with many HTML elements. You can learn more in our guide to HTML global attributes.
HTML Content Editable Attribute Values
The contenteditable attribute supports these main values:
| Value | Description |
|---|---|
true | Allows the user to edit the element’s content |
false | Prevents editing of the element’s content |
plaintext-only | Allows plain-text editing without rich-text formatting |
The attribute is enumerated rather than a standard Boolean attribute. Therefore, explicitly specifying a value is recommended.
Example:
<p contenteditable="true">
This paragraph is editable.
</p>
<p contenteditable="false">
This paragraph is not editable.
</p>
<div contenteditable="plaintext-only">
You can edit this text without rich-text formatting.
</div>The plaintext-only value is useful when users should be able to change text but not introduce rich-text formatting through editing or pasting. Browser behavior should be tested for your target audience.
Creating an Editable Text Area
You can use contenteditable="true" to create a simple editable area without a traditional input field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editable Content Example</title>
</head>
<body>
<h1>My Notes</h1>
<div contenteditable="true"
style="border: 1px solid #888; padding: 15px; min-height: 100px;">
Click here and write your notes.
</div>
</body>
</html>This example creates a bordered area where users can type and edit content.
The inline CSS controls the appearance of the editable area. For larger projects, reusable HTML class attributes can help keep styling separate from the HTML structure.
Using JavaScript with Content Editable
JavaScript can read or change the content of an editable element. For example, you can add a button that displays the text entered by the user.
<div id="editor" contenteditable="true">
Edit this text.
</div>
<button id="showText">Show Content</button>
<p id="output"></p>
<script>
const editor = document.getElementById("editor");
const button = document.getElementById("showText");
const output = document.getElementById("output");
button.addEventListener("click", function () {
output.textContent = editor.innerText;
});
</script>When the button is clicked, the text from the editable area appears in the output paragraph.
Notice that textContent is used to display the result. This avoids interpreting the entered text as HTML.
Difference Between Content Editable and Textarea
Both contenteditable and <textarea> allow users to enter text, but they work differently.
| Feature | Content Editable | Textarea |
|---|---|---|
| Element | Can be applied to many HTML elements | Uses the <textarea> element |
| Editing | Edits the element’s content directly | Provides a dedicated text-entry field |
| Rich-text editing | Possible in editable regions | Plain text by default |
| Form submission | Not submitted as a form field automatically | Can be submitted as part of a form |
| Typical use | Editable content and custom editors | Comments, messages, and form inputs |
For standard forms, a <textarea> is often simpler and more accessible. Learn more in our HTML textarea tutorial.
Important Things to Remember
- Use
contenteditable="true"to allow editing. - Use
contenteditable="false"to prevent editing of an element’s content. - Editable changes are not automatically saved or submitted.
- Use JavaScript and a suitable storage method if you need to save changes.
- Do not treat user-entered HTML as trusted content. Rich-text editors need careful sanitization before content is rendered or stored.
- Provide clear labels, keyboard access, and instructions so users understand how to edit the content.
Frequently Asked Questions
Is contenteditable a Boolean attribute?
No. It is an enumerated attribute with values such as true, false, and plaintext-only. Use an explicit value to make the intended behavior clear.
Can I make a heading editable?
Yes. You can add contenteditable="true" to a heading or another suitable HTML element.
Does contenteditable save changes automatically?
No. It allows editing in the browser, but it does not automatically save changes to a database or file.
Can contenteditable be used to build a text editor?
Yes. It can be a starting point for a text editor, but a production editor may require formatting controls, keyboard support, input handling, and content sanitization.
Can I use contenteditable inside a form?
Yes, but editable content is not submitted automatically as a normal form field. If you need to submit it, copy its content into a form control or handle submission with JavaScript.