How to fix accent issues on your web pages?

NicolasBrondinBernard

Your accents don't display correctly on your pages? Let me explain why and how to fix this!

Article published on 27/04/2021, last updated on 10/08/2026

You've just saved a web page, and when you open it from a web server, all your accented characters have disappeared, replaced by characters like Ã, ©, ¨ and others?

This "bug" is due to incorrect character encoding, or rather to a different encoding between the writing of the html file and the reading of that same file by the browser.

What is character encoding?

When you save a text file on your machine, it is stored in binary form, as 0s and 1s, because that's how computer systems process information.

If you're not very familiar with the concept of binary, I invite you to read my introductory article on the subject!

Logically, to go from binary form to a text readable by us humans, a convention for encoding and decoding these characters must be established.

This convention simply corresponds to a table containing all the characters with their binary form, as illustrated below:

In this case, the table above corresponds to UTF-8 (Universal Transformation Format - 8 bits) encoding, now the most widespread encoding on the web.

Looking at the table, we can see that the character "è" corresponds to the binary code "11000011 10101000", so it is this code that will be found in the file you save for your web page.

But if you don't specify the encoding used when writing, your browser will use the default encoding of the HTTP protocol, which is ISO-8859-1.

Since these two encodings are different, the browser will look up your binary code in the wrong table, and will return the character ¨ instead of the expected è.

How to fix this problem?

The fix is very simple, since all you need to do is tell the browser the encoding of your original file. To do this, simply add a tag containing the charset attribute directly inside the element of your web page.

<head>
  ...
  <meta charset="utf8">
  ...
</head>

Once you've made this change, all that's left is to update your web page and admire the result: your accented characters finally display correctly!

Sigmund sur Unsplash

Finished reading this article?

Our complete coursesDiscover our premium subscription at €29.99

Go further

Take it to the next level with our courses!

Complete courses, exercises and certificates to really learn programming!

4.8 average rating

HTML/CSS

JavaScript

Git

PHP

No comments yet