{"id":5,"date":"2020-04-23T00:01:00","date_gmt":"2020-04-22T21:01:00","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=5"},"modified":"2021-06-08T12:05:23","modified_gmt":"2021-06-08T09:05:23","slug":"simple-progress-bar","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/simple-progress-bar\/","title":{"rendered":"The Most Simple Progress Bar with HTML, CSS, JavaScript"},"content":{"rendered":"<p><strong>The most simple yet sufficient little progress bar widget using HTML-CSS-JavaScript. It is a graphical control element to visualize the progression of the change of a JavaScript variable inside a range (usually 0-100). Use this to indicate download, file transfer, or installation progress. The graphic is accompanied by a textual representation of the progress in a percent format as well.<\/strong><\/p>\n<p>You can see the preview below how the responsive widget displays, but of course you can customise its view:<\/p>\n<p><iframe loading=\"lazy\" style=\"border:none;margin: 20px 0; width: 100%; overflow: hidden;\" src=\"\/demo\/progress-bar\/index.html\" width=\"300\" height=\"30\" scrolling=\"no\"><\/iframe><\/p>\n<p><!--more--><\/p>\n<p>Download the .zip package which contains the .html, .css and .js files and they can be used out of the box or copy only the snippets you need.<\/p>\n<h2>What contains the progress bar script package<\/h2>\n<p>The script to draw the slider:<\/p>\n<p>Call the drawszlider function when you want to refresh the slider. The first parameter is the full length of the bar (usually 100) and the second is the progress. The function calculates the percentage and refreshes the slider<\/p>\n<pre style=\"color: #000000; background: #EEEEEE; padding: 10px; border: 1px solid #AAA;\"><span style=\"color: #808030;\">&lt;<\/span>body onload<span style=\"color: #808030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">drawszlider(121, 56);<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">&gt;<\/span>\n<\/pre>\n<p>Copy in your <strong>HTML code<\/strong> the following code snippet where you want the slider to render. By default it will take up the whole width of its container but you can change this in the CSS.<\/p>\n<pre style=\"color: #000000; background: #EEEEEE; padding: 10px; border: 1px solid #AAA;\"><span style=\"color: #808030;\">&lt;<\/span>div id<span style=\"color: #808030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">szlider<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">&gt;<\/span>\n    <span style=\"color: #808030;\">&lt;<\/span>div id<span style=\"color: #808030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">szliderbar<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">&gt;<\/span>\n    <span style=\"color: #808030;\">&lt;<\/span><span style=\"color: #808030;\">\/<\/span>div<span style=\"color: #808030;\">&gt;<\/span>\n    <span style=\"color: #808030;\">&lt;<\/span>div id<span style=\"color: #808030;\">=<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">szazalek<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">&gt;<\/span>\n    <span style=\"color: #808030;\">&lt;<\/span><span style=\"color: #808030;\">\/<\/span>div<span style=\"color: #808030;\">&gt;<\/span>\n<span style=\"color: #808030;\">&lt;<\/span><span style=\"color: #808030;\">\/<\/span>div<span style=\"color: #808030;\">&gt;<\/span>\n<\/pre>\n<p>You have to style the progress bar and the text indicating the actual percentage. The default <strong>CSS<\/strong> for a starting point:<\/p>\n<pre style=\"color: #000000; background: #EEEEEE; padding: 10px; border: 1px solid #AAA;\"><span style=\"color: #808030;\">#<\/span>szlider<span style=\"color: #800080;\">{<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">width<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #008c00;\">100<\/span><span style=\"color: #006600;\">%<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">height<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #008c00;\">15<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">border<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #008c00;\">1<\/span><span style=\"color: #006600;\">px<\/span> <span style=\"color: #074726;\">solid<\/span> <span style=\"color: #008c00;\">#<\/span><span style=\"color: #008000;\">000<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">overflow<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #074726;\">hidden<\/span><span style=\"color: #800080;\">;<\/span> <span style=\"color: #800080;\">}<\/span>\n<span style=\"color: #808030;\">#<\/span>szliderbar<span style=\"color: #800080;\">{<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">width<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #008c00;\">37<\/span><span style=\"color: #006600;\">%<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">height<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #008c00;\">15<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">border-right<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">1<\/span><span style=\"color: #006600;\">px<\/span> <span style=\"color: #074726;\">solid<\/span> <span style=\"color: #008c00;\">#<\/span><span style=\"color: #008000;\">000000<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">background<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">#<\/span><span style=\"color: #008000;\">d65946<\/span><span style=\"color: #800080;\">;<\/span> <span style=\"color: #800080;\">}<\/span>\n<span style=\"color: #808030;\">#<\/span>szazalek <span style=\"color: #800080;\">{<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">color<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">#<\/span><span style=\"color: #008000;\">000000<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">font-size<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">15<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">font-style<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #074726;\">italic<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">font-weight<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #074726;\">bold<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">left<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">25<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">position<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #074726;\">relative<\/span><span style=\"color: #800080;\">;<\/span>\n    <span style=\"color: #bb7977; font-weight: bold;\">top<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #808030;\">-<\/span><span style=\"color: #008c00;\">16<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: #800080;\">;<\/span> <span style=\"color: #800080;\">}<\/span>\n<\/pre>\n<p>Finally a very short and simple <strong>JavaScript code<\/strong>. You will have to call this function to draw the slider. It has two attributes, the first is the full width and the second is the actual state. For example if you want to display 50 percent call the function <em>drawszlider(100,50)<\/em> but you get the same result for <em>drawszlider(30,15)<\/em>.<\/p>\n<pre style=\"color: #000000; background: #EEEEEE; padding: 10px; border: 1px solid #AAA;\"><span style=\"color: #800000; font-weight: bold;\">function<\/span> drawszlider<span style=\"color: #808030;\">(<\/span>ossz<span style=\"color: #808030;\">,<\/span> meik<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">{<\/span>\n    <span style=\"color: #800000; font-weight: bold;\">var<\/span> szazalek<span style=\"color: #808030;\">=<\/span><span style=\"color: #797997;\">Math<\/span><span style=\"color: #808030;\">.<\/span><span style=\"color: #800000; font-weight: bold;\">round<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">(<\/span>meik<span style=\"color: #808030;\">*<\/span><span style=\"color: #008c00;\">100<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">\/<\/span>ossz<span style=\"color: #808030;\">)<\/span><span style=\"color: #800080;\">;<\/span>\n    document<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">szliderbar<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>style<span style=\"color: #808030;\">.<\/span>width<span style=\"color: #808030;\">=<\/span>szazalek<span style=\"color: #808030;\">+<\/span><span style=\"color: #0000e6;\">'%'<\/span><span style=\"color: #800080;\">;<\/span>\n    document<span style=\"color: #808030;\">.<\/span>getElementById<span style=\"color: #808030;\">(<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #0000e6;\">szazalek<\/span><span style=\"color: #800000;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>innerHTML<span style=\"color: #808030;\">=<\/span>szazalek<span style=\"color: #808030;\">+<\/span><span style=\"color: #0000e6;\">'%'<\/span><span style=\"color: #800080;\">;<\/span>\n<span style=\"color: #800080;\">}<\/span>\n<\/pre>\n<p><a href=\"\/downloads\/slider-ruwix.zip\"><strong>Download ZIP Package<\/strong><\/a><\/p>\n<p><strong>These code snippets might contain some character encoding errors caused by the web browsers so I recommend to download the .zip package!<\/strong><\/p>\n<p>Have fun!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The most simple yet sufficient little progress bar widget using HTML-CSS-JavaScript. It is a graphical control element to visualize the progression of the change of a JavaScript variable inside a range (usually 0-100). Use this to indicate download, file transfer, or installation progress. The graphic is accompanied by a textual representation of the progress in &hellip; <a href=\"https:\/\/html-online.com\/articles\/simple-progress-bar\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;The Most Simple Progress Bar with HTML, CSS, JavaScript&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,2,5],"tags":[],"class_list":["post-5","post","type-post","status-publish","format-standard","hentry","category-articles","category-css","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The Most Simple Progress Bar - HTML5 CSS3 JavaScript<\/title>\n<meta name=\"description\" content=\"The most simple yet sufficient little progress bar widget using HTML-CSS-JavaScript. It is a graphical control element to visualize the progression of\" \/>\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\/simple-progress-bar\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Most Simple Progress Bar - HTML5 CSS3 JavaScript\" \/>\n<meta property=\"og:description\" content=\"The most simple yet sufficient little progress bar widget using HTML-CSS-JavaScript. It is a graphical control element to visualize the progression of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/simple-progress-bar\/\" \/>\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=\"2020-04-22T21:01:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-08T09:05:23+00:00\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/simple-progress-bar\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/simple-progress-bar\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"The Most Simple Progress Bar with HTML, CSS, JavaScript\",\"datePublished\":\"2020-04-22T21:01:00+00:00\",\"dateModified\":\"2021-06-08T09:05:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/simple-progress-bar\/\"},\"wordCount\":306,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"articleSection\":[\"Articles\",\"CSS\",\"JavaScript\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/html-online.com\/articles\/simple-progress-bar\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/simple-progress-bar\/\",\"url\":\"https:\/\/html-online.com\/articles\/simple-progress-bar\/\",\"name\":\"The Most Simple Progress Bar - HTML5 CSS3 JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"datePublished\":\"2020-04-22T21:01:00+00:00\",\"dateModified\":\"2021-06-08T09:05:23+00:00\",\"description\":\"The most simple yet sufficient little progress bar widget using HTML-CSS-JavaScript. It is a graphical control element to visualize the progression of\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/simple-progress-bar\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/simple-progress-bar\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/simple-progress-bar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Most Simple Progress Bar with HTML, CSS, JavaScript\"}]},{\"@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":"The Most Simple Progress Bar - HTML5 CSS3 JavaScript","description":"The most simple yet sufficient little progress bar widget using HTML-CSS-JavaScript. It is a graphical control element to visualize the progression of","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\/simple-progress-bar\/","og_locale":"en_GB","og_type":"article","og_title":"The Most Simple Progress Bar - HTML5 CSS3 JavaScript","og_description":"The most simple yet sufficient little progress bar widget using HTML-CSS-JavaScript. It is a graphical control element to visualize the progression of","og_url":"https:\/\/html-online.com\/articles\/simple-progress-bar\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2020-04-22T21:01:00+00:00","article_modified_time":"2021-06-08T09:05:23+00:00","author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/simple-progress-bar\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/simple-progress-bar\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"The Most Simple Progress Bar with HTML, CSS, JavaScript","datePublished":"2020-04-22T21:01:00+00:00","dateModified":"2021-06-08T09:05:23+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/simple-progress-bar\/"},"wordCount":306,"commentCount":0,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"articleSection":["Articles","CSS","JavaScript"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/html-online.com\/articles\/simple-progress-bar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/simple-progress-bar\/","url":"https:\/\/html-online.com\/articles\/simple-progress-bar\/","name":"The Most Simple Progress Bar - HTML5 CSS3 JavaScript","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"datePublished":"2020-04-22T21:01:00+00:00","dateModified":"2021-06-08T09:05:23+00:00","description":"The most simple yet sufficient little progress bar widget using HTML-CSS-JavaScript. It is a graphical control element to visualize the progression of","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/simple-progress-bar\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/simple-progress-bar\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/simple-progress-bar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"The Most Simple Progress Bar with HTML, CSS, JavaScript"}]},{"@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\/5","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=5"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/5\/revisions"}],"predecessor-version":[{"id":1413,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/5\/revisions\/1413"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=5"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=5"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}