I found during my local development that ​ was being inserted into the page. Rows of it: ​​​​​​​​​
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.
Initially, the file consisted of:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
/* Some JS */
</script>
</head>
<body>
</body>
</html>
Im very confused, so I try adding a doctype to it <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Still no luck, then through googling I notice things about charsets, so I add UTF-8. <meta charset="UTF-8">
Ohh, its gone. But not quite. Checking the source, ​
has now changed to ​
but its no longer visible on the page. Also known as Zero Width Space? (after some googling).
Why is this happening?
Final code, now with the zero width space showing in Chrome Dev Tools Inspector.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
/* With or without JS code in these, the issue occurs */
</script>
</head>
<body>
Hello World
</body>
</html>
Progress:
I finally removed all the JS, but leaving the script tags, and managed to narrow it down to being caused by the <script></script>
tags. Even when empty. Without these, the weird characters would not show, on page or in Inspector.
Why is this happening? I know best practise is to use external JS files, but why is it happening. Very strange.
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: Why is "​" being injected into my HTML?
Update 1 Oops. Rookie error. Forgot script tag is not self closing. Changed, but still issue. Corrected above final code.
Update 2 Issue fixed as per my answer below. No explanation found though as to why this happened.
Update 3 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.
I have pasted your code into
Notepad
inWindows
then saved it locally and browse it fromFireFox
andChrome
but did not see your problem.This may be cuased by problematic jQuery loading. Try excluding loading
jQuery
or try to load it locally not fromCDN
or any online location.You can also check this similar question: Why are these wierd characters being inserted in Facebook iframe when using jQuery? ​
Self answering as I found no explanation for the strange appearances in the code, but I did find a way to fix the issue.
Copy all other code out of the old file, into a brand new blank file, block by block, completely replacing it, and the issue appears to go away.
This means it must be a character encoding issue or something? Sublime is plain text, so seems odd. But, its gone now. And I think it will be one of those that cant be explained, as it cant be reproduced by others. Useful for someone else who finds this in Google in future though. Just copy the code block by block into a new file...
Solution/Workaround fix, without a reason for why it all happened in the first place... :s
I got the same issue on a Mac: Here was the issue. I copied paste from a PDF, so I had some special characters added only displayed on the browser. the solution was to delete some characters around and retype then by hand.
You have invalid (not well formed) script part of html. You have:
should be: