How can I properly display German characters in HTML?

U

9

30

My pages contain German characters and I have typed the text in between the HTML tag, but the browser views some characters differently. Do I need to include anything in HTML to properly display German characters?

<label> ausgefüllt </label>

Unworthy answered 8/1, 2009 at 9:35 Comment(3)

could you provide the german text please and indicate which browsers – Ridgepole 8/1, 2009 at 9:39

<label>ausgefüllt<label> ,I am testing in FF v3.0.5 – Unworthy 8/1, 2009 at 9:41

It would be nice if you provide this information in the question text, so everybody can see it without reading the comments. Thanks! – Bedell 8/1, 2009 at 9:58

R

76

It seems you need some basic explanations about something that unfortunately even most programmers don't understand properly.

Files like your HTML page are saved and transmitted over the Internet as a sequence of bytes, but you want them displayed as characters. In order to translate bytes into characters, you need a set of rules called a character encoding. Unfortunately, there are many different character encodings that have historically emerged to handle different languages. Most of them are based on the American ASCII encoding, but as soon as you have characters outside of ASCII such as German umlauts, you need to be very careful about which encoding you use.

The source of your problem is that in order to correctly decode an HTML file, the browser needs to know which encoding to use. You can tell it so in several ways:

The "Content-Type" HTTP header
The HTML META tag
The XML encoding attribute if you use XHTML

So you need to pick one encoding, save the HTML file using that encoding, and make sure that you declare that encoding in at least one of the ways listed above (and if you use more than one make damn sure they agree). As for what encoding to use, Germans often use ISO/IEC 8859-15, but UTF-8 is increasingly becoming the norm, and can handle any kind of non-ASCII characters at the same time.

Reside answered 8/1, 2009 at 9:59 Comment(4)

You should alter the order: 1. HTTP header field, 2. XML declaration, 3. HTML META element. See w3.org/TR/html401/charset.html#h-5.2.2 and w3.org/TR/xml/#charencoding – Hereupon 13/6, 2009 at 13:5

UTF-8 is actually quite common in Germany now and can make all the difference when using German text. If ISO/IEC 8859-15, doesn't work you should definitely try UTF-8 as the next option. – Hatfield 20/1, 2015 at 9:48

@PhillHealey 6 years later again, I'd say UTF-8 should now normally be the first thing to use. – Reside 9/2, 2022 at 10:0

@MichaelBorgwardt 11 hours later... Yes, I agree. ;-) – Hatfield 9/2, 2022 at 21:20

W

37

UTF-8 is your friend.

Try

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">

and check which encoding your webserver sends in the header.

If you use PHP, you can send your own headers in this way (you have to put this before any other output):

<?php header('Content-Type: text/html; charset=utf-8'); ?>

Also doublecheck that you saved your document in UTF-8.

Whenever answered 8/1, 2009 at 9:40 Comment(5)

I have already added in My head tag,Still i got the hidden character – Unworthy 8/1, 2009 at 9:47

then your document is probably not in fact saved in UTF-8 – Reside 8/1, 2009 at 10:0

You need the proper header to be sent from the webserver. The META tag won't be enough – Sanson 8/1, 2009 at 10:37

Explanation: originally, it was intended that the webserver would parse the file and set its headers according to the <META HTTP-EQUIV="..."> tags, but webservers generally don't, and it's not specified how the browser should behave if they disagree. – Reside 8/1, 2009 at 13:3

@brazzy: it is specified in detail: w3.org/TR/REC-html40/charset.html#spec-char-encoding and there are a few FAQ/QA articles on W3C website about this. – Bedford 8/1, 2009 at 13:12

H

11

Try the solution in blog post German characters encoding issue (2012-05-10):

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

Harshman answered 15/5, 2012 at 8:15 Comment(0)

N

8

Have you tried ü (ü) and Ü (Ü)?

You can find how to type other letters here.

None answered 8/1, 2009 at 9:51 Comment(4)

that's massively impractical given how common these are going to be, he shouldn't and doesn't have to encode like this – Ridgepole 8/1, 2009 at 10:30

Maybe, but this is how code my homepages with Swedish characters. – Tosha 8/1, 2009 at 10:48

It's a workaround, but fortunately no longer necessary, if you specify the correct encoding. Sorry for the downvote, but there are much better solutions around. – Erma 8/1, 2009 at 11:2

Actually, I didn't know that. I guess I'm one of those who brazzy is reffering to two posts below. :/ – Tosha 8/1, 2009 at 11:27

A

3

Declare <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">

and when saving the file, for example in notepad, choose the save as to be UTF-8 and not just .txt.

This should render the characters ok.

Anitaanitra answered 18/11, 2012 at 12:46 Comment(0)

P

3

you may try utf8_encode() or utf8_decode() functions.Check if any of these works.

For example <?php echo utf8_encode('ausgefüllt'); ?>

Hope it will work.

Punctate answered 12/11, 2014 at 18:39 Comment(0)

K

2

Sounds like a character encoding issue, in that the file is saved as a different character encoding to what the webserver is saying it is.

Kyleekylen answered 8/1, 2009 at 9:38 Comment(0)

P

2

I don't like the use of HTML entities (like %uuml;), they are only needed when there is something wrong with your characterset.

In short:

The RIGHT way is to fix your characterset.

The EASY way is to just use entities. You may not ever see any problems with this.

Tracking down characterset error can be very difficult. If you give us an URL where we can see the problem, we can probably give you a good hint where to look.

Picklock answered 8/1, 2009 at 10:53 Comment(0)

N

1

save as your file with UTF8, and use this META:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

Neall answered 15/8, 2020 at 13:35 Comment(0)

Recommended topics

Hot tags