HTML id Attribute

Subject: html

🔖 HTML id Attribute

The id attribute in HTML is used to assign a unique identifier to a specific element on the webpage. Unlike classes, which can be shared by multiple elements, an id must be unique across the entire HTML document.

❓ What Is an ID?

You can assign an ID using the id attribute like this:

🚀 Try it in Compiler

This unique name can be referenced in CSS, JavaScript, or page anchors.

🚀 Why Use IDs?

  • 🎯 Apply CSS styles to a single, unique element
  • 🧪 Target a specific element with JavaScript
  • 🔗 Create anchor links within a page
  • ♿ Enhance accessibility by associating labels with elements

💡 Example: ID with CSS

🚀 Try it in Compiler

📌 Key Points About IDs

  • 🔒 IDs must be unique — one per document
  • #️⃣ Target with # in CSS (e.g., #main-header)
  • 🔝 Higher specificity than classes in CSS
  • 🧠 Ideal for JavaScript DOM manipulation
  • 🧼 Use clear, descriptive ID names (e.g., #footer-logo)

🧠 Key Takeaway

  • The id attribute uniquely identifies a single element
  • Used in CSS (#idName), JavaScript (getElementById()), and anchor links (#idName)
  • Always ensure IDs are unique on the page
  • Prefer IDs for specific targeting, not general styling
  • Combine with semantic HTML for clear and accessible web structure
Next: HTML File Paths