Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.2 hours
Getstartedhtmlcss
  • Overview
  • Transcript

5.1 New HTML5 Tags

In this lesson I will show you how to replace the very generic div tag with more appropriate HTML5 tags. Let’s get started!

Related Links

5.1 New HTML5 Tags

Welcome back. In our last lesson, we took a look at the W3C's validater and made sure that our website passed the test. In this lesson, we'll take a look at some of the new HTML5 elements being put in place by the W3C, many of which are already being accepted and used by most modern web browsers. Let's get started. So, the first thing we're going to do is open a new tab and we're going to go to w3.org/TR/html5-diff. D-I-F-F. We're going to hit Enter. We're going to scroll down till we get to Section 3.1 New Elements. This is a list of all of the new proposed elements to be added in HTML5. We aren't going to cover all of these, but we are going to cover the important ones that are being used in day to day HTML code. Many of these elements will actually end up replacing the div tag as they better describe what typical divs are used for. So let's that a look at this main element, for example. It's supposed to represent the main content or body of a document or application. Well, if we toggle over to Sublime, we can see that's the main div we've been working in for the most part. So where you'll normally see something like div with perhaps a class equal to main. And we haven't talked about classes yet, but that's typically what an HTML div would look like is div class main. And we get a lot of our styling from talking to that class through CSS sheets. What we can do instead now is just declare this div a main tag. We can keep the style attributes there, but I do need to change this closing div as well. So I'm going to scroll all the way down to the bottom. Instead of a closing DIV, we'll do closing main. I'll go ahead and save this. Toggle back over to my website and refresh and we'll see that nothing visually has changed. This is just slightly better syntax for the HTML5 markup as it better describes what we're doing with that particular div. And we'll see this type of tag paralleled throughout the HTML5 editions. In fact, if we go back to the HTML5 tag, and take a look at aside, we see that it represents a piece of contact that is only slightly related to the rest of the page, like a sidebar. So we can kick over to our webpage, and see where we have the navigation right here? Would probably be a pretty good aside. Let's toggle back to the HTML page, scroll up and we see that our navigation is inside this div. So where we might see something like div class equals sidebar. Instead, we can actually just rename this entire element to be an aside. And, once again, we'll want to make sure we match that up with a closing tag. We'll save it, toggle back and refresh. And again, nothing has changed but we're just properly implementing the HTML5 version. Let's take a look at one last one and that's the nav, right here. It represents a section of the document intended for navigation. But we have that on our website as well. So let's toggle back here. And right here, we see an h2 that directly says navigation. Well instead of actually having to label this navigation, which kind of always looks silly on a site anyways. We can get rid of that, and we'll just create a nav tag. We'll surround the entire thing in nav tags. And we'll go ahead and highlight and indent that just for easier code management. We'll toggle back, we'll refresh. And because we got rid of the h2, things look a little bit cleaner, but other than that, there's no real changes other than the fact that once again, we're using the HTML5 tag. So we're a little bit more compliant with the W3C. We can even do the exact same thing with this header tag. So if I toggle back to Sublime, I see this top div that's all black is actually going to be my header. So once again, I can change that div to be header and change the closing div as well. We aren't doing much with tag, but if we were to, it would be much more HTML5 of us to have this labeled as the header tag versus just some blank, generic div tag. The last two tags I want to point out are section and article. These are great in use in much larger websites where maybe you have a page that has multiple different sections. The way you would structure that is inside your element, you would create a new section. Within that section, you could create other subsections by just creating another section and then maybe giving it a class. Or if you're running a type of site that had daily, weekly, or monthly, some type of scheduled updates with some sort of new and unique content each time. That's traditionally considered an article and there's an HTML5 tag for that as well. That being said, our site doesn't really need to be broken into any more sections. And it certainly doesn't have any blog articles, so we can go ahead and remove these. So section, article, main, aside, header, footer and nav are the key HTML5 elements that are being used quite a bit in today's practice. But there are a lot of new HTML5 elements that are being added to that list or modified every single day. So I strongly encourage you to stay up to date with what's going on in the W3C by checking this link every so often. In this video, I've shown you the HTML5 elements that are becoming more and more ubiquitous. It's important to understand that you can still use a div in place of these along with HTML5 and it'll work just fine. In fact, it's quite common to see that, but anytime you can use more appropriate HTML5 element, you probably should. In the next video, we'll do our conclusion and talk about your awesome website and how fun it was to learn HTML. Thanks for watching.

Back to the top