HTML Attributes & Selectors

This creates a basic editable region. The role and accessible label help communicate the purpose of the region to assistive technologies, but a production editor may need additional keyboard behavior, state communication, and instructions.

Editable Plain Text

<div contenteditable="plaintext-only">
  Paste plain text into this area.
</div>

Use plaintext-only when the editing experience should avoid rich-text formatting. Browser support and clipboard behavior should be tested for your target environments.

Nested Editing Behavior

Editing states can be inherited. For example, a child element inside an editable parent is generally editable unless its own attribute explicitly sets it to false.

<div contenteditable="true">
  This section is editable.

  <p contenteditable="false">
    This paragraph is not editable.
  </p>
</div>

Elements with contenteditable enabled are generally included in sequential keyboard navigation when they are not already part of the normal focus order. Nested editable regions may require an explicit tabindex="0" if they should be separately keyboard-focusable.

Important Limitations

• Contenteditable does not automatically save changes to a database.
• It does not automatically provide a complete rich-text editing toolbar.
• It does not validate or sanitize content before it is stored or displayed elsewhere.
• It does not replace a proper form control when a simple input or textarea is more suitable.
• Browser editing behavior and generated markup can vary.

Saving Editable Text with JavaScript

The following example demonstrates reading edited text. It does not send the content to a server.

<div id="editable-note" contenteditable="true">
  Write your note here.
</div>

<button id="read-note" type="button">Read Note</button>

<p id="note-output"></p>

<script>
  const editableNote = document.getElementById("editable-note");
  const readNoteButton = document.getElementById("read-note");
  const noteOutput = document.getElementById("note-output");

  readNoteButton.addEventListener("click", function () {
    noteOutput.textContent = editableNote.innerText;
  });
</script>

The script reads the editable region's visible text and displays it using textContent. Using textContent avoids interpreting the copied string as HTML markup.

Contenteditable and Security

Editable content can contain markup, depending on the editing mode and browser behavior. If an application saves or redisplays user-created content, handle it as untrusted input.

• Prefer plain text when rich formatting is unnecessary.
• Use textContent when displaying content as text.
• If rich HTML is required, use an established HTML sanitization approach before inserting it into an HTML rendering context.
• Validate permissions and ownership on the server before saving content.
• Do not assume that a browser editor automatically prevents cross-site scripting (XSS).

8. Other Useful Global Attributes

Title

The title attribute provides advisory information about an element. Some browsers show it as a tooltip when the pointer hovers over the element.

<button type="button" title="Save your current draft">
  Save
</button>

Do not use title as the only way to communicate essential information. Tooltips may not be consistently available to touch, keyboard, or assistive-technology users.

Lang