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!
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!
