Problems related to encoding declarations are fairly common. It is important to detect and fix them in time; however, the process of specifying the character set that your website uses is not complicated.
What Does “The Character Encoding Was Not Declared” Mean?
A JavaScript error saying that “the character encoding of the HTML document was not declared” indicates that your page might be displaying garbled text. This bug most commonly occurs while using Firefox or Google Chrome browsers when a website’s character set has not been specified. Hence, the browser misinterprets the content.
Character encoding helps you define a correspondence between bytes and text. There are various types, but the standard and the most common Unicode is the UTF-8 Character Set. Unlike ASCII, this one covers almost all the known symbols. UTF-8 is also a default encoding for HTML5 documents.
What Triggers This Issue?
Here are the main reasons why the screen might tell you to declare the character encoding:
- You have recently updated a database or changed your website hosting. It may sometimes damage characters or pages.
- You haven’t added the right meta tags after the head tag to indicate which character set your page is using.
- You’ve done that, but the meta tag is placed in the wrong spot. Bear in mind that the web browsers check the first 1024 bytes for the encoding format.
- You forgot to save changes and refresh the page.
How To Check the Issue
To check if you’re using the right encoding, you may use special tools like validators that find the encoding from the HTTP headers. However, this method does not work 100% of the time; the validator might get confused, as many encodings are similar. There are other programs and web services that show HTTP headers — for instance, Delorie HTTP Header Viewer. There, you have to enter the URL of the document and look for a charset parameter.
Sitechecker is a tool that can help you. Just run an audit and find all pages that have no declared character encoding.
Additionally, you will be presented with a list of affected pages and an opportunity to view their source code.
Ensure every character on your page displays perfectly!
Not sure if you've declared a character encoding? Check it with Sitechecker!
Why Is This Important?
For the HTML or XML page to be displayed correctly, the character encoding must be declared. By specifying an encoding, you help search engines understand the data so that they are able to interpret it properly. Without this, a web browser won’t know which set of characters to use. It is also recommended to use encoding declarations in the HTTP headers together with in-document ones. It helps a tester or dev check the encoding.
If you want to learn more about character encoding and see how it works with examples, you may be interested in watching this video by Scott Hanselman.
How To Fix the Issue
To declare your HTML document’s encoding, you need to use a meta element with a charset attribute. In the case of using WordPress, you will find the line you need by accessing your Dashboard >Appearance >Theme Editor. There, you need to look for a header.php file. Right after the head tag, you will see a charset line where you have to add a meta element. Use the UTF-8 Unicode and ensure that your content is also saved as UTF-8. In practice, the line will look like this: <meta charset=”UTF-8″>.
Note that you may face an error indicating an unmappable character. This means that a symbol that is not in UTF-8 encoding has been found. To detect the problem, you need to open the file in an editor set to the UTF-8 encoding, replace the corrupted character, and save your changes.
Another option is to use http-equiv with content attributes instead, although the first method is shorter. In this case, it looks like this: <meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type”>. After that, you should save your changes and update the page.
