Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Gain a deeper understanding of HTML5 and learn how to create richer, more meaningful web pages with structural tags and descriptive attributes. In this course, author James Williamson presents an overview of HTML5 and its development, defines the new tags and attributes, and discusses how browsers parse and display HTML5 content. The course also includes step-by-step instructions for constructing an HTML5 document with a header and footer, navigation, content groups, and formatting.
Being somewhat apprehensive about learning an update as large as HTML5 is fairly natural. I remember putting off learning ActionScript 3.0 for about a month or two just because I didn't relish the thought of having to relearn everything from the ground up. Language updates tend to be more complicated, more verbose, and they require us to learn to do familiar things in new ways. Now that's why I want to start by going over some of the basics of HTML5 and showing you that in this case, sometimes less is more. HTML5 greatly simplifies many of the features found in HTML 4 and makes it easier to define the document structure.
Now, the first thing I want you to do is take a look at the sample HTML page I have open here now. You can find this in the 02_01 folder. So this is an XHTML1.0 transitional document. Nothing really complex here. It's just your everyday normal HTML file. And what I want to do is take a look at how we could create the same document using HTML5. So the first thing I am going to focus on is the document type declaration, very first line of code here. This is this a really long, sort of arcane string of text that essentially tells browser agents which set a parsing rules to use based on the document type.
So, I am going to switch over to a brand- new file, and whatever authoring program you're using, just go ahead and create a new file. And if creating a new file puts some beginning content in there--many programs do-- just go ahead and delete all that so we can just start from scratch and create everything by hand. Okay. So again, in HTML5, the document type declaration is a lot simpler. So I'm just going to go ahead and open up a new doctype declaration, and to do that, I do that by opening a tag !doctype. After that, I just have to tell it that it's an html document. That's it.
I'll go ahead and close that, and I am finished with my document type declaration. Now right away we can see a huge difference here. HTML5, remember, it's considered a living standard, so we don't need a version number. We also don't need a document type declaration URL. All we really need to do is to declare the document as an HTML file. Now truthfully, we don't even really need the doctype. But for backwards compatibility, it helps keep older browsers from triggering what we call quirks mode. So since we need it, we are going to go ahead and use the most minimal doctype possible.
Now, the thing I really love about this is that you can remember it. No more cutting and pasting or relying on authoring programs to do it for you. You can just type it in in a couple of seconds. Now, let's take a look at what else we need. The next thing I am going to do is go down to the next line and open up an HTML tag. Here I'm going to use one attribute. I am going to use the language attribute, and since I am authoring this in English, I am just going to pass along English. It's always a good idea. It's optional to pass a language attribute, but it's a good idea, so that any user agent will know what is the native language that you are authoring this in.
Now, the next thing I want to concentrate on is the character encoding for our page. Now typically, when an HTTP header is sent, the character encoding is sent along with it. But sometimes it's not the case, so it's always very helpful to do that in the head of your HTML file. Now, let's take a look at how this is done in XHTML first. So I am going to switch over to my XHTML 1.0 transitional document, and I can see right here is the meta tag that handles the character encoding. Now there's a lot going on here. This is a content type meta tag. It's telling what the content of the document is.
It's telling what character encoding to use. And there is a little bit of irony here that really shouldn't be missed by anybody. Notice that the content type being served is text/html. Well, that means that even though we have a document type declaration of XHTML, the content is being served as HTML, which means it's not really being served as XHTML; it's being served as badly formed HTML. So, a lot of irony there. All right, so let's take a look at how much easier this is to do in HTML5.
The next thing I am going to do is go down to the next line, open up a head tag, and then inside of that, I am going to go ahead and open up a meta tag--and the meta tag we are going to use this time is much simpler. I am just going to simply pass along a new character set attribute and inside that, I can pass along the utf-8 value and I am finished. No need to self-close it. I just go ahead and type in the meta tag and set the character encoding with the character set attributes--really, really simple. All right, so I am going to go and finish out the barebones of the document by adding a title and inside the title, I am going to type in "Welcome to Explore California." And after that, I'll go ahead and close the head of the file.
I am going to open up a body tag, close the body tag, and then finally, close the HTML file. I am going to go ahead and save that. I am going to save it in the Chapter_02>02_01 folder, and I'm just going to save this as html5.htm. Cool! So that's it for the basic structure of an HTML5 document. That is really all that's required to create one. That's quite simple, really, isn't it? That certainly is less ambiguous than the whole XHTML/HTML back and forth, and I would like to point out, it's simple enough to memorize.
There are currently no FAQs about HTML5: Structure, Syntax, and Semantics.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.