 <p>According to the Molliza Developer Network <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta" rel="nofollow">documentation</a>:</p> <blockquote> <p>The HTML <code>&lt;meta&gt;</code> element represents any metadata information that cannot be represented by one of the other HTML meta-related elements (<code>&lt;base&gt;</code>, <code>&lt;link&gt;</code>, <code>&lt;script&gt;</code>, <code>&lt;style&gt;</code> or <code>&lt;title&gt;</code>).</p> </blockquote> <p>Charset (Character set) is a set of encodings used to represent characters to the screen. UTF-8 is a specific type capable of encoding all possible characters, or code points, in <a href="https://en.wikipedia.org/wiki/Unicode" rel="nofollow">Unicode</a>.</p> <blockquote> <p>Q: In the above code what is the meaning of <code>&lt;meta charset="utf-8"/&gt;</code>?</p> </blockquote> <p>Adding this attribute declares, but don't guarantee the character encoding used for that specific web document.</p> <blockquote> <p>Q: If i remove it from the code, there is no error.</p> </blockquote> <p>Remember when I said there was no guarantee in the previous sentence? This is because the <code>&lt;meta ..&gt;</code> tag is only part of the algorithm that browsers use to apply. Again, referencing the mozilla docs, <em>The HTTP Content-Type header and any BOM elements have precedence over this element</em>. For a more comprehensive understanding, see <a href="https://html.spec.whatwg.org/multipage/syntax.html#encoding-sniffing-algorithm" rel="nofollow">whatwg.org</a>.</p> <p>You may ask then what is the point of implementing that line at all if the browser can perform shallow reasoning to include the charset encoding by default. The answer is simple:</p> <ul> <li>More assertive programming.</li> <li>Better practice.</li> <li>The browser may get it wrong.</li> <li>Prevents <a href="https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7" rel="nofollow">IE guessing it is encoded in UTF-7</a>.</li> </ul>