Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the side benefits of using the new semantic elements in HTML5 is reducing the need for class and ID attributes to convey meaning. In some cases, people have taken this to mean that you really shouldn't be using classes and IDs at all, or that you should only use them in specific instances. Well, the reality is that the definition of class and IDs hasn't really changed in HTML5 at all; you are still free to use them in whatever manner you wish. Of course, the emergence of our new descriptive semantic elements means that now would be a perfect time to revisit the policies that we've used in the past for classes and IDs and then to develop new strategies that's going to help us further define our page content.
So before we get into adding IDs and classes to our current page document, I want to go back out to the specification for just a moment and take a look at the definition of classes and IDs, so we can really sort of hone in and find the focus on what these attributes are doing for us. Now, I want to start with the class attribute. You notice, these are very brief descriptions. It says, "Every HTML element may have a class attribute specified." I want to pay attention specifically to this paragraph: "There are no additional restrictions on what you can use for the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content." So what they're saying here is, try to use classes, if you can, to identify the content of the element and not just say 'red text' or 'blue text', which is not descriptive at all.
Again, it's not a requirement, but authors are encouraged to do that. Now I want to move on to take a look at IDs. And IDs are even shorter, but notice it says, "The id attribute specifies its element's unique identifier. The value must be unique among all the IDs in the element's home subtree." So the ID has to be unique for that page. There's another note down here that basically says, hey, this can be used for a variety of purposes, most notably it's a way to link to specific parts of a document using fragment identifiers. So if you want to jump down the page or up the page, IDs are a good way to do that.
That's still a really broad use statement. Those three things--in-page navigations, element scripting, and content styling--covers a lot of different elements. But when you start narrowing the focus of your CSS and sort of thinking how can I write more efficient selectors, then the needs for actually using classes and IDs starts to drop a little bit. So with that in mind, we're going to switch back over to our trails document. And this is trails.htm from the 04_06 folder. And what we're going to do is we're just going to go through all of these sectional areas that we created in the last movie and attach some IDs to identify some of the main areas of content.
Because one of the things about these semantic structural elements is that you can use them over and over, so you're not limited to just one header per page, for example. Or you're not limited to just one footer. So, a lot of times you do need to identify those contents through the use of either a class or an ID. Okay, so I'm going to go into the first header element, right up towards the top of the page, and I'm just going to go ahead and give it an ID, and I'm going to give it an ID of mainHeader. ID values can't have any spaces, so you could use underlines, for example, or something like that. I just like to use there a CamelCase naming.
So I'm going to name it mainHeader. I'm going to go down to the first section. And we really need to identify this section because this is our main article, so I'm just going to go ahead and give that an ID, and I'm giving it an ID of trailReviews because that is what's going to go inside that content, so I'll give it an ID of trailReviews. Now the secondary article that's right underneath that, not the nested article, but the one right down here that's part of the root level of the outline, we're going to go ahead and give that article an ID of riderReviews.
And then the aside, we're going to go ahead and give it an ID of adCopy. And then finally, we have our footer at the very bottom of the page. By the time our page structure is finished-- and it's going to be a lot more complex-- it will have multiple footers in it, so it's a good idea to go ahead and identify the role of this particular footer. So we're going to go ahead and give that an id, and we're just going to call that pageFooter to identify that it is the footer for the entire page. I'm going to go ahead and save that. And it's going to have no effect on the visibility of the page. It's not going to have any effect on the outline of the page. This is purely our way of identifying the main areas of content.
Later on we're going to use this to help us navigate through our document. But really, what it's doing, more than anything else, is helping us identify those areas, and it's also going to help us write some styles a little bit later on when we need to affect the presentation of these. Although we're not using classes yet, we will be adding classes and a few more IDs along the way as we add more content and structure to the page. Now, for the moment, we've identified the main areas of content and established a policy for using classes and IDs. And that policy is that they are sort of going to be used to identify the main areas of content, they should be as descriptive as possible, and we're only going to add them when we absolutely have to, and when styling needs dictate it. So we're going to try to be very judicious in their use.
We're going to continue that use policy throughout the process of building our page.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104346 Viewers
56 Video lessons · 116260 Viewers
71 Video lessons · 85483 Viewers
131 Video lessons · 40930 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.