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

Start learning with our library of video tutorials taught by experts. Get started

HTML5: Structure, Syntax, and Semantics
Illustration by Don Barnett

Using class and ID attributes


From:

HTML5: Structure, Syntax, and Semantics

with James Williamson

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.
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

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
HTML5: Structure, Syntax, and Semantics
4h 34m Beginner May 31, 2011

Viewers: in countries Watching now:

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.

Topics include:
  • Defining basic elements
  • Exploring the content model
  • Creating document sections
  • Using hgroup to override sectioning
  • Using the proper nesting structure
  • Choosing the right structural element
  • Using class and ID attributes
  • Building navigation
  • Grouping content with asides
  • Using divs in HTML5
  • Creating block level links
  • Defining link relationships
  • Understanding current browser support
  • Adding support for elements in older browsers
Subjects:
Developer Web Web Design Web Foundations Programming Languages Web Development
Software:
HTML
Author:
James Williamson

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.

There are currently no FAQs about HTML5: Structure, Syntax, and Semantics.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5: Structure, Syntax, and Semantics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

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.