{"id":2256,"date":"2011-04-15T10:22:39","date_gmt":"2011-04-15T14:22:39","guid":{"rendered":"http:\/\/www.ericfeminella.com\/blog\/?p=2256"},"modified":"2012-02-11T02:35:52","modified_gmt":"2012-02-11T07:35:52","slug":"html5-semantics-the-contenteditable-attribute","status":"publish","type":"post","link":"https:\/\/www.ericfeminella.com\/blog\/2011\/04\/15\/html5-semantics-the-contenteditable-attribute\/","title":{"rendered":"HTML5 Semantics: The contenteditable Attribute"},"content":{"rendered":"<p>The <a href=\"http:\/\/dev.w3.org\/html5\/spec\/Overview.html\" target=\"_blank\">HTML5 Specification<\/a> introduces many new semantic attributes in addition to new semantic elements. One particularly interesting addition is the introduction of the <code>contenteditiable<\/code> attribute, which can be found under the <a href=\"http:\/\/dev.w3.org\/html5\/spec\/Overview.html#editing\" target=\"_blank\">User Interaction Specification<\/a> in <a href=\"http:\/\/dev.w3.org\/html5\/spec\/Overview.html#contenteditable\" target=\"_blank\">Section 7.5<\/a>.<\/p>\n<h3>A Brief Overview<\/h3>\n<p>The <code>contenteditiable<\/code> attribute allows for the editing of content within any valid HTML5 <code>element<\/code>. By default, elements implicitly inherit edibility from their parent element unless explicitly defined.<\/p>\n<h3>The API<\/h3>\n<p>The <code>contenteditiable<\/code> attribute is an <a href=\"http:\/\/dev.w3.org\/html5\/spec\/Overview.html#enumerated-attribute\" target=\"_blank\">enumerated attribute<\/a> with <i>three states<\/i> which map to the four <i>keywords<\/i>:<\/p>\n<table class=\"api-doc-table\" cellspacing=\"0\">\n<thead><\/thead>\n<tbody>\n<tr class=\"api-method\">\n<td>true<\/p>\n<td class=\"default\"><\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\" class=\"desc\">The <code>true<\/code> state indicates that the element is editable; it is specified by the (<code>\"\" Empty String<\/code>) or <code>true<\/code> keywords.<\/td>\n<\/tr>\n<tr class=\"api-method\">\n<td>false<\/td>\n<td class=\"default\"><\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\" class=\"desc\">The <code>false<\/code> state indicates that the element is editable; it is specified by the <code>false<\/code> keyword.<\/td>\n<\/tr>\n<tr class=\"api-method\">\n<td>inherit<\/td>\n<td class=\"default\"><\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\" class=\"desc\">The <code>inherit<\/code> state indicates that the element is editable if it&#8217;s immediate parent element is editable.<\/td>\n<\/tr>\n<\/table>\n<h3>Examples<\/h3>\n<p>The following examples provide basic &#8220;live&#8221; demonstrations and source implementations of the <code>contenteditiable<\/code> attribute. (Note: These examples assume an <a href=\"http:\/\/www.findmebyip.com\/litmus\" target=\"_blank\">HTML5 compatible Browser<\/a> which support this attribute.)<\/p>\n<h4>A basic editable element<\/h4>\n<p contenteditable=\"true\">This content is editable, try it.<\/p>\n<pre lang=\"javascript\">\r\n<p contenteditable=\"true\">This content is editable!<\/p>\r\n  \r\n<\/pre>\n<\/p>\n<h4>A basic nested editable and non-editable element<\/h4>\n<ul contenteditable=\"true\">\n<li>By default, this content is editable via it&#8217;s inherited parent elements value.<\/li>\n<li contenteditable=\"false\">This content is <b>not<\/b> editable via it&#8217;s explicit contenteditable value.<\/li>\n<\/ul>\n<pre lang=\"javascript\">\r\n<ul contenteditable=\"true\">\r\n\t<li>By default, this content is editable via its \r\n        inherited parent elements value.<\/li>\r\n\t<li contenteditable=\"false\">This content is <b>not<\/b> \r\n        editable via its explicit contenteditable value.<\/li>\r\n<\/ul>\r\n  \r\n<\/pre>\n<\/p>\n<h4>Outline Styles<\/h4>\n<p>Setting editable element outline styles with <a href=\"http:\/\/www.w3.org\/TR\/CSS2\/selector.html#matching-attrs\" target=\"_blank\">CSS attribute selectors<\/a>:<\/p>\n<pre lang=\"css\">\r\n[contenteditable=true] {\r\n    outline: 1px dotted #cccccc;\r\n}\r\n[contenteditable=true]:hover {\r\n    outline: 1px dotted #ff0000;\r\n}\r\n  \r\n<\/pre>\n<\/p>\n<h4>Complete example<\/h4>\n<pre lang=\"javascript\">\r\n<!doctype html>\r\n<html>\r\n    <head>\r\n    \t<title>HTML5 Semantics: The contenteditable Attribute<\/title>\r\n        <meta charset=\"utf-8\">\r\n\t\t<style>\r\n\t\t\t[contenteditable=true] {\r\n\t\t\t    outline: 1px dotted #cccccc;\r\n\t\t\t}\r\n\t\t\t[contenteditable=true]:hover {\r\n\t\t\t    outline: 1px dotted #ff0000;\r\n\t\t\t}\t\t\r\n\t\t<\/style>\r\n    <\/head>\r\n    <body>\r\n    \t<p contenteditable=\"true\">This content is editable!<\/p>\r\n\t\t<ul contenteditable=\"true\">\r\n    \t\t<li>By default, this content is editable via its \r\n\t\t\tinherited parent elements value.<\/li>\r\n    \t\t<li contenteditable=\"false\">This content is <b>not<\/b> \r\n\t\t\teditable via its explicit contenteditable value.<\/li>\r\n\t\t<\/ul>\r\n    <\/body>\r\n<\/html>\r\n  \r\n<\/pre>\n<p><a href=\"http:\/\/code.ericfeminella.com\/articles\/examples\/html5\/semantics\" target=\"_blank\">run<\/a><\/p>\n<h3>Some Concluding Thoughts<\/h3>\n<p>As you can see, enabling and disabling an editable element in HTML5 is quite simple with the addition of the <code>contenteditiable<\/code> attribute. This allows for some very interesting possibilities when implemented in conjunction with many of the other new features in HTML5; specifically, the <a href=\"http:\/\/dev.w3.org\/html5\/webstorage\/\" target=\"_blank\">Web Storage API<\/a> and the <a href=\"http:\/\/dev.w3.org\/html5\/spec\/Overview.html#spelling-and-grammar-checking\" target=\"_blank\">spellcheck<\/a> attribute.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The HTML5 Specification introduces many new semantic attributes in addition to new semantic elements. One particularly interesting addition is the introduction of the contenteditiable attribute, which can be found under the User Interaction Specification in Section 7.5. A Brief Overview The contenteditiable attribute allows for the editing of content within any valid HTML5 element. By default, elements implicitly inherit edibility&#8230; <a class=\"read-more\" href=\"https:\/\/www.ericfeminella.com\/blog\/2011\/04\/15\/html5-semantics-the-contenteditable-attribute\/\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[59],"tags":[66,65,127,125,63,126,75,76,73],"class_list":["post-2256","post","type-post","status-publish","format-standard","hentry","category-html5","tag-css3-2","tag-html5-2","tag-html5-attributes-2","tag-html5-elements-2","tag-html5-family","tag-html5-semantics-2","tag-localstorage","tag-sessionstorage","tag-web-storage"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/2256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/comments?post=2256"}],"version-history":[{"count":0,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/2256\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/media?parent=2256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/categories?post=2256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/tags?post=2256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}