What is an ID?

You add an ID inside an element’s opening tag, like <section id="pricing">. Any HTML element can carry one.

What is an ID used for?

That single name works in three places:

• Styling with CSS. The selector #pricing applies rules to that one element.
• Controlling with JavaScript. Code like document.getElementById("pricing") finds the element so a script can read or change it.
• Jumping with links. A URL ending in #pricing scrolls the page straight to that element. That’s how table-of-contents links work.

ID vs. class: what’s the difference?

An ID names one element; a class labels a group. Use an ID for something that appears once per page, like a header or a signup form. Use a class for anything repeated, like buttons or cards, so one style rule covers them all. Elements can have both. In CSS, the selectors differ too: #name targets an ID, .name targets a class, and ID styles win over class styles in a conflict.

Rules for good IDs

Three rules keep IDs dependable. Use each ID once per page. Skip spaces, because an ID with a space is invalid HTML and breaks the #name selector in CSS; use hyphens instead, like id="pricing-table". And treat IDs as case-sensitive, because #Pricing and #pricing are different names to CSS and JavaScript. Keep names short, lowercase, and descriptive enough that you’ll recognize them in six months.