HTML meta charset not working - html

At the beginning of my page, I have the following code:
<HTML>
<head>
<meta charset="utf-8">
<title>
//other
I used the meta because I have to put in my website some Japanese characters. Here you can see an example:
<tr>
<td><label class="blacktd" onmouseover="apriimg('imgbox', '4');"> Shy Guy Bazaar </label></td>
<td>2'03"007</td>
<td>そうめん</td> //look at here
<td><img src="http://mk7vrlist.altervista.org/flags/jp.gif" /></td>
<td>2013/06/30</td>
</tr>
I googled this and I saw that I simply need to put that tag with the charset attribute. By the way my webpage shows %u305D%u3046%u3081%u3093 instead of "そうめん". Do you know why?

Because either:
You have an HTTP header which specifies a different character encoding (HTTP headers take priority over meta elements) or
You haven't saved the document using UTF-8 (you are just telling the browser that you are)

Is your doctype HTML5
<!DOCTYPE html>
if not you have to use this for all other doctypes
<meta http-equiv="content-type" content="text/html; charset=utf-8">

Thanks to all answerers, but I have had troubles solving it, as I saved the file in two editors (Leafpad and vim) as UTF-8, still getting weird characters in browser. The culprit was, as described here, the byte order mark, which seems not to be set by default in both the editors but has to be set explicitly in vim:
:set bomb
This solved the problem for me finally.

Related

HTML how to get it to display čšž on your site

Trying to learn to make a site. And right from the start:
How do I get HTML to display ščž and other various special characters like ł,ß,ö..?
You need to specify a character set so the browser knows what's being used in the page. For example, in your head section, try putting:-
<meta charset="UTF-8">
You can also try specifying symbols using their entity name/code, using the character reference table here - https://dev.w3.org/html5/html-author/charref
Here's an HTML5 example. meta declares the encoding of the HTML file. Make sure to save the file in that encoding!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>How do I get HTML to display ščž and other various special characters like ł,ß,ö,&#x9A6C..?</body>
</html>
You can enter any character you know the Unicode codepoint using &#xnnnn syntax. In the example above, U+9A6C is the Chinese character for horse(马).

Understanding HTML meta charset

Below is the sample HTML I have written to understand about meta charset tag.
<!DOCTYPE html>
<html lang="en">
<HEAD>
<meta charset="ANSI" />
</head>
<body>
如
</body>
</html>
The BODY tag of this HTML contains chinese character.
Because chareset is set to "ANSI" , I was expecting that the chinese character will not be displayed in the browser, instead some junk character will get displayed.
I would like to know why chinese character is getting displayed correctly, even though charset is "ANSI" instead of UTF-8.
"ANSI" is not a valid value for charset.
A browser may also ignore the <meta> tag if:
the HTTP Content-Type header tells it otherwise;
there is a BOM at the beginning of the HTML; or
the browser does not think the page is in the named charset (see this process for determining a page's character encoding).

HTML5 page language, direction and encoding

What is the correct way of declaring a HTML5 page to be in Hebrew, RTL and utf-8 encoded? I haven't done it in a while, but I remember that in HTML4 it involved 3 or 4 tags and attributes that seemed redundant. Is it still the same?
<html dir="rtl" lang="he">
<head>
<meta charset="utf-8">
...
</head>
...
</html>
You need the following:
A <!doctype html> to indicate your page is HTML5.
An <HTML> tag with the following attributes:
dir="rtl"
lang="he"
Note: you may omit the ", or use ' instead.
A <meta> tag to declare the character encoding. You can choose one of the following:
<meta charset="UTF-8">
Note: you may omit the ", or use ' instead.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
This is the "legacy" way of declaring character encoding. It's still allowed within HTML5, but all modern browsers support the first variant so there is no need for this.
Note: you may omit the " for the http-equiv attribute, or use ' instead for all attributes.
If the browser encounters an UTF-8 byte order mark, it will treat an HTML5 file as UTF-8. This happens regardless of any character encoding declared using meta tags.
None of the tags, attributes and attribute values used here, or the DOCTYPE, are case sensitive.
Note: if the browser encounters a character encoding declaration, it will re-parse the document from the start using the specified encoding. You can put your encoding inside a Content-Type HTTP header so this won't be a problem.
Note also that the browser will only look for a character encoding declaration in the first 1024 bytes of a document.
You need these to create a HTML5 page with language as hebrew, direction as RTL, and utf-8 encoded
<!DOCTYPE html> For declaring it as a HTML5 page
<html dir="rtl" lang="he"> For direction and language
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> For utf-8
<html dir="rtl" lang="he">
not: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Does not work on "Chrome" and "Firefox" browsers.

How to fix the font issue in HTML?

I have Html (hello.html) like bellow
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
</head>
<body>
<div>
¿Hola cómo está?
</div>
</body>
</html>
It shows out as "¿Hola cómo está?" when run in browser
Is there any solution to get correct out put without altering the
hello.html file?
I hope that, it is in Spanish language but i looking for any other solution like as change the encode type or font in browser or editor.
Edit: Just noticed the requirement. But some Spanish characters require Unicode and you have to declare that in your html file.
Put this in your head.
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
I don't see whats wrong, if you are refering to the font type in the html and the webpage is different is because of your editor, if you really want to change the font you will need to set the font tag around your text or even better define it in the CSS
Based on the clarification in the comment section to your question....
If you are using Google Chrome, and your computer is set to an English locale, load the page, then right click on the body, and select "Translate to English."
Sounds like an interview trick question, rather than a programming one.
No.
You cannot do this without altering the html file.
Place this <meta> tag in your Head Section
<meta charset="UTF-8">

Multiple Html <head> in the browser , caused by DreamWeaver bom

I am using DreamWeaver to code xHtml docs. in the program the code is valid but when I upload it in the inspect element I see double <head> tags and when I right-click to see the source file it seems o.k.
Is it because I'm using dreamweaver? what can be wrong?
the first error is : "Extra <html> encountered. Migrating attributes back to the original <html> element and ignoring the tag." - in line 3
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="the content of my doc" />
<meta name="description" content="this is an example document" />
<link rel="alternate" type="application/rss+xml" title="rss feeds" href="linkto/xml/feeds.xml" />
<!-- scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>The Title</title>
</head>
<body>
<!-- content -->
</body>
</html>
Thank you very much.
No problem in Chromium 5.0.307.9 (Developer Build 39052) under Linux. I can't test it in Safari now.
EDIT: Proposed test case had nothing to do with this problem, neither could see any extra <head> tags. However, I looked at the Developer Tools of Safari and Chrome under Windows and Firebug in Firefox and all three rendered the DOM incorrectly. Just have a look at this picture and see that the first <link> tag has jumped into the body.
This problem also has nothing to do with Javascript because when turning off Javascript the result is the same, even more clear when comparing with the source code. Strange I didn't notice this under Linux.
The Developer Tools of the WebKit browsers give an even clearer picture (also notice the jQuery error message). I suspect the Unicode Byte-Order Mark (BOM) at the beginning of the file causing the problem: as you can see the BOM is moved to the <body> of the document, perhaps dragging several elements in the <head> with it. But also the unclosed <link> elements, as shown by the W3C validator, might give some issues, although browsers usually handle this without any problems. First get rid of the BOM in your file and see if the problem persists.
And I see another error: those tags beginning with <meta ... are called meta tags, not "meat tags". ;-)
You should have a title element what you write between
the <title></title> tags will been displayed in top bar of your browser
Just make sure your
</head>
tag has the slash in the actual file you're working on. That's an easy typo.
To remove BOM from your document, you can use this php function:
function removeBOM($str=""){
if(substr($str, 0,3) == pack("CCC",0xef,0xbb,0xbf)) {
$str=substr($str, 3);
}
return $str;}