Question: I notice that in a lot of template engines, in the HTML5 , in various frameworks and in plain php sites there is the data-device-type="dedicated" added onto the `<HTML>` tag.

Why is this done? Is there some sort of default browser behavior that reacts to this data-device-type? Why include it always? Does that not render the data-device-type itself obsolete

Here is an example from the HTML5 index.html:

```
<!DOCTYPE html>
<html lang="en-IN" class="no-js" data-device-type="dedicated">
<head>

<title>doordie.co.in - all info 2 all </title>

```

As you can see, the `<html>` element will have this data-device-type. Can someone explain why this is done so often?

Answer: 
`data-device-type` is not a HTML5 attribute. All attributes that a prefixed with `data-` are application-defined. The attribute's "real" name is then just `device-type`.

Apparently `data-device-type`, `data-device-agent`, and others seem to be a convention that has been adopted by web developers recently - though I can't find any canonical or authoritative source. [Searching GitHub shows numerous projects using it](https://github.com/search?q=data-device-type&ref=simplesearch&type=Code&utf8=%E2%9C%93), but none of them seem to share any common JavaScript library that might be using the attribute.

But everyone seems to be using it the same way: some server-side code will set the value to something like "board" (for things like Raspberry Pi), "dedicated" (seemingly things like Amazon Kindle), "desktop" (for desktops and laptops) which allow JavaScript to then read the value and act accordingly - however I cannot find any authoritative information.

Side-note: these use-cases seem to smell of server-side client detection. This is a bad idea because you can never trust the client (which is why browser User-Agent strings make no sense anymore: they all try to pretend to be other browsers to defeat poor server-side user-agent sniffing techniques).

Again, note that specific `data-` attributes are not in the HTML5 specifications and so confer no special meaning as far as the web-browser is concerned. If you want to see how any specific application is using the attribute value I suggest you grep the source-code for `device-type` and see what code is setting and reading the attribute - it could be client or server-side.
Global html **data-\*** attributes are used to store data (ready to be called later by css or javascript).

Example: 

```js
var zzz = document.getElementsByTagName("div")[0].getAttribute("data-color");
var yyy = document.getElementsByTagName("div")[1].getAttribute("data-color");
document.getElementsByTagName("div")[0].style.background = zzz;
document.getElementsByTagName("div")[1].style.background = yyy;
```

```css
div::after {
  content: attr(data-append);
  font-weight:bold;
}
```

```html
<div data-append=" _SUCCESS" data-color="greenyellow">A simple div</div>
<div data-append=" _FAILURE" data-color="tomato">Another simple div</div>
```