title: Why is â€‹ or &#8203 being inserted into my html body randomly?
body: <p>I found during my local development that â€‹ was being inserted into the page. Rows of it: â€‹â€‹â€‹â€‹â€‹â€‹â€‹â€‹â€‹</p>
  <p>This is a basic page, hosted on a local web server via CodeKit. However this issue also occurs when I load the page direct from the pc as file://, by double clicking on it in the explorer.</p>
  <p>Initially, the file consisted of:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src=&quot;https://code.jquery.com/jquery-2.1.1.min.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
        /* Some JS */
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Im very confused, so I try adding a doctype to it <code>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;</code></p>
  <p>Still no luck, then through googling I notice things about charsets, so I add UTF-8. <code> &lt;meta charset=&quot;UTF-8&quot;&gt;</code> Ohh, its gone. But not quite. Checking the source, <code>â€‹</code> has now changed to <code>&amp;#8203</code> but its no longer visible on the page. Also known as Zero Width Space? (after some googling).</p>
  <p>Why is this happening?</p>
  <p>Final code, now with the zero width space showing in Chrome Dev Tools Inspector.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.jquery.com/jquery-2.1.1.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
        /* With or without JS code in these, the issue occurs */
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      Hello World
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>Progress:</strong>
  I finally removed all the JS, but leaving the script tags, and managed to narrow it down to being caused by the <code>&lt;script&gt;&lt;/script&gt;</code> tags. Even when empty. Without these, the weird characters would not show, on page or in Inspector.</p>
  <p>Why is this happening? I know best practise is to use external JS files, but why is it happening. Very strange.</p>
  <p>Related question can be found here for reference, which helped a little, but still does not solve it as the question is different to mine: <a href="https://stackoverflow.com/questions/18478847/why-is-8203-being-injected-into-my-html">Why is &quot;&amp;#8203;&quot; being injected into my HTML?</a></p>
  <p><strong>Update 1</strong>
  Oops. Rookie error. Script tag is not self closing. Changed, but the issue still persists. Corrected above final code.</p>
  <p><strong>Update 2</strong>
  Issue fixed with workaround as per my answer below. No explanation found though as to why this happened.</p>
  <p><strong>Update 3</strong>
  Some people are still giving votes on this so I felt I had to explain. Yes, one of the answers getting high votes outlines a typo around closing the  tags. Yes, it was a typo, on my part, when copying into SO. The original code did not have self closing tags. And either way, it had no effect on the OP question which is why are these random characters appearing.</p>