# Custom attributes on the element

An HTML data-\* attribute and its corresponding DOM dataset.property modify their shared name according to where they are read or written:

In HTML The attribute name begins with data-. It can contain only letters, numbers, dashes (-), periods (.), colons (:), and underscores (\_). Any ASCII capital letters (A to Z) are converted to lowercase.

In JavaScript The property name of a custom data attribute is the same as the HTML attribute without the data- prefix, and removes single dashes (-) for when to capitalize the property's "camelCased" name.

* dataset to add a new attribute

```
flag[key].dataset.placeable = true;
```

* loading a dataset

```
console.log(flag.dataset.placeable);
```
