New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using class and ID attributes

From: HTML5: Structure, Syntax, and Semantics

Video: Using class and ID attributes

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.

Using class and ID attributes

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.

As a way to target an element when scripting, so if you're using JavaScripting, for example, to build sliding panels or things like that, you're typically going to identify those areas that are going to be interactive with IDs, and as a way to style a specific element from CSS. Really, that leads us to a couple of conclusions about how we should be using classes and IDs. They really should only be used for the purpose of identifying elements for either scripting and page navigation using fragment identifiers that we just talked about, or for controlling the element and its content's styling.

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.

Show transcript

This video is part of

Image for HTML5: Structure, Syntax, and Semantics
HTML5: Structure, Syntax, and Semantics

46 video lessons · 35068 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 20s
    1. Welcome
      48s
    2. Using the exercise files
      1m 32s
  2. 19m 7s
    1. A brief overview of HTML5
      3m 57s
    2. What's in the HTML5 specification?
      8m 17s
    3. Why do we need new structural elements?
      6m 53s
  3. 50m 33s
    1. Defining HTML5 documents
      5m 5s
    2. HTML5 syntax
      9m 14s
    3. The header element
      5m 22s
    4. The nav element
      4m 55s
    5. The section element
      4m 51s
    6. The article element
      4m 48s
    7. The aside element
      4m 13s
    8. The footer element
      4m 17s
    9. Content model overview
      7m 48s
  4. 35m 28s
    1. Understanding the outline algorithm
      3m 17s
    2. Creating document sections
      8m 25s
    3. Using headings properly
      9m 1s
    4. Using hgroup to override sectioning
      4m 17s
    5. Properly nesting structure
      7m 17s
    6. Sectioning roots
      3m 11s
  5. 58m 30s
    1. Organizing content
      4m 41s
    2. Planning document structure
      5m 47s
    3. Choosing the right structural element
      4m 43s
    4. Checking document outlines
      5m 27s
    5. Coding initial page structure
      5m 28s
    6. Using class and ID attributes
      5m 31s
    7. Structuring headers
      13m 13s
    8. Building navigation
      7m 1s
    9. Structuring footers
      6m 39s
  6. 1h 27m
    1. Working with figure and figcaption
      7m 12s
    2. Grouping content with asides
      3m 46s
    3. Using divs in HTML5
      5m 0s
    4. Working with lists in HTML5
      7m 10s
    5. The return of bold and italic
      5m 52s
    6. Citing works semantically
      6m 32s
    7. Using the address element
      5m 24s
    8. Using the small element
      4m 24s
    9. Using the mark element
      5m 16s
    10. Working with date and time
      11m 55s
    11. Creating block-level links
      8m 53s
    12. Understanding link relationships
      9m 28s
    13. Defining link relationships
      6m 23s
  7. 17m 22s
    1. Current browser support
      7m 38s
    2. Ensuring block-level display
      4m 3s
    3. Adding support for elements in older browsers
      5m 41s
  8. 3m 46s
    1. Additional Resources
      3m 46s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.