Set a Character Set
It’s important to define a character set for your HTML pages. The character set tells the web browser how the characters (letters, numbers, punctuation, etc.) are encoded, and doing so is a bigger deal than you might think.
The most common character set issue is special characters (including emoji) and other content not showing up properly. That’s annoying, but it gets worse. An incorrect or missing character set can actually be a significant security issue that opens the door to cross-site scripting attacks.
The good news is that defining a character set is easy. You just need to add a single <meta> element with a charset attribute as the first thing in your page’s <head>, like this:
<meta charset="UTF-8">There are a few things you need to pay attention to when setting your character set:
- The
UTF-8character set is highly recommended for pretty much all use cases these days. - Make sure the character set you define in your
<meta>element matches the character encoding of the actual source files you’re using. You can usually select the character encoding in the preferences of your text editor, or when saving your files. - Make sure your character set
<meta>element is the first thing in your<head>, as some web browsers will only look at the first 1024 bytes of a file before choosing a character encoding for the entire page. - Note that if the web server serving your page sets a
Content-Typeheader, the character set defined in that header will override your<meta>element (but that doesn’t mean you shouldn’t set one in your HTML anyway).