A little confused about the most basic and common meta tag of all

I’m brand new to HTML and XHTML, and very much looking forward to learning it. My question will probably seem ridiculously simple to whomever reads this. But we all have to crawl before we walk, right?

Anyway, I’m reading Ian’s book, "Build Your Own Website . . . ", and I’ve been doing all the exercises religiously. The very first one contains the following meta tag, which I’m sure you’ll recognize:

<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>

But when I included that in the markup, saved it to a file and tried to open it in Firefox, I got a blank page. Of course, I had no way of knowing that this particular element was the source of the problem. But I found out PURELY by accident. I started over and was very careful to type everything exactly as it appeared in the book – except that THIS time, I inadvertently hit the shift key, and typed this instead:

<meta http-equiv=“Content-Type” content+“text/html; charset=utf-8”>

It took me a few minutes to inspect everything and see what I had typed differently. But as it turned out, that little 'ol “plus” sign made all the difference in the world. The page now opened in my browser.

But why did this happen? Had I not accidentally hit that shift key, I’d probably STILL be trying to figure out what I did wrong. I was lucky – this time.

So what’s the deal with this encoding meta-tag? Why the discrepancy with what was in the book? And which way is the right way? Are there other places where I will have to make a similar substitution?

I’ve moved on to other exercises in the book, and all goes well. But that question keeps nagging at me. So I figured it was probably time for my first post :slight_smile: A little insight would really be appreciated.

The book is correct. Check any web page out there.

My question will probably seem ridiculously simple to whomever reads this.

Not really. What I liked about Lloyd’s book was, he gets you started with the Doctype and the meta tags and just says, just copy them for now and later we’ll explain them.

And I learned much later what all the MIME type and charset stuff was.

What the tag means:


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

First section, http-equiv=“content-type” content="text/html is stating the MIME type. That is, the type of file/document/application this is. Html, shtml and htm files are text/html.

A PNG is an image/png.
A PDF is an application/pdf.
An Excel document is application/vnd.ms-excel

And if you were writing TRUE XHTML then you would use
application xhtml+xml (but you won’t for the same reasons almost nobody does… and this is why your “XHTML” documents are really nothing more than slightly-invalid HTML4 documents).

Though here’s the thing: If you created your HTML document in a program, but saved it as something that ISN’t text/html (let’s say by default your text editor saves stuff as text/plain, which is the correct MIME type for .txt files for example), then the meta tag means little to the browser.

Second, that meta tag doesn’t mean anything to a browser if the server says something different in the HTTP headers. The server overrides when the two conflict.

The second part of the tag, charset=utf-8", sets the character set. Again, if the document wasn’t actually saved in that charset, or if the server says some other charset (and again the server overrides), then you have a problem. Usually you can see this as any non-US-ascii characters getting muddled.

All three of these things should match (how the document was saved, what the meta tag claims, and how the server is sending the document out). So if your stuff is appearing when you basically make the browser ignore the meta tag, that leads me to suspect that either the way you saved the file is weird or the way your server is presenting it is off.
I would say any server should automatically assign the text/html MIME type to any file whose name ends in .htm, .html or .shtml so long as it doesn’t have any weird start bytes.

And welcome to SitePoint : ) Lloyd’s book was my first front-end book.