HTML contenteditable Attribute

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

Definition

The contenteditable attribute specifies whether an element should be editable by the user.

Applicable Elements

The contenteditable attribute is a Global Attribute, meaning it can be used with all HTML Elements.

HTML Global contenteditable Attribute

The contenteditable attribute, when used with an element, specifies whether it should be editable by the user.

Syntax

<div contenteditable="true"></div>

Usage

  • The contenteditable attribute takes the values true, false, and empty. Both the empty string and true values map to the true state.
  • If the value is missing or invalid, the element is editable if its parent is editable.
  • It should be noted that although it takes the values true and false, the attribute is not a boolean. It is an enumerated one.

Values

Values can include:

  • true
  • false
  • Empty string

Examples

The following example shows a <blockquote> that is editable by the user:

<body>
    <h1>Displayed Page Title</h1>
    <p>The main content of your page goes here.</p>
    <blockquote contenteditable="true">Write a quote here</blockquote>
</body>

Specification

The contenteditable HTML specification is as follows:

Browser Support

The contenteditable has the following browser support:

Desktop

ChromeEdgeFirefoxIEOperaSafari
contenteditableYesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
contenteditableYesYesYesYesYesYes