Video: Character encodingThere are a lot of things that go into the HTML code of web pages that most authors don't pay a moment's attention to. In the previous movie, doctype are a good example of this. Most authors either copy and paste the doctypes into new files or used authoring programs that put them in for them. Character encoding is a lot like that. Character encoding is how your browser takes the binary data sent to it and translates that into characters on the screen.
Viewers: in countries Watching now:
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
- Understanding the history of HTML5
- Using new tags
- Understanding HTML5 semantics
- Coding ID and class attributes in HTML5
- Structuring documents
- Building forms
- Exploring HTML5 native APIs
- Encoding and adding HTML5 video
- Exploring associated technologies such as CSS3
There are a lot of things that go into the HTML code of web pages that most authors don't pay a moment's attention to. In the previous movie, doctype are a good example of this. Most authors either copy and paste the doctypes into new files or used authoring programs that put them in for them. Character encoding is a lot like that. Character encoding is how your browser takes the binary data sent to it and translates that into characters on the screen.
Take a look at this sample of code from an HTML 4 document. Well, you've probably seen that before, but have you actually ever really paid attention to it and what it's doing? Well, usually the http header handles character encoding, but in some cases, that header can be unreliable. To deal with those instances, authors began putting character encoding within the web page as a way to control how their pages were translated. In this snippet of code you see here, a meta tag is being used to explain that an HTML document has been sent and encoded using utf-8 encoding.
The browser will now know how to accurately translate and render characters in the document. Now the above code works just fine and is still valid HTML. However, the HTML5 specification has simplified it to make life a little bit easier for everyone. Let's go ahead and check that out. So I have opened up the trails. htm file from the 03_06 folder. It kind of picks up from where we left off. Now it has the older document encoding in it. You can see it's using a meta tag and we've got all those different attributes.
Let's go and simply that by using the HTML5 specification definition for character encoding. So the first thing I am going to do, I am going to keep the meta tag. I am just going to get rid of all the content inside of it. So I'll just go ahead and have an empty meta tag there. The next thing I am going to do is use a new attribute, the character set attribute. So charset and I am just going to say equals, and then in my quotation marks I am going to type in utf-8. Now, if you need to use a different type of encoding, go ahead and do that. You can also, if you're a big fan of the XHTML way to do single closed tag, you can do that, although the HTML5 specification is also just fine with that as well.
So you can really close that tag anyway that you see fit. So the content attribute is no longer required. We just need our character set attribute. We tell it which type of encoding we want, and that's all we need. We're going to go ahead and save that file and there you go. That's quick and very painless. Again, the previous syntax would still work. So if you want to leave it in there, you're fine to do that. The new syntax in HTML5 makes it a little easier to remember and much faster to write as you can see. No matter which syntax you prefer, always remember to add character encoding to your files.
It's incredibly important.
There are currently no FAQs about HTML5 First Look.