# What are HTML IDs and how do they differ from classes?
The `id` attribute in [HTML](https://www.ionos.com/digitalguide/websites/web-development/what-is-html/) is used to **uniquely identify** elements in an HTML document. This feature allows you to reference and modify HTML elements in [CSS](https://www.ionos.com/digitalguide/websites/web-design/what-is-css/) and JavaScript.
## What is an HTML ID?
An HTML ID is an [HTML attribute](https://www.ionos.com/digitalguide/websites/web-development/html-attributes/) that helps uniquely identify an [HTML element](https://www.ionos.com/digitalguide/websites/web-development/html-element/). In an HTML document, each ID must be unique. If two elements share the same ID, the document is not considered syntactically valid. The `id` attribute is often used with CSS or JavaScript to apply specific styles or perform certain actions on a particular element.
Note If you’re just starting out with HTML, our [HTML beginner’s tutorial](https://www.ionos.com/digitalguide/websites/web-development/learning-html-a-beginners-tutorial/) is a helpful resource for navigating the markup language.
## What can HTML IDs be used for?
HTML IDs can be very useful when **you want to apply an action to just one element**. Here are some instances where the `id` attribute is commonly used:
- **Styling a website with CSS:** You can apply CSS rules to a single HTML element using an ID. This is particularly helpful if you want to highlight a specific element.
- **Interacting with JavaScript:** In JavaScript, IDs allow you to access certain HTML elements and change their properties or content. This is a key part in creating dynamic web pages.
- **Hyperlinks and anchors:** IDs can be used to create anchor points within a page, allowing users to jump directly to a specific section when they click a link with the corresponding ID.
Tip You can assign an ID to **any** HTML element using the `id` attribute.
## Syntax for HTML’s `id` attribute
To define an ID in HTML, **add the id attribute to the desired element and specify an ID name**. Here’s an example:
```HTML
We’re assigning this paragraph the ID “Testid.”
```
In this example, we assigned an HTML paragraph the ID “Testid”. Let’s take a look at a more detailed example to see how HTML IDs can be used:
```HTML
The header demonstrates how an HTML ID can be used.
hash_cc2f7248f993063db82442de61956eee01df8a64
```
Here, an [HTML header](https://www.ionos.com/digitalguide/websites/web-development/html-heading/) is assigned the ID “header”. Since [CSS is included in the HTML](https://www.ionos.com/digitalguide/websites/web-design/linking-css-to-html/), the CSS rules for the header ID are applied to the header.
## HTML `id` vs. `class` – What’s the difference?
The `id` and the `class` attributes both help to identify and style HTML elements, but they have distinct properties and uses.
- **Uniqueness:** In HTML documents, each ID must be unique. An [HTML class](https://www.ionos.com/digitalguide/websites/web-development/html-classes/), on the other hand, can be applied to multiple elements, allowing you to manipulate a group of elements simultaneously.
- **Specificity:** IDs have a higher specificity than classes. This means that if both an ID and a class are applied to the same HTML element, the ID takes priority. If there are any conflicting styles, the ID’s style will override the class’s styles.
- **Referencing in CSS:** To reference IDs in CSS, a hashtag (#) is placed in front of the ID. To reference classes, a dot (.) is used in front of the class.
This is a markdown version of: [https://www.ionos.com/digitalguide/websites/web-development/html-id/](https://www.ionos.com/digitalguide/websites/web-development/html-id/) for AI/LLM consumption.