Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As the web evolves, so does the code that runs behind the scenes. The core code language we use to develop pages on the web has evolved and it's now in its fifth iteration, thus the name HTML5. With HTML5, we've gotten a series of new tags that are more semantic or meaningful that can hook into current and future functionality in web browsers. Adopting HTML5 semantic markup also makes your site code easier to understand. In the example project for this course, I've marked everything up in HTML5.
That has a couple of caveats; it means that this code will not run properly in older browsers. It also means that some of the code in this page may not work the way it's supposed to in old browsers. That's not because there's anything wrong with the code or the browsers. It's because HTML 5 is still in a Draft format. Now this is not a course about HTML5, but I want to show you what I have done in this page, so you get an idea of what this markup is all about and why HTML5 is so important. If we look at the page itself, you will notice that at the top it just says, DocType html.
This is actually the new code definition for HTML5. Whereas, before we would specify exactly what version of HTML we were using, we are now just saying we are using HTML. When you scroll down, you will see that in addition to the regular tax, such as div and ul, we now have a series of new tags, such as header and nav. These are highly descriptive and that's what I meant when I said they are semantic. Header clearly means a header, whereas nav obviously is navigation element. If we scroll down, you will see we go further.
There's a section and inside the section we have an article that again has a header. The header even has an aside, which is kind of a side note to the header itself, and when we go further down, we will even see a figure. If we scroll all the way to the bottom of this page, we have two more elements. We have the aside, which operates as the actual side bar for the page, and at the bottom we have the footer. These new tags operate the same way that the old divs and spans did. The main difference is that they are semantic, meaningful; they actually tell you something about the content that's inside.
So instead of having just a long series of divs that open and close throughout your page, you now have different elements that kind of say something about the content. This is becoming more and more important because we are getting new devices being rolled out that handle the web differently than what we are used to. People no longer just visit a website using their computer; they may also use a phone or tablet or another device. And in the future people will be even more advanced about how they access this information. Just imagine people visiting your website through their TV or even like they always talk about, through their fridge.
When this is the case, adding these semantic tags will make it easier for these devices to parse the information, understand it, and display only what the user wants to see. So implementing HTML5 tags now, even though it's early in the game, will give you huge leg-up in the future, when these things become extremely important. By using the new HTML5 semantic tags, you make your code easier to understand and you prepare your page for future added functionality in browsers.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 73320 Viewers
80 Video lessons · 129148 Viewers
52 Video lessons · 63555 Viewers
59 Video lessons · 49315 Viewers
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.
Your file was successfully uploaded.