# Custom attributes

Custom attributes are values that you can assign to HTML elements to store extra information about those elements. They are defined using the `data-` prefix, followed by the attribute name.

For example, you could define a custom attribute called `data-product-id` on an HTML element like this:

```
<div data-product-id="12345">This element represents a product with ID 12345</div>
```

Custom attributes are often used to store data that is used by JavaScript code to perform some action on the element. For example, you could use a custom attribute to store the ID of a product, and then use JavaScript to retrieve the ID and send it to the server when the user clicks on a button.

Custom attributes are not intended to be used as a replacement for standard HTML attributes. They are intended to be used to store data that is not relevant to the element's content or presentation, and that is not covered by any of the standard HTML attributes.

### Custom attributes

You can add custom attributes from your element styling tab

<figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FHA52B1j60QraDXMOvdbs%2Fimage.png?alt=media&#x26;token=857d1058-a995-4870-88ee-e551ecab8fe6" alt=""><figcaption></figcaption></figure>

Click Add new attribute

<div align="left"><figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FgzEYMdvKgoYDpgFEugc5%2Fimage.png?alt=media&#x26;token=a8b4db7c-ae22-4414-bf41-10cf9ae680cb" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FULHfJ4moiW863On9wRw3%2Fimage.png?alt=media&#x26;token=9c5c27bd-d919-4c44-8209-b64085223b6f" alt=""><figcaption></figcaption></figure></div>

Enter your values here

<div align="left"><figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FJzSmHO4pPa5GRPVn24oK%2Fimage.png?alt=media&#x26;token=99281e75-221a-4e4e-861c-eb07d56f2bf1" alt=""><figcaption></figcaption></figure></div>

### How to add attributes to links

To add attributes to links you can do so by pressing this icon

<div align="left"><figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FWNzpdDaA47fmv6VL4Rar%2Fimage.png?alt=media&#x26;token=6f0b3b2e-b9e2-4a0b-b247-c326542a985a" alt=""><figcaption></figcaption></figure></div>
