{"id":2040,"date":"2025-06-03T19:55:22","date_gmt":"2025-06-03T16:55:22","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=2040"},"modified":"2025-06-09T15:22:26","modified_gmt":"2025-06-09T12:22:26","slug":"copy-to-clipboard-website-button-jquery","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/","title":{"rendered":"Simple “Copy to Clipboard” Website Button with jQuery"},"content":{"rendered":"

A very simple solution to allow website visitors to copy website content to their clipboard\ud83d\udccb with a single click or tap. Enhance your website’s user experience adding this feature. Grab the code below or see the live demo on jsFiddle<\/a>.<\/strong><\/p>\n

\"new<\/a><\/p>\n

<\/p>\n

We have just added this button to our online HTML editor<\/a>, and I hope you’ll find it useful. From now on we’re planning to implement this feature for all our HTML tools<\/a>.<\/p>\n

Whether you are a developer, content creator, or an everyday user, having a quick and seamless way to copy text can save valuable time and reduce frustration. Enter the “Copy to Clipboard \ud83d\udccb”<\/strong> button — an intuitive and efficient tool designed to streamline the process of copying text with a single click. Here, we’ll explore the implementation details and the benefits of this handy feature, then you can further customize it to match the design of your site.<\/p>\n

HTML Code<\/h3>\n

The core of our “Copy to Clipboard” button lies in the HTML structure. In our demo we have two text elements that can be copied and a hidden textarea tag<\/a> to facilitate the copying process. Here is the HTML markup:<\/p>\n

\n
<h1<\/span> id=<\/span>\"mainTitle\"<\/span>><\/span>Click the button to copy this to clipboard<\/h1><\/span>\n<span<\/span> class=<\/span>\"copyButton\"<\/span> data-target=<\/span>\"#mainTitle\"<\/span>><\/span>Copy<\/span><\/span>\n\n<h2<\/span> id=<\/span>\"secondTitle\"<\/span>><\/span>Second text you can copy<\/h2><\/span>\n<span<\/span> class=<\/span>\"copyButton\"<\/span> data-target=<\/span>\"#secondTitle\"<\/span>><\/span>Copy<\/span><\/span>\n<br><\/span>\n<textarea<\/span> cols=<\/span>\"10\"<\/span> id=<\/span>\"copyTextArea\"<\/span> rows=<\/span>\"1\"<\/span> spellcheck=<\/span>\"false\"<\/span>><\/textarea><\/span>\n<\/pre>\n<\/div>\n
In this structure, each copyButton<\/code> element has a data-target<\/code> attribute pointing to the ID of the text element it will copy from. The hidden textarea (copyTextArea<\/code>) is used to temporarily hold the text to be copied.<\/p>\n
\"copy
Check out the live demo on jsFiddle<\/strong><\/a><\/p>\n
The CSS Style<\/h3>\n
The CSS<\/a> is designed to make the copy buttons visually appealing and user-friendly. Here’s the styling used:<\/p>\n
\n
.copyButton<\/span> {\n    display<\/span>:<\/span> inline<\/span>-<\/span>block<\/span>;\n    color<\/span>:<\/span> #FFF<\/span>;\n    font-weight<\/span>:<\/span> bold<\/span>;\n    padding<\/span>:<\/span> 3px<\/span> 8px<\/span>;\n    min-width<\/span>:<\/span> 65px<\/span>;\n    text-align<\/span>:<\/span> left<\/span>;\n    margin<\/span>:<\/span> 3px<\/span> 0<\/span> 0<\/span>;\n    user-<\/span>select:<\/span> none<\/span>;\n    line-height<\/span>:<\/span> 18px<\/span>;\n    font-size<\/span>:<\/span> 16px<\/span>;\n    border<\/span>-<\/span>radius:<\/span> 7px<\/span>;\n    box-<\/span>shadow:<\/span> 2px<\/span> 2px<\/span> 2px<\/span> #555<\/span>;\n    cursor<\/span>:<\/span> pointer<\/span>;\n    background<\/span>:<\/span> none<\/span> center<\/span> right<\/span> no-repeat<\/span> #ce5937<\/span>;\n}\n.copyButton<\/span>:hover<\/span>{\n    background-color<\/span>:<\/span>#0769AD<\/span>\n}\ntextarea<\/span>#copyTextArea<\/span>{\n    <\/span>opacity<\/span>:<\/span>0<\/span>.<\/span>01<\/span>;\n    <\/span>width<\/span>:<\/span>2px<\/span>;\n    <\/span>height<\/span>:<\/span>2px<\/span>;\n}\n<\/pre>\n<\/div>\n
This CSS ensures the buttons are easily identifiable, with a bold font and a background color that changes on hover. The hidden textarea is styled to be practically invisible to the user.<\/p>\n
Pro Tip<\/h3>\n
Include this background-image to add a clipboard icon to the button, just like in our demo:<\/p>\n
<\/path><\/g><\/svg><\/p>\n
.copyButton<\/strong> { background-image: url(“data:image\/svg+xml,%3C%3Fxml version=’1.0′ encoding=’UTF-8’%3F%3E%3Csvg fill=’red’ xmlns=’http:\/\/www.w3.org\/2000\/svg’ xmlns:xlink=’http:\/\/www.w3.org\/1999\/xlink’ width=’20px’ height=’20px’ viewBox=’0 0 20 20′ version=’1.1’%3E%3Cg%3E%3Cpath style=’ stroke:none;fill-rule:nonzero;fill:rgb(255,255,255);fill-opacity:1;’ d=’M 15.78125 2.425781 L 13.738281 2.425781 L 13.738281 2.277344 C 13.738281 1.902344 13.429688 1.59375 13.054688 1.59375 L 11.683594 1.59375 L 11.683594 0.683594 C 11.683594 0.304688 11.375 0 11 0 L 9 0 C 8.625 0 8.316406 0.304688 8.316406 0.683594 L 8.316406 1.59375 L 6.945312 1.59375 C 6.570312 1.59375 6.261719 1.902344 6.261719 2.277344 L 6.261719 2.425781 L 4.21875 2.425781 C 3.710938 2.425781 3.296875 2.839844 3.296875 3.351562 L 3.296875 19.074219 C 3.296875 19.585938 3.710938 20 4.21875 20 L 15.78125 20 C 16.289062 20 16.703125 19.585938 16.703125 19.074219 L 16.703125 3.351562 C 16.703125 2.839844 16.289062 2.425781 15.78125 2.425781 Z M 6.953125 5.398438 L 13.050781 5.398438 C 13.414062 5.398438 13.710938 5.101562 13.710938 4.738281 L 13.710938 4.007812 L 15.320312 4.007812 L 15.324219 18.535156 L 4.679688 18.539062 L 4.679688 4.007812 L 6.292969 4.007812 L 6.292969 4.738281 C 6.289062 5.101562 6.585938 5.398438 6.953125 5.398438 Z M 6.953125 5.398438 ‘\/%3E%3C\/g%3E%3C\/svg%3E”);}<\/em><\/p>\n
\"copy<\/p>\n
jQuery Script<\/h3>\n
The jQuery script brings the “Copy to Clipboard” button to life by handling the click event and executing the copy command:<\/p>\n
\n
var<\/span> copyBuffer;\n$(document<\/span>).ready(function<\/span>() {\n\t$(\".copyButton\"<\/span>).click(function<\/span>() {\n\t\tcopyBuffer =<\/span> $(this<\/span>).attr(\"data-target\"<\/span>);\n\t\t$(\"#copyTextArea\"<\/span>).val($(copyBuffer).html());\n\t\t\n\t\t$(\"#copyTextArea\"<\/span>).focus();\n\t\t$(\"#copyTextArea\"<\/span>).select();\n\t\t  try<\/span> {\n\t\t\tvar<\/span> successful =<\/span> document<\/span>.execCommand('copy'<\/span>);\n\t\t\tvar<\/span> msg =<\/span> successful ?<\/span> 'successful'<\/span> :<\/span> 'unsuccessful'<\/span>;\n\t\t\t$(\".copyButton\"<\/span>).text(\"Copied\"<\/span>);\n\t\t  } catch<\/span> (err) {\n\t\t\t$(\".copyButton\"<\/span>).text(\"Error\"<\/span>);\n\t\t  }\n\t\tsetTimeout(function<\/span>(){ \n\t\t\t$(\".copyButton\"<\/span>).text(\"Copy\"<\/span>);\n\t\t}, 2000<\/span>);\n\t});\n});\n<\/pre>\n<\/div>\n
How It Works:<\/h3>\n
    \n
  1. Click Event<\/strong>: When the copyButton<\/code> is clicked, the script retrieves the data-target<\/code> attribute to identify which text element’s content should be copied.<\/li>\n
  2. Send it to the Textarea<\/strong>: The content of the specified text element is copied into the hidden copyTextArea<\/code>.<\/li>\n
  3. Copy Command<\/strong>: The script focuses on the hidden textarea, selects its content, and then executes the copy command using document.execCommand('copy')<\/code>.<\/li>\n
  4. Feedback<\/strong>: The button text changes to “Copied” for two seconds to provide feedback to the user.<\/li>\n<\/ol>\n
    Benefits:<\/h3>\n
      \n
    • Simplicity<\/strong>: Users can copy text with a single click, enhancing user experience.<\/li>\n
    • Visual Feedback<\/strong>: The button provides immediate visual feedback, indicating whether the copy action was successful.<\/li>\n
    • Cross-Browser Compatibility<\/strong>: The approach uses widely supported web standards, ensuring compatibility across different browsers.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
      A very simple solution to allow website visitors to copy website content to their clipboard\ud83d\udccb with a single click or tap. Enhance your website’s user experience adding this feature. Grab the code below or see the live demo on jsFiddle.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,2,3,4,5,6,8],"tags":[],"class_list":["post-2040","post","type-post","status-publish","format-standard","hentry","category-articles","category-css","category-freebies","category-html","category-javascript","category-jquery","category-tools"],"yoast_head":"\nSimple "Copy to Clipboard" Website Button with jQuery<\/title>\n<meta name=\"description\" content=\"A very simple solution to allow website visitors to copy website content to their clipboard with a single click or tap. Grab the code below\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple "Copy to Clipboard" Website Button with jQuery\" \/>\n<meta property=\"og:description\" content=\"A very simple solution to allow website visitors to copy website content to their clipboard with a single click or tap. Grab the code below\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-03T16:55:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-09T12:22:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/06\/new-html-editor-feature-copy-button.jpg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Simple “Copy to Clipboard” Website Button with jQuery\",\"datePublished\":\"2025-06-03T16:55:22+00:00\",\"dateModified\":\"2025-06-09T12:22:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/\"},\"wordCount\":548,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/06\/new-html-editor-feature-copy-button.jpg\",\"articleSection\":[\"Articles\",\"CSS\",\"Freebies\",\"HTML\",\"JavaScript\",\"jQuery\",\"Tools\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/\",\"url\":\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/\",\"name\":\"Simple \\\"Copy to Clipboard\\\" Website Button with jQuery\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/06\/new-html-editor-feature-copy-button.jpg\",\"datePublished\":\"2025-06-03T16:55:22+00:00\",\"dateModified\":\"2025-06-09T12:22:26+00:00\",\"description\":\"A very simple solution to allow website visitors to copy website content to their clipboard with a single click or tap. Grab the code below\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/06\/new-html-editor-feature-copy-button.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/06\/new-html-editor-feature-copy-button.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Simple “Copy to Clipboard” Website Button with jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple \"Copy to Clipboard\" Website Button with jQuery","description":"A very simple solution to allow website visitors to copy website content to their clipboard with a single click or tap. Grab the code below","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:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/","og_locale":"en_GB","og_type":"article","og_title":"Simple \"Copy to Clipboard\" Website Button with jQuery","og_description":"A very simple solution to allow website visitors to copy website content to their clipboard with a single click or tap. Grab the code below","og_url":"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2025-06-03T16:55:22+00:00","article_modified_time":"2025-06-09T12:22:26+00:00","og_image":[{"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/06\/new-html-editor-feature-copy-button.jpg","type":"","width":"","height":""}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Simple “Copy to Clipboard” Website Button with jQuery","datePublished":"2025-06-03T16:55:22+00:00","dateModified":"2025-06-09T12:22:26+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/"},"wordCount":548,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/06\/new-html-editor-feature-copy-button.jpg","articleSection":["Articles","CSS","Freebies","HTML","JavaScript","jQuery","Tools"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/","url":"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/","name":"Simple \"Copy to Clipboard\" Website Button with jQuery","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/06\/new-html-editor-feature-copy-button.jpg","datePublished":"2025-06-03T16:55:22+00:00","dateModified":"2025-06-09T12:22:26+00:00","description":"A very simple solution to allow website visitors to copy website content to their clipboard with a single click or tap. Grab the code below","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/06\/new-html-editor-feature-copy-button.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/06\/new-html-editor-feature-copy-button.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/copy-to-clipboard-website-button-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Simple “Copy to Clipboard” Website Button with jQuery"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/2040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=2040"}],"version-history":[{"count":2,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/2040\/revisions"}],"predecessor-version":[{"id":2043,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/2040\/revisions\/2043"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=2040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=2040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=2040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}