Are class AND id attributes allowed?

Question

Is it permissible to have both class AND id attributes in the same HTML tag?

<p id='a' class='b'>

I know there are are rules about one id per page, and multiple classes are allowed in a tag, but I haven't seen anything about having a class AND an id.

Answer 1

Yes that's fine and perfectly normal.

The id is there to let you refer to that element directly. The class is there to say "this element is like other elements of this class". Here's handy tutorial on the difference.

To illustrate further, consider that Javascript provides a getElementById method which returns a single element, and getElementsByClassName which returns a list of elements with that class. Don't forget an element can have multiple classes too, e.g. <a class="offsite reference" ...>

If you're wondering how a CSS selector might resolve conflicts between a rule targetted at the class, and one targetted at the id, see this breakdown, which links to more detailed W3C documents at the bottom.

Answer 2

Yes, you can have both attributes in a tag. You might be confused by the requirement that id value should be unique per document?

Answer 3

Absolutely and both can be used for different purposes, whether it is styling through CSS selectors or DOM manipulation etc. Using both will give you a lot more control.

Answer 4

According to W3c Recommendation's 7.5.2 Element identifiers: the id and class attributes:

id - [case-sensitive] - This attribute assigns a name to an element. This name must be unique in a document.

class - [case-sensitive] - This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

The id attribute assigns a unique identifier to an element. For example, the following paragraphs are distinguished by their id values:

<P id="myparagraph"> This is a uniquely named paragraph.</P>
<P id="yourparagraph"> This is also a uniquely named paragraph.</P>

The id attribute has several roles in HTML:

• As a style sheet selector.
• As a target anchor for hypertext links.
• As a means to reference a particular element from a script.
• As the name of a declared OBJECT element.
• For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:

• As a style sheet selector (when an author wishes to assign style information to a set of elements).
• For general purpose processing by user agents.

In the following example, the SPAN element is used in conjunction with the id and class attributes to markup document messages. Messages appear in both English and French versions.

<!-- English messages -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN>
<P><SPAN id="msg3" class="error" lang="en">Bad syntax for variable name</SPAN>

<!-- French messages -->
<P><SPAN id="msg1" class="info" lang="fr">Variable d&eacute;clar&eacute;e deux fois</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">Variable ind&eacute;finie</SPAN>
<P><SPAN id="msg3" class="error" lang="fr">Erreur de syntaxe pour variable</SPAN>

The following CSS style rules would tell visual user agents to display informational messages in green, warning messages in yellow, and error messages in red:

SPAN.info    { color: green }
SPAN.warning { color: yellow }
SPAN.error   { color: red }

Note that the French "msg1" and the English "msg1" may not appear in the same document since they share the same id value. Authors may make further use of the id attribute to refine the presentation of individual messages, make them target anchors, etc.

Almost every HTML element may be assigned identifier and class information.

Suppose, for example, that we are writing a document about a programming language. The document is to include a number of preformatted examples. We use the PRE element to format the examples. We also assign a background color (green) to all instances of the PRE element belonging to the class "example".

<HEAD>
<TITLE>... document title ...</TITLE>
<STYLE type="text/css">
PRE.example { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="example" id="example-1">
...example code here...
</PRE>
</BODY>

By setting the id attribute for this example, we can (1) create a hyperlink to it and (2) override class style information with instance style information.