special characters turned into question mark after duplication of the same page

Question

since last friday, I've duplicated my first page ,and a lot of time (about 40 of the same one), after checking one of the duplicated pages , I found out that the special characters ( é,è,ç,...) were replaced by question marks.

and so I've searched about what could make a issue like this, that is where people talked about :

    <meta charset="utf-8" />

I've looked more into that line of code that i've left alone from the whole time, It was automatically written when i started a new page and so i didn't think i would change it anytime but now it is the right time to ask about how it works.

i would like to know if

 <meta charset="utf-8" />

only work as for one page, and thus, I would like to know how can i change it to make it avaiable to all of my html pages.(note aside, only my primary page show the special characters and i am using The French language for my page, so if you need traduction you can ask mee in the comment.)

@charset "UTF-8";
header {
  font-size: 1px;
  border: 7px ridge #1173AF;
}

header img {
  height: 340px;
  width: 1570px;
  overflow: hidden;
}

.menu {
  overflow: hidden;
  background-color: #3CA9DF;
  font-family: Arial, Serif, Sans-Serif;
}

.menu a {
  float: left;
  font-size: 12px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.accueil {
  float: left;
  overflow: hidden;
}

.accueil .accueilbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.accueil:hover .accueilbtn {
  background-color: #7FB8D5;
}

.accueil-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.accueil-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.accueil-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.accueil:hover .accueil-content {
  display: block;
}

.lycee {
  float: left;
  overflow: hidden;
}

.lycee .lyceebtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.lycee:hover .lyceebtn {
  background-color: #7FB8D5;
}

.lycee-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.lycee-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.lycee-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.lycee:hover .lycee-content {
  display: block;
}

.formations {
  float: left;
  overflow: hidden;
}

.formations .formationsbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.formations:hover .formationsbtn {
  background-color: #7FB8D5;
}

.formations-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.formations-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.formations-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.formations:hover .formations-content {
  display: block;
}

.visite {
  float: left;
  overflow: hidden;
}

.visite .visitebtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.visite:hover .visitebtn {
  background-color: #7FB8D5;
}

.visite-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.visite-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.visite-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.visite:hover .visite-content {
  display: block;
}

.vielycee {
  float: left;
  overflow: hidden;
}

.vielycee .vielyceebtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.vielycee:hover .vielyceebtn {
  background-color: #7FB8D5;
}

.vielycee-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.vielycee-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.vielycee-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.vielycee:hover .vielycee-content {
  display: block;
}

.tempsforts {
  float: left;
  overflow: hidden;
}

.tempsforts .tempsfortsbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.tempsforts:hover .tempsfortsbtn {
  background-color: #7FB8D5;
}

.tempsforts-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.tempsforts-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.tempsforts-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.tempsforts:hover .tempsforts-content {
  display: block;
}

.anciens {
  float: left;
  overflow: hidden;
}

.anciens .anciensbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
}

.menu a:hover,
.anciens:hover .anciensbtn {
  background-color: #7FB8D5;
}

.anciens-content {
  display: none;
  position: absolute;
  background-color: #7FB8D5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.anciens-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.anciens-content a:hover {
  background: linear-gradient(#7FB8D5, #E6DF53);
  /*  background: linear-gradient(to right, #333 , #FFF); */
  background-color: #333;
}

.anciens:hover .anciens-content {
  display: block;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="lyceecss.css" />
  <title>Bienvenue dans le site du Lycée Sainte-Marie</title>
</head>

<body>
  <header>
    <img src="http://via.placeholder.com/500x150"></a>

  </header>
  <nav>
    <div class="menu">
      <div class="accueil">
        <button class="accueilbtn">accueil</button>
        <div class="accueil-content">
          <a href="../college/collegesaintemarie.html">le collège</a>
          <a href="#">le Centre de Formation</a>
        </div>
      </div>
      <div class="lycee">
        <button class="lyceebtn">Le Lycée</button>
        <div class="lycee-content">
          <a href="#">Le mot du chef d'établissement</a>
          <a href="#">Plan d'accès</a>
          <a href="#">Historique</a>
          <a href="#">Horaires secrétariat</a>
          <a href="#">Organigramme du personnel</a>
          <a href="#">Date des vancances scolaires</a>
          <a href="#">La taxe d'apprentissage</a>
        </div>
      </div>
      <div class="formations">
        <button class="formationsbtn">Formations</button>
        <div class="formations-content">
          <a href="#">3° PREPA PRO</a>
          <a href="#">CAP Employé(e) de commerce Multi-Spécialités</a>
          <a href="#">BAC Pro vente 3 ans</a>
          <a href="#">BAC Pro commerce 3 ans</a>
          <a href="#">BAC Pro Acceuil Relation Client Usager 3 ans</a>
          <a href="#">Bac Pro COMMUNICATION VISUELLE PLURI-MEDIA 3 ans</a>
          <a href="#">BAC Pro PHOTOGRAPHE 3 ans</a>
          <a href="#">Modalités d'inscription</a>
          <a href="#">Résultats</a>
          <a href="#">Stages</a>
        </div>
      </div>
      <div class="visite">
        <button class="visitebtn">La vie au Lycée</button>
        <div class="visite-content">
          <a href="#">Les lieux de rencontre</a>
          <a href="#">Les ateliers</a>
          <a href="#">Les laboratoires</a>
          <a href="#">Le CDI</a>
          <a href="#">Le gymnase</a>
          <a href="#">Le self</a>
          <a href="#">L'internat</a>
        </div>
      </div>
      <div class="vielycee">
        <button class="vielyceebtn">La vie au Lycée</button>
        <div class="vielycee-content">
          <a href="#">Les Journées Portes Ouvertes</a>
          <a href="#">Voyages</a>
          <a href="#">Les projets/Les expositions</a>
          <a href="#">Les Activités de classe</a>
        </div>
      </div>
      <div class="tempsforts">
        <button class="tempsfortsbtn">Les Temps Forts au Lycée</button>
        <div class="tempsforts-content">
          <a href="#">Le Forum de l'orientation</a>
          <a href="#">OFF 2017</a>
          <a href="#">Design Culinaire 2016</a>
          <a href="#">Les nuits du Design</a>
          <a href="#">La veillé de noël</a>
          <a href="#">Journée rencontre et connaissance</a>
          <a href="#">La Journée St Joseph</a>
          <a href="#">Formation des délégués</a>
          <a href="#">Les Workshops et les Projets</a>
          <a href="#">Soirée Partenaires Entreprises</a>
        </div>
      </div>
      <div class="anciens">
        <button class="anciensbtn">Les anciens élèvess</button>
        <div class="anciens-content">
          <a href="#">Que devenez-vous ?</a>
          <a href="#">Remise des diplômes</a>
          <a href="#">Les 20 ans du Bac Pro Vente</a>
        </div>
      </div>
      <a href="#">V.A.E.</a>
      <a href="#">On parle de nous...</a>
      <a href="#">Formulaire de contacts</a>
      <a href="../college/collegesaintemarie.html">Le collège</a>
      <a href="#">Centre & Formation</a>
    </div>
</body>

</html>

<!-- end snippet -

<!-- begin snippet: js hide: false console: true babel: false -->

here you can see a duplicated image, the special characters are question mark and my border is missing

Did you try adding the encoder in the CSS. Alternatively, this question looks like a possible duplicate of https://stackoverflow.com/questions/13529665/special-characters-coming-up-as-question-marks-when-used-in-content and https://stackoverflow.com/questions/1028449/why-is-this-the-extended-ascii-character-%C3%A2-%C3%A9-etc-getting-replaced-with-c?noredirect=1&lq=1 — bbh, Jul 03 '17 at 10:44
i've checked those questions and it seems like my problem is more focused on html, some orther used it on php or i think if im right, on CSS — souzouker, Jul 03 '17 at 10:46
Please try adding the @charset "UTF-8"; to the CSS file and test if this makes any diff. Also, ensure the utf-8 is retained in the HTML. — bbh, Jul 03 '17 at 10:49
i've added @charset "UTF-8" into my snippet, i've also tried it myself but it didn't seem to change anything on my duplicated pages, and nothing changed on my primary page, it is still working well and as intented for my primary page. — souzouker, Jul 03 '17 at 10:53
i've added a picture of what my duplicated images looks like , i misses the border now that i've looked more into it — souzouker, Jul 03 '17 at 11:11
Two things, just trying to diagnose the issue: 1. Are these dynamic website served from a server. 2. In your duplicated pages, in one of the page and its css, remove the character encoding attribute. One more that you can try is to open your HTML in an editor like NOTEPAD++ and go to "format" menu and select "Convert to UTF-8" — bbh, Jul 03 '17 at 11:28
for the 1st issue: i plan on douing but no, they are not served yet. for the 2nd issue: i've removed the meta charset in html and the charset in CSS, it worked the page actually looks exactly like my primary page along with the border appearing now but im still wondering now why did it worked, i've removed both of my characters set. can you explain to mee how it is possible? — souzouker, Jul 03 '17 at 11:33

Fered · Accepted Answer · 2017-07-03T11:47:12.833

Its important to know if the characters are really converted to ?? even inside the HTML files, or just when you browse them by a browser.

If inside the html page characters are saved correctly and you see them as question mark in browser In most cases by adding <meta charset="utf-8"> (best in <head> element) to the page will fix the issue.

But in other hand sometimes when you copy and paste , or duplicate an HTML to another HTML file, due your environment situation, the encode of the new HTML file might not be Unicode or UTF-8 therefore it internally convert all special characters to question marks. Ofc when you browse this new HTML page you will see the question marks because they are actually converted to question marks at the time of file creation ( or save ).

In this case its better to first change the file encoding and then paste the content again and save it. Hope it helps

thank you! im gonna start changing all of my pages and removes the charset ! — souzouker, Jul 03 '17 at 11:50

score 0 · Answer 2 · answered Aug 04 '23 at 07:41

0

I struggled with this error too quite some time, and found Fered's answer useful. In my case I had to save the problematic file in Visual Studio with correct encoding (UTF-8) to get scandinavian chars shown correctly.

answered Aug 04 '23 at 07:41

RonVibbentrop

281
4
3

special characters turned into question mark after duplication of the same page

2 Answers2

Linked