Why and how to use the data- attribute in HTML5?

The `data-*` attribute is a special attribute in HTML5 that allows you to store extra information or custom data in any HTML elements. The stored data can then be utilized in your JavaScript functions.

This attribute is not displayed on the user interface. However, it’s still available in the HTML DOM (Document Object Model) for manipulation via scripting.

Here’s how you can use the `data-*` attribute in HTML5.

```

…

```
In the above example, `data-employee-id` and `data-employee-name` are custom attributes. They are holding data – 12345 and John Doe, respectively.

Why use the `data-*` attribute:

1. Custom data storage: `data-*` attributes allow you to store custom data, additional information that doesn’t have any visual representation.

1. Helps in DOM Scripting: These attributes play a vital role in JavaScript DOM scripting.

1. Effective data manipulation: With these attributes, you can effectively manipulate or handle the data stored in different elements without making Ajax requests.

1. HTML validity: Using `data-*` attributes provide a way to store custom data with HTML validity. That is, you won’t receive any errors or warnings from the HTML validator.

How to access `data-*` attributes in JavaScript:

You can access `data-*` attributes in JavaScript using the dataset property. Here’s an example:

```
var employee = document.getElementById(“employee”);
console.log(employee.dataset.employeeId); // will output: 12345
console.log(employee.dataset.employeeName); // will output: John Doe
```

Note: When accessing `data-*` attributes via the dataset property, the words after data- must not be written in kebab-case. Instead, they need to be written in camelCase.