---
name: "[up-id]"
area: "API"
kind: "HTML attribute"
parent: "up.fragment module"
url: "https://unpoly.com/api/up-id"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.fragment module](https://unpoly.com/api/up.fragment.md)</nav>

# [up-id]

Sets a unique identifier for this element.

This identifier is used in [target derivation](https://unpoly.com/learn/target-derivation.md) to create a CSS selector that matches this element precisely. If the element already has [other attributes that make a good identifier](https://unpoly.com/learn/target-derivation.md#derivation-patterns), like a good `[id]` or `[class]` attribute, it is not necessary to also set `[up-id]`.

<nav aria-label="Guides">

- [Learn: Target derivation](https://unpoly.com/learn/target-derivation.md)

</nav>

## Example {#example}

Take this element:

```html
<section>
  <h2>Latest news</h2>
</section>
```

Unpoly cannot generate a good CSS selector for this element:

```js
up.fragment.toTarget(element)
// throws error: up.CannotTarget
```

We can improve this by assigning an `[up-id]`:

```html
<section up-id="latest-news">
  <h2>Latest news</h2>
</section>
```

The attribute value is used to create a better selector:

```js
up.fragment.toTarget(element)
// returns '[up-id="latest-news"]'
```

---

## Modifying attributes {#attributes}

### up-id {#up-id}

(required)

A string that uniquely identifies this element.