Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
In our last movie, we made sure that our new HTML5 structural elements would display properly, even if they didn't really understand what all the elements were. That's not entirely true. While this technique works in almost all browsers, older versions of Internet Explorer--and by this, I mean those prior to IE9--can stumble badly when introduced to elements that they're not familiar with, even if you instruct those elements to display as block level. Now prior to Internet Explorer 9, which now, by the way, handles all of the HTML5 elements beautifully, the browser would insert the element into the DOM as an empty node with no children.
Now you can read about the shim project at his blog, remysharp.com. If you go into his archives, look in the January of 2009--so this has been around for a while-- you'll find his article on the HTML5 enabling script. And he is talking about kind of how he's basing this work off some previous work and prior work. Well, the project that he started here soon kind of took on a life of its own, and currently the code is being hosted through Google Code. So let me show you where to find that. And if you go to code.google.com/p/ html5shim/, you'll land on this page, which is the project home for the html5shim.
So I'm going to copy that and go back in my code. Now coming back into my code, I can go ahead and get rid of this script and then simply replace it with this conditional comment that we've copied and pasted from the Google Code site. Now for most people, this should work, and if you look at a lot of examples of HTML5 sites out there, you're going to find this conditional comment sitting within the code. However, in certain projects or certain corporations, you're going to want to self-host this code or come up with your own solution.
Okay, so going back to our own page, I want to go ahead and save that, and of course, we were to preview this in one of the browsers that we've been using so far. We really would notice a difference, but however, for previewing it on an earlier browser, such as Internet Explorer 7 or Internet Explorer 8, we would now see all of our elements displaying the way that we wanted them to as block-level element. So we have helped to ensure that our page is going to work in older versions of Internet Explorer. Another thing that I really like about Remy's script is that when necessary, it is updated to fix bugs or support additional features, such as the printing of the new HTML5 elements, for example-- that was added fairly recently.
So there you have it. We've now have helped to ensure that our page is going to work in older versions of Internet Explorer.
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.