Learn How to Set Web Page Content as Editable for Site Visitors

Using the Contenteditable Attribute

New small business designing own website
Jamie Jones / Getty Images

Making the text on a website editable by users is easier than you might expect. HTML provides an attribute for this purpose: contenteditable.

The contenteditable attribute was first introduced in 2014 with the release of HTML5. It specifies whether the content it governs can be changed by a site visitor from within the browser. 

Support for the Contenteditable Attribute

Most modern desktop browsers support the attribute. These include:

  • Chrome 4.0 and up
  • Internet Explorer 6 and up
  • Firefox 3.5 and up
  • Safari 3.1 and up
  • Opera 10.1 and up
  • Microsoft Edge

The same goes for most mobile browsers, too.

How to Use Contenteditable

Simply add the attribute to the HTML element you want to make editable. It has three possible values: true, false and inherit. Inherit is the default value, meaning that the element takes on the value of its parent. Likewise, any child elements of your newly editable content also will be editable unless you change their values to false. For example, to make a DIV element editable, use:

<div id="example" contenteditable="true|false|inherit">

Create an Editable To-Do List With Contenteditable

Editable content makes the most sense when you pair it with local storage, so the content persists between sessions and site visits.

  1. Open your page in an HTML editor. 
  2. Create a bulleted, unordered list named myTasks: <ul id="myTasks">
    1. <li>Some task</li>
    2. <li>Another task </li>
    3. </ul>
  3. Add the contenteditable attribute to the <ul> element: <ul id="myTasks" contenteditable="true"> You now have a to-do list that is editable—but if you close your browser or leave the page, your list will disappear. The solution: Add a simple script to save the tasks to localStorage.
  4. Add a link to jQuery in the <HEAD> of your document. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> This example uses the Google CDN, but you can host it yourself or use another CDN if you prefer.
  5. At the bottom of your page, just above the </body> tag, add your script: <script>
    1. $(document.ready(function() {
    2. });</script> This is the start of the jQuery document.ready function and tells the browser to load this script after the document has loaded fully.
  6. Inside the document.ready function, add your script to load the tasks into localStorage and get any tasks that were saved there previously: $(document.ready(function() {
    1.   $("#myTasks").blur(function() { // when the cursor leaves the #myTasks element
    2. localStorage.setItem('myTasksData', this.innerHTML); // save to localStorage
    3. });
    4. if ( localStorage.getItem('myTasksData')) { // if there is content in the localStorage
    5. $("#myTasks").html(localStorage.getItem('myTasksData')); // put content on page
    6. }
    7.  });

    The HTML for the entire page looks like this:

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>My Tasks</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    </head>
    <body>
    <h1>My Tasks</h1>
    <p>Enter items for your list. The browser will store it for you, so that when you reopen your browser, it will still be here.</p>
    <ul id="myTasks" contenteditable="true">
    <li>Some task</li>
    <li>Another task
    </li>
    </ul>
    <script>
    $(document).ready(function(){
      $("#myTasks").blur(function() {
        localStorage.setItem('myTasksData', this.innerHTML);
      });
      if ( localStorage.getItem('myTasksData') ) {
        $("#myTasks").html(localStorage.getItem('myTasksData'));
      }
    });
    </script>
    </body>
    </html>