# Id field

The id attribute, short for identity, defines a unique name for an element.

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LopmyZlk2Yq_1FPWe2F%2F-Lopod3duA_jz2Fhim7U%2Fimage.png?alt=media\&token=9dfa070b-02ca-4845-8841-14ade5911de8)

Using an id lets you find that element easily in code and apply styles.

During export every element is given a unique id. If two elements have the same default id a new one is created. Ids must be unique per page. 

View the messages that are created during export to see any notifications of duplicate ids.

When you define your own id you can refer to it in code and stylesheets.

```
// JavaScript
var element = document.getElementById("myElement");
```

Set the id to `none` to exclude the id attribute. 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LpERPnzvAXSbi2tHwo8%2F-LpERu_VPKDGpxIMiuOe%2Fimage.png?alt=media\&token=951b2f25-f658-416b-a8b7-2d9216241d05)

{% hint style="warning" %}
Removing the id can break the look and behavior of your page or element.
{% endhint %}

{% hint style="info" %}
Ids are case-sensitive. For example, “myelement” is different than, “MyElement”.
{% endhint %}

#### Demonstrations

These pages are included in the examples projects

{% embed url="<https://velara3.github.io/WebExport/exports/id/Id.html>" %}

{% embed url="<https://velara3.github.io/WebExport/exports/id/Getting_element_by_id_.html>" %}

{% embed url="<https://velara3.github.io/WebExport/exports/id/Id_and_a_style_declaration.html>" %}

{% embed url="<https://velara3.github.io/WebExport/exports/id/Layers_with_same_id.html>" %}

#### Example Project

{% embed url="<https://github.com/velara3/xd-examples/tree/master/web-export/examples/id>" %}

#### Learning Material

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/id>" %}