HTML Course 13.2 id and class attributes: purpose and correct use

Overview of id and class Attributes

In HTML, id and class attributes serve as hooks for styling, scripting, and semantic identification. Both can be added to most HTML elements, but each has its own purpose and best practices.

1. The id Attribute

The id attribute:

• Must be unique within the entire HTML document.
• Identifies a single element.
• Is case-sensitive in XML-based documents (e.g., XHTML) and case-insensitive in HTML5.
• Is useful for:
• Linking to a specific part of the page (fragment identifier).
• Accessing the element via JavaScript: document.getElementById().
• Applying a unique style in CSS with #my-id selector.

Rules and Best Practices for id

• Use only once per page.
• Avoid generic names like header or content — choose descriptive names (e.g., user-profile-picture).
• Start with a letter (A–Z or a–z) and then use letters, digits, hyphens (-), underscores (_), colons (:), or periods (.).
• Keep it short but meaningful.

2. The class Attribute

The class attribute:

• Can be used multiple times on the same element (space-separated list of class names).
• Allows grouping of several elements under the same name.
• Is case-sensitive in XML-based documents and case-insensitive in HTML5.
• Is useful for:
• Applying the same style to multiple elements via CSS: .my-class selector.
• Selecting groups of elements in JavaScript: document.getElementsByClassName() or querySelectorAll('.my-class').

Rules and Best Practices for class

• Use semantic, reusable names (e.g., btn-primary, card).
• Avoid presentational names like red-text — prefer semantic ones like error-message.
• Use hyphens to separate words (main-navigation), following common naming conventions (BEM, SMACSS, etc.).

3. Comparison: id vs. class

4. Practical Examples

Example 1: Unique id for section linking and scripting.

  
Welcome to Our Site
  
Jump right in by clicking here to reach the contact form.




  
Contact Us
  

    
  

Example 2: Multiple class values for reusable styling.

  
Featured Product
  
This product is on sale!



  
Standard Product
  
Regular price applies.

Example 3: Combining id and class on the same element.

Example 4: JavaScript targeting by id and class.

Log In

5. Summary of Best Practices

• Use id for single, unique elements requiring direct reference.
• Use class for styling or behavior shared among multiple elements.
• Follow clear, semantic naming conventions (BEM, etc.).
• Avoid mixing presentational details into names; keep them meaningful.
• Ensure id values are unique and class values are reusable.