HTML

Resolving – HTML doesn’t display characters correctly

November 12, 2021

Resolving – HTML doesn’t display characters correctly

In this article we’re going to solve a classic problem: when HTML doesn’t display characters correctly, it bothers a lot of people and has a very easy solution!

HTML doesn't display characters correctly cover

Hey you programmer, okay? Let’s learn something new!

The problem occurs because some characters appear buggy to the user and this is a big headache for programmers

But luckily for us, there’s a very easy solution

And we were able to normalize the characters with a meta tag, changing the document’s encode so that it accepts the characters of our language

And the name of this meta tag is charset, which is placed in the head of the HTML

Sometimes programmers are not used to solving this because we only need to do it once for each project.

HTML does not display characters correctly: practice

Well, let’s simulate a standard HTML structure and some text so we can later solve the problem

Analyze the following HTML:

<!DOCTYPE html>
<html>
 <head>
  <title>HTML não exibe os caracteres corretamente</title>
 </head>
 <body>
  <h1>Qual é o problema?</h1>
  <p>O problema é que nós temos de levantar cedo para trabalhar. Já as crianças não, elas têm o dia todo livre para brincar.</p>
 </body>
</html>

This is the return in the browser:

Note: Do not care about this text in the image, I am not that creative!

This happens because the encode is incorrect, so we must add the charset meta tag with the value of UTF-8 to the head

See how it looks:

<!DOCTYPE html>
<html>
 <head>
  <title>HTML não exibe os caracteres corretamente</title>
  <meta charset="UTF-8"> 
 </head>
 <body>
  <h1>Qual é o problema?</h1>
  <p>O problema é que nós temos de levantar cedo para trabalhar. Já as crianças não, elas têm o dia todo livre para brincar.</p>
 </body>
</html>

And now we the problem solved:

Cool huh? 

Conclusion

In this article we leraned how to solve the character encoding problem

We simply need to add a charset meta tag with a value of UTF-8 to the head of the HTML.

Then the encode will be correct for our language

And that’s it for today, see you on the next post! 

Want to improve your HTML skills? Click here!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x