# What are HTML IDs and how do they differ from classes?

The `id` attribute in [HTML](https://www.ionos.co.uk/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.co.uk/digitalguide/websites/web-design/what-is-css/) and JavaScript.

## What is an HTML ID?

An HTML ID is an [HTML attribute](https://www.ionos.co.uk/digitalguide/websites/web-development/html-attributes/) that helps uniquely identify an 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.co.uk/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
<p id="Testid">We’re assigning this paragraph the ID ‘Testid.’</p>
```

In this example, we assigned an [HTML paragraph](https://www.ionos.co.uk/digitalguide/websites/web-development/html-paragraph/) the ID ‘Testid’. Let’s take a look at a more detailed example to see how HTML IDs can be used:

```HTML

<html>
<head>
    <style>
        #header {
            background-color: blue;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
<h1 id="header">An example of an HTML ID</h1>
<p>The header demonstrates how an HTML ID can be used.</p>
</body>
</html>
```

Here, an [HTML header](https://www.ionos.co.uk/digitalguide/websites/web-development/html-heading/) is assigned the ID ‘header’. Since [CSS is included in the HTML](https://www.ionos.co.uk/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.co.uk/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.co.uk/digitalguide/websites/web-development/html-id/](https://www.ionos.co.uk/digitalguide/websites/web-development/html-id/) for AI/LLM consumption.