Post
Ask Question

Making Content Editable In HTML 5

Making Content Editable In HTML 5 

 
In this quick tip, we'll learn how to make content editable within any element like paragraph, ordered list etc editable. With HTML5, we have a new attribute called contenteditable which is used to make content editable as it's name implies. The content including the child elements can be edited by the user.
 
Here are few lines borrowed from w3schools:
 
"The contenteditable attribute specifies whether the content of an element is editable or not
 
Note 
When the contenteditable attribute is not set on an element, the element will inherit it from its parent."
So, the question is, where to use this?
 
An example can be, an app which uses local storage and tries to present an interface like to do list or quick comments on someting for next steps.
 
Note
 The grey outline around the element on hover marks that the element is set to be editable using contenteditable attribute. 
 
Syntax
  1. contenteditable="true"     
Example
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <title>Demo</title>  
  5.     </head>  
  6.     <body>  
  7.         <section id="editable" contenteditable="true">  
  8.             <h2>Go ahead, edit away!</h2>  
  9.             <p>Here's a typical paragraph element</p>  
  10.             <ol>  
  11.                 <li>and now a list</li>  
  12.                 <li>with only</li>  
  13.                 <li>three items</li>  
  14.             </ol>  
  15.         </section>  
  16.     </body>  
  17. </html>    
Demo (third party)
 
html5demos.com/contenteditable
 
I hope, you liked this small tip. Please share your feedback.
 
Thanks for reading!
Next Recommended Reading Get to know the Presentational Elements of HTML