{"id":15550,"date":"2012-11-26T21:01:50","date_gmt":"2012-11-26T13:01:50","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15550"},"modified":"2025-04-04T01:14:37","modified_gmt":"2025-04-03T17:14:37","slug":"html5-editable-content","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/","title":{"rendered":"How to Edit Web Content with HTML5&#8217;s Contenteditable Attribute"},"content":{"rendered":"<p>One of the new features in <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\/\"><strong>HTML5<\/strong><\/a> is the native front-end editor. This feature is commonly used in Content Management Systems, allowing content to be edited directly in the browser, typically implemented with JavaScript and <a href=\"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/\">AJAX<\/a>. HTML5 makes this process easier through the <code>contenteditable<\/code> attribute.<\/p>\n<h2>How it Works<\/h2>\n<p>This attribute allows content to be edited when applied to an element. Here\u2019s an example:<\/p>\n<pre>\r\n&lt;article id=\"content1\" contenteditable=\"true\"&gt;\r\n &lt;p&gt;Cookie muffin croissant. Faworki danish biscuit. Jujubes powder cookie cake \r\n biscuit halvah halvah. Biscuit gummies jelly biscuit.&lt;\/p&gt;\r\n\r\n &lt;p&gt;Sweet roll tiramisu chocolate bar sugar plum caramels tootsie roll caramels.\r\n Chocolate cake wypas cotton candy icing. Applicake sesame snaps liquorice pastry croissant \r\n caramels fruitcake gingerbread biscuit. Donut toffee candy canes.&lt;\/p&gt;\r\n&lt;\/article&gt;\r\n<\/pre>\n<p>In this example, we added the <code>contenteditable<\/code> attribute with a value of <code>true<\/code>, making the content editable. There are two other values for this attribute:<\/p>\n<ul>\n<li><code>false<\/code>, which makes the content non-editable<\/li>\n<li><code>inherit<\/code>, which makes the content editable if its parent element is editable.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/hongkiat.github.io\/html5-editable-content\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  View demo <\/span><\/a><\/p>\n<p>In the demo, you can see that content is editable directly in the browser. However, changes won\u2019t be saved when you refresh the page; it only covers content editing in the browser, not storing changes.<\/p>\n<h2>Saving Changes<\/h2>\n<p>Saving changes depends on where we store the data. Typically, it goes into a database, but since we lack database access, we\u2019ll save changes in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/html\/html5_webstorage.asp\"><strong>localStorage<\/strong><\/a>. We\u2019ll also use some jQuery for simplicity. For further reference, consider <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/diveintohtml5.info\/storage.html\">The Past, Present & Future of Local Storage for Web Applications<\/a>.<\/p>\n<p>First, let\u2019s add a <strong>button<\/strong> beside the content:<\/p>\n<pre>\r\n&lt;article id=\"content2\" contenteditable=\"true\"&gt;\r\n &lt;p&gt;Sweet roll tiramisu chocolate bar sugar plum caramels tootsie roll caramels. Chocolate cake wypas cotton candy icing. Applicake sesame snaps liquorice pastry croissant caramels fruitcake gingerbread biscuit. Donut toffee candy canes.&lt;\/p&gt;\r\n&lt;\/article&gt;\r\n\r\n&lt;button id=\"save\"&gt;Save Changes&lt;\/button&gt;\r\n<\/pre>\n<p>The button will store changes when clicked. Let\u2019s implement this with a script:<\/p>\n<pre>\r\nvar theContent = $('#content2');\r\n\r\n$('#save').on('click', function() {\r\n var editedContent = theContent.html();\r\n localStorage.newContent = editedContent;\r\n});\r\n<\/pre>\n<p>This script creates a new key in localStorage with the latest content changes. Use Firebug or Developer Tools to confirm the data\u2019s storage, ensuring to press the button. For Firefox users, check the <strong>DOM<\/strong> panel for localStorage. In Chrome and Safari, it appears under \u2018Resources\u2019.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-editable-content\/inspect-firefox.jpg\" alt=\"Inspect Firefox\" width=\"500\" height=\"280\"><\/figure>\n<p>To retrieve and update content with this data, use:<\/p>\n<pre>\r\nif(localStorage.getItem('newContent')) {\r\n theContent.html(localStorage.getItem('newContent'));\r\n}\r\n<\/pre>\n<p>This code identifies the item <strong>newContent<\/strong> in localStorage and, if it exists, updates <code>#content2<\/code> with its value. The content remains after refreshing the page.<\/p>\n<p><a href=\"https:\/\/hongkiat.github.io\/html5-editable-content\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  View demo <\/span><\/a><\/p>\n<p><a href=\"https:\/\/github.com\/hongkiat\/html5-editable-content\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download source <\/span><\/a><\/p>\n<h2>Final Thought<\/h2>\n<p>In the past, adding a front-end editor, as demonstrated here, could take hours or even weeks. Now, with the <code>contenteditable<\/code> attribute, it can be done in seconds.<\/p>\n<p>According to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/?cats=HTML5&statuses=all\">caniuse.com<\/a>, this attribute is supported in modern browsers, including IE7+, Firefox 12, Chrome 20, Safari 5.1, and Opera 12. This means we can use it confidently without needing to set up fallbacks for older browsers.<\/p>","protected":false},"excerpt":{"rendered":"<p>One of the new features in HTML5 is the native front-end editor. This feature is commonly used in Content Management Systems, allowing content to be edited directly in the browser, typically implemented with JavaScript and AJAX. HTML5 makes this process easier through the contenteditable attribute. How it Works This attribute allows content to be edited&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Edit Web Content with HTML5&#039;s Contenteditable Attribute - Hongkiat<\/title>\n<meta name=\"description\" content=\"One of the new features in HTML5 is the native front-end editor. This feature is commonly used in Content Management Systems, allowing content to be\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Edit Web Content with HTML5&#039;s Contenteditable Attribute\" \/>\n<meta property=\"og:description\" content=\"One of the new features in HTML5 is the native front-end editor. This feature is commonly used in Content Management Systems, allowing content to be\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-11-26T13:01:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:14:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-editable-content\/inspect-firefox.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-editable-content\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-editable-content\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Edit Web Content with HTML5&#8217;s Contenteditable Attribute\",\"datePublished\":\"2012-11-26T13:01:50+00:00\",\"dateModified\":\"2025-04-03T17:14:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-editable-content\\\/\"},\"wordCount\":439,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-editable-content\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-editable-content\\\/inspect-firefox.jpg\",\"keywords\":[\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-editable-content\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-editable-content\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-editable-content\\\/\",\"name\":\"How to Edit Web Content with HTML5's Contenteditable Attribute - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-editable-content\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-editable-content\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-editable-content\\\/inspect-firefox.jpg\",\"datePublished\":\"2012-11-26T13:01:50+00:00\",\"dateModified\":\"2025-04-03T17:14:37+00:00\",\"description\":\"One of the new features in HTML5 is the native front-end editor. This feature is commonly used in Content Management Systems, allowing content to be\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-editable-content\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-editable-content\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-editable-content\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-editable-content\\\/inspect-firefox.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-editable-content\\\/inspect-firefox.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-editable-content\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Edit Web Content with HTML5&#8217;s Contenteditable Attribute\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Edit Web Content with HTML5's Contenteditable Attribute - Hongkiat","description":"One of the new features in HTML5 is the native front-end editor. This feature is commonly used in Content Management Systems, allowing content to be","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/","og_locale":"en_US","og_type":"article","og_title":"How to Edit Web Content with HTML5's Contenteditable Attribute","og_description":"One of the new features in HTML5 is the native front-end editor. This feature is commonly used in Content Management Systems, allowing content to be","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-11-26T13:01:50+00:00","article_modified_time":"2025-04-03T17:14:37+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-editable-content\/inspect-firefox.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Edit Web Content with HTML5&#8217;s Contenteditable Attribute","datePublished":"2012-11-26T13:01:50+00:00","dateModified":"2025-04-03T17:14:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/"},"wordCount":439,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-editable-content\/inspect-firefox.jpg","keywords":["HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/","name":"How to Edit Web Content with HTML5's Contenteditable Attribute - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-editable-content\/inspect-firefox.jpg","datePublished":"2012-11-26T13:01:50+00:00","dateModified":"2025-04-03T17:14:37+00:00","description":"One of the new features in HTML5 is the native front-end editor. This feature is commonly used in Content Management Systems, allowing content to be","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-editable-content\/inspect-firefox.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-editable-content\/inspect-firefox.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-editable-content\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Edit Web Content with HTML5&#8217;s Contenteditable Attribute"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-42O","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15550"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15550\/revisions"}],"predecessor-version":[{"id":73560,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15550\/revisions\/73560"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15550"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}