With HTML, we often implement the editable contents with a
TextArea, Text and RichText editor controls. With HTML5, we can use the ContentEditable
attribute on any content element to allow users to edit and change the content.
For example, when we use the following HTML page:
<!DOCTYPE html>
<html><head></head>
<body>
<header id="headercontent" contenteditable="true">
My header
</header>
<div id="MainContent" contenteditable="true">
main content
</div>
<footer id="footercontent" contenteditable="true">
my footer
</footer>
</body></html>
We can see that the main body elements like header, main
content and footer are set with an additional attribute. When the
contenteditable attribute is set to true, the browsers that support HTML5 allows the users to click on the content and type text changes. This feature allows us
to quickly create HTML content editors without having to resort to JavaScript
plugins or text area controls.
We should note that the main purpose of this attribute is to
allow users to update the content, but it does not allow the user to format the
contents with text effects. For that
type of functionality we would need to add a plugin that can support rich
text capabilities.