How to fix “No character encoding declared at document level” in HTML Document ?

Last Updated : 29 Jan, 2023

This article intends to solve the “No character encoding declared at document level” issue in your HTML program. So, before getting to the solution, we need to understand what this issue means. And for that first, we need to know about character encoding in HTML.

What is character encoding in HTML?

Character encoding is a system used to represent characters (letters, numbers, and symbols) in a digital document. When you create an HTML document, you need to specify the character encoding that the document uses. This is important because different character encodings represent the same characters in different ways.

Specifying the character encoding in the HTML document is important because it allows the web browser to properly display the text and symbols in the document. If the character encoding is not specified, the web browser may not be able to correctly display the characters, which can result in errors or garbled text.

Now, let us understand how to add this encoding in our HTML document so, that we can fix the given issue.

Why does this issue occur in HTML Documents?

Here are a set of scenarios when this error might occur in your HTML Document,

The <meta> tag specifies whether the character encoding is missing or incorrect. There might be a possibility that while writing an HTML document, you missed the declaration of the character encoding in the very beginning. Thus, such situations lead to this issue.
The HTML file includes links to external files with incorrect character encoding. If your HTML document includes links to external files, such as CSS or JavaScript files, and any of those files are also saved with incorrect or no-character encoding. Hence, incorrect character encoding in external files can also cause this issue.
There are other issues with the HTML document that are causing the browser to be unable to determine the character encoding. There could be other issues with the HTML document that are causing the browser to be unable to determine the character encoding. For example, there might be invalid HTML code that is causing the browser to be unable to parse the document correctly. In this case, using an HTML validator to check for any issues in the document could help identify the cause of the problem.

How do add encoding in HTML Document?

To fix the “No character encoding declared at document level” error in an HTML document, you need to specify the character encoding for the document in the head of the HTML file. We’ll discuss some examples with the proper approach, out and snippet to refer to. Here are the two examples discussed.

Method 1: Add the line <meta charset=”UTF-8″> inside the <head> element. UTF-8 is a character encoding that is widely used on the web and is capable of handling a wide range of characters from different languages and scripts.

This line is necessary to ensure that the characters in your document are displayed correctly. It’s important to note that the <meta> element with charset attribute should be placed as the first child of the <head> element, right after the <head> opening tag. It is a good practice to include the <meta charset=”UTF-8″> element in all of your HTML documents to ensure that they are properly encoded and can be displayed correctly on different devices and browsers.

Example: A simple example to illustrate the implementation of adding encoding in an HTML document.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <title>Page Title</title> 
</head> 
  
<body> 
    <b> 
        <h1 style="color: green">Welcome To GeeksforGeeks</h1> 
    </b> 
    <h2>How to add encoding in HTML Document?</h2> 
    <p>Here in this example, the "UTF-8" charset  
        has been used for declaring encoding in this document.</p> 
</body> 
  
</html>

Output:

Method 2: This time in this example we will add a different charset for having a better understanding of the HTML charsets. To add a character set to your HTML document. Inside the “head” element, you will need to add a line of code that specifies the character set you wish to use. In this case, we will be using the ISO-8859-1 character set. To do this, simply add <meta charset=”ISO-8859-1″> inside the “head” element.

This line of code tells the browser which characters set to use when displaying the content of your HTML document. It is important to include this line of code to ensure that special characters and foreign languages are displayed correctly on your website. Here’s a representation of how can you do it.

Example 2: Another simple example to illustrate the implementation of adding encoding in an HTML document.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="ISO-8859-1"> 
    <title>Page Title</title> 
</head> 
  
<body style="text-align:center;"> 
    <b> 
        <h1 style="color:green">Welcome To GeeksforGeeks!!</h1> 
    </b> 
    <h2> 
        How to fix 'No character encoding declared 
        at document level' in HTML Document? 
    </h2> 
    <p> 
        Here in this example, the "ISO-8859-1" charset has 
        been used for declaring encoding in this document. 
    </p> 
</body> 
  
</html>

Output:

Note: If your HTML document includes any kind of links to external files, such as CSS or JavaScript files, make sure that those files are also saved with the correct character encoding. And, if everything is correct on your end, using an HTML validator to check for any issues in the document could help identify the cause of the problem.

Suggest improvement

What is a Tooltip in HTML ?

Ember.js Transition Class

Share your thoughts in the comments