Geek Answers Handbook

Are class AND id attributes allowed?

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

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

I know that there are rules about one identifier per page, and several classes are allowed in the tag, but I have not seen anything about the presence of the class And id.

+4
source share
4 answers

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

id - [case sensitive] . This attribute names the element. This name must be unique in the document.

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

The id attribute assigns a unique identifier to the element. For example, the following paragraphs differ in 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 of referencing a specific element from a script.
  • As the name of the declared OBJECT element.
  • For general-purpose processing by user agents (for example, to identify fields when extracting data from HTML pages into a database, transfer HTML documents to other formats, etc.).

The class attribute, on the other hand, manually assigns one or more class names to an element; an item can be specified to belong to these classes. The name class can be shared by multiple instance elements. The class attribute has several roles in HTML:

  • As a style selector (when the author wants to assign a style of information to a set of elements).
  • For general-purpose processing by user agents.

The following example uses the SPAN element in conjunction with the id and class attributes to mark up documents. Messages appear in the 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 will 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 }

Please note that French "msg1" and English "msg1" may not appear in the same document because they have the same id value. Authors can additionally use the id attribute to refine the presentation of individual messages, make them target anchors, etc.

Almost every HTML element can be assigned an identifier and class information.

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

 <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, for example, we can (1) create a hyperlink to it and (2) redefine the class style information with information about the instance style.

+5
source

Yes, this is normal and completely normal.

An identifier allows you to directly refer to this element. The class should say that "this element is similar to other elements of this class." Here's a handy tutorial about the difference.

To illustrate further, consider that Javascript provides the getElementById method, which returns a single element, and getElementsByClassName , which returns a list of elements with this class. Do not forget that an element can have several classes, for example. <a class="offsite reference" ...>

If you're interested in how a CSS selector can resolve conflicts between a rule defined in a class and a single click on id, see this breakdown , which links to more detailed W3C docs below.

+11
source

Yes, you can have both attributes in a tag. You may be confused by the requirement that the id value must be unique for each document?

+2
source

Absolutely, both can be used for different purposes, be it styling using CSS selectors or DOM manipulations, etc. Using both options will give you much more control.

+1
source

More articles:


All Articles