---
id: 68ec9332a9b5b2b32487bd00
title: Step 9
challengeType: 0
dashedName: step-9
---

# --description--

The `id` attribute adds a unique identifier to an HTML element. Each `id` should be unique within a page and should only be used once.

`id` values cannot contain spaces and should only contain letters, digits, underscores, and dashes.

Here is an example:

```html
<p id="para">example paragraph</p>
```

Add an `id` attribute to your element having a class of `card` and set its value to `sally-adventure-book`.

# --hints--

Your element with a class of `card` should have an `id` attribute.

```js
assert.isTrue(document.querySelector('.card')?.hasAttribute('id'));
```

Your element having a class of `card` should have an `id` having the value of `sally-adventure-book`.

```js
assert.equal(document.querySelector('.card')?.id, 'sally-adventure-book');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>XYZ Bookstore Page</title>
</head>

<body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
  <div class="card-container">
  --fcc-editable-region--
    <div class="card">

    </div>
  --fcc-editable-region--
  </div>
</body>

</html>
```
