I thought the meta charset tag was used pretty widely already but the HTML below gives me the dreaded question-mark symbols on three OSX browsers: Firefox 3.5.3, Safari 4.0.3, and Chrome 4.0.222.5
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<h1> ä å ö ü </h1>
</body>
</html>
But the accented characters render correctly if I use this instead:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Did I screw up the HTML here somehow or do the browsers just not support this yet?
- Note: I changed the question a bit to better reflect the issue I'm having.
5 answers
point
Your HTML is fine. I think the problem is that browsers haven't fully implemented HTML5 yet. See here and here.
I would draw your attention to the second link especially as it has a browser compatibility chart. It also mentions that using <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> is equally acceptable. You can actually use both, although it may be a bit redundant, but if the http-equiv is what works, I would use it.
I would also note that your code did validate with http://validator.w3.org, but it issued a warning until I changed charset to http-equiv.
point
Late to the party, but that code works fine for me on FF and Safari. I think the problem is either your browser, text editor or web server’s settings.
- It’s possible to change the character encoding in your browser, eg in Firefox under View > Character Encoding. The default encoding is overridden by the page’s declaration, but changing the encoding for a page will override the page’s encoding. I’m guessing you didn’t change it manually for this page, but you could try setting it to UTF-8 and seeing if that has an effect.
- If the file is saved in another encoding your text editor may display it fine, but the encoding won’t match the declared
charset. Since you’re on Mac OS X try creating the file in TextMate, which only saves UTF-8 files. Alternatively check in save options or preferences and confirm your text editor is saing in UTF-8. - Likewise, if you’re serving it from a server that sets character encoding in Apache you’ll also be in trouble. You can check the web server by using the Firefox Web Developer extension, under Information > Response Headers. Loading the document as a file locally (drag file onto open browser window) removes this from the equation.
Re: @Abinadi Ayerdis’ validation warning, the W3 Validator gives incorrect warnings for HTML5-style charset declarations. Double-check against Validator.nu if you’re worried.
points
Great question. I don’t think this is a browser support issue — the <meta charset> thing in HTML5 was specifically put in because browsers already support it (see http://diveintohtml5.org/semantics.html#encoding).
And if the page is being served with an HTTP header specifying utf-8, I thought browsers would ignore whatever’s declared in the document itself.
Did you try removing the trailing slash from the <meta> tag?
<meta charset=utf-8>
points
All of them do it correctly but your http header is what counts. Also, remove the quotes from utf-8 cause they are either not needed or aren't supposed to be there, forgot which.
- I tried both with and without quotes, neither worked. I also checked the response headers with FF's web developer toolbar. I have this: Content-Type: text/html; charset=utf-8 So I don't know what's going on.
- Quote marks are optional, so use them if you’re used to quoting attribute variables, which is a good habit to be in.
