What is an ID?
In HTML, an ID is an attribute that gives one element on a page a unique name. That name lets CSS style the element, lets JavaScript find and control it, and lets links jump straight to it. Each ID can appear only once per page, so it always points to exactly one element.
More About IDs
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.
Frequently Asked Questions
- Most developers style with classes and save IDs for JavaScript hooks and link targets. Because ID styles override class styles, styling with IDs makes later changes harder: a class can’t win without extra work.
- The page will still display, but it’s invalid HTML and causes real bugs: document.getElementById returns only the first match, anchor links jump to the first occurrence, and form labels can attach to the wrong field.
- Add an ID to the element you want readers to land on, then put # plus that ID at the end of the link. Within the same page, the link can be as short as href="#pricing". From anywhere else, use the full URL, like example.com/plans#pricing.
- Not directly — ID names aren’t a ranking signal. But IDs power anchor links, and Google has long shown “jump to” links to well-anchored sections of long pages, especially when a table of contents links to them. Descriptive IDs on major sections give your page extra ways to appear.
Custom Website Design
Get a one-of-a-kind, mobile-friendly website that makes your brand truly shine. Share your vision with us and we'll take it from there.
Custom Web Design