Using the Right Tag for the Right Job - HTML5 Mastery: Semantics, Standards, and Styling - page 34

id

• The value may appear once and only once per page so as to identify a
single element.

class
• The value may appear multiple times per page.
• A particular class attribute value may contain multiple class names,
each separated by a space.
To illustrate these differences, consider the following code snippet:
<p id="about-text" class="homepage popup">
This code contains the unique id attribute of about-text and two classes:
homepage and popup . The id attribute of about-text would not be able to be
used anywhere else, while both homepage and popup could be used on other ele-
ments. Note that elements do not need to have both an id attribute and a class attrib-
ute assigned to them; they could have one or the other, or neither. Also, to avoid prob-
lems, don't begin an id or class attribute with a number, and definitely don't include
spaces (use dashes or underlines instead) in the name.

SENSIBLE ID AND CLASS VALUES

It can be very tempting to assign values based on how you want the element to look,
rather than what it is, but it is best to avoid doing so. For example, instead of values
such as this:
<div

id="topBox"> <strong class="redText"> <p

class="big">
you should instead use values such as this:
<div id="notificationBox"> <strong class="important"> <p
class="introduction">
Why? Simply because one day you may find you need that strong element to be
blue instead of red, or you may want to move this box of content from the top of the
page to the bottom—and when that happens, your id or class value will be mis-
leading.

Both these attributes are used extensively in web development, so it is essential you
are familiar with them. We will work with CSS and JavaScript where appropriate to il-
lustrate the features of HTML5, but briefly, if you want to reference and style these at-