HTML Entities rendered differently in browser
character-encoding, html, javascript, jquery, php
Solution
When you write an element in the console log, browsers apply HTML serialization as described in clause 8.3 Serializing HTML fragments of the W3C HTML5 spec. The escaping rules at the end of the clause specify:
Replace any occurrence of the "`&`" character by the string "`&`".
Replace any occurrences of the U+00A0 NO-BREAK SPACE character by the string "` `".
If the algorithm was invoked in the attribute mode, replace any occurrences of the """ character by the string """.
If the algorithm was not invoked in the attribute mode, replace any occurrences of the "`<`" character by the string "`<`", and any occurrences of the "`>`" character by the string "`>`".
Thus, in writing element content to the log, ampersands and no-break spaces are rendered as character references, other characters as such. When the browser constructs the internal representation, the DOM, from your HTML markup, it replaces the reference `℘` by the actual “℘” character. Similar operation happens to all character references, including `>`, but the two characters mentioned are rendered as references, no matter how they were represented in the HTML source.
Problem
I was learning about character encoding but in a slight confusion now. In the below code, in console I get the output as '`>`' and the browser renders it properly as '>'. ``` <div id="test">></div> </body> <script type="text/javascript"> x = document.getElementById("test").innerHTML; console.log(x); </script> ``` But, If I use this entity '`℘`' in place of '`>`', I get the rendered output both in console and in browser. What is the difference between both the entities and why is it displayed differrently in console?