recursal/MDN huggingface dataset:
data-\*
=======

The **`data-*`** global attributes form a class of attributes called **custom data attributes**, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.

Try it
------

 All such custom data are available via the `HTMLElement` interface of the element the attribute is set on. The `HTMLElement.dataset` property gives access to them.
 The `*` may be replaced by any name following the production rule of XML names which includes the following recommendations:

* The name should not start with `xml` (case-insensitive), as it's reserved for future XML specifications.
* The name should not contain any colon characters (`:`), as XML assigns meaning to such names.
* The name should not contain any capital letters, as XML is all lowercase.

These are recommendations. If these naming recommendations are not followed, no errors will occur. The attributes will still be matched using CSS attribute selectors, with the attribute being case insensitive and any attribute value being case-sensitive. Attributes not conforming to these three recommendations will also still be recognized by the JavaScript `HTMLElement.dataset` property and user-agents will include the attribute in the `DOMStringMap` containing all the custom data attributes for an `HTMLElement`.

If you plan to use `HTMLElement.dataset`, the portion of the attribute name following the `data-` can only include characters allowed in JavaScript property names (and hyphens, which will be removed). The `dataset` version of the attribute name removes the "data-" prefix and converts the rest of the name from kebab-case to camelCase. For example, `element.getAttribute("data-test")` is equivalent to `element.dataset.test` and `data-test-abc` will be accessible as `HTMLElement.dataset.testAbc` (or by `HTMLElement.dataset["testAbc"]`). Avoid non-alphabetic characters following a hyphen, such as `data-test-1` or `data--test`, as they will not be recognized by `HTMLElement.dataset`.

### Usage

By adding `data-*` attributes, even ordinary HTML elements can become rather complex and powerful program-objects. For example, a space-ship "sprite*"* in a game could be a simple `<img>` element with a `class` attribute and several `data-*` attributes:


```html
<img
 class="spaceship cruiserX3"
 src="shipX3.png"
 data-ship-id="324"
 data-weapons="laserI laserII"
 data-shields="72%"
 data-x="414354"
 data-y="85160"
 data-z="31940"
 onclick="spaceships[this.dataset.shipId].blasted()" />
```


For a more in-depth tutorial about using HTML data attributes, see Using data attributes.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # attr-data-\* |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes.
* The `HTMLElement.dataset` property that allows to access and modify these values.
* Using data attributes
inputmode
=========

 The **`inputmode`** global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents.
 This allows a browser to display an appropriate virtual keyboard.

It is used primarily on `<input>` elements, but is usable on any element in `contenteditable` mode.

It's important to understand that the `inputmode` attribute doesn't cause any validity requirements to be enforced on input. To require that input conforms to a particular data type, choose an appropriate `<input> element type`. For specific guidance on choosing `<input>` types, see the Values section.

Values
------

The attribute can have any of the following values:

`none`

 No virtual keyboard.
 For when the page implements its own keyboard input control.


`text` (default value)

Standard input keyboard for the user's current locale.

`decimal`

 Fractional numeric input keyboard containing the digits and decimal separator for the user's locale (typically `.` or `,`).
 Devices may or may not show a minus key (`-`).


`numeric`

 Numeric input keyboard, but only requires the digits 0–9.
 Devices may or may not show a minus key.


`tel`

 A telephone keypad input, including the digits 0–9, the asterisk (`\*`), and the pound (`#`) key.
 Inputs that \*require\* a telephone number should typically use `<input type="tel">` instead.


`search`

 A virtual keyboard optimized for search input.
 For instance, the return/submit key may be labeled "Search", along with possible other optimizations.
 Inputs that *require* a search query should typically use `<input type="search">` instead.


`email`

 A virtual keyboard optimized for entering email addresses.
 Typically includes the `@`character as well as other optimizations.
 Inputs that *require* email addresses should typically use `<input type="email">` instead.


`url`

 A keypad optimized for entering URLs.
 This may have the `/` key more prominent, for example.
 Enhanced features could include history access and so on.
 Inputs that *require* a URL should typically use `<input type="url">` instead.


Specifications
--------------

| Specification |
| --- |
| HTML Standard # attr-inputmode |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes.
* `enterkeyhint` global attribute
contenteditable
===============

The **`contenteditable`** global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.

Try it
------

The attribute must take one of the following values:

* `true` or an *empty string*, which indicates that the element is editable.
* `false`, which indicates that the element is not editable.
* `plaintext-only`, which indicates that the element's raw text is editable, but rich text formatting is disabled.

If the attribute is given without a value, like `<label contenteditable>Example Label</label>`, its value is treated as an empty string.

If this attribute is missing or its value is invalid, its value is *inherited* from its parent element: so the element is editable if its parent is editable.

Note that although its allowed values include `true` and `false`, this attribute is an *enumerated* one and not a *Boolean* one.

You can set the color used to draw the text insertion caret with the CSS `caret-color` property.

Elements that are made editable, and therefore interactive, by using the `contenteditable` attribute can be focused. They participate in sequential keyboard navigation. However, elements with the `contenteditable` attribute nested within other `contenteditable` elements are not added to the tabbing sequence by default. You can add the nested `contenteditable` elements to the keyboard navigation sequence by specifying the `tabindex` value (`tabindex="0"`).

Specifications
--------------

| Specification |
| --- |
| HTML Standard # attr-contenteditable |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes
* `HTMLElement.contentEditable` and `HTMLElement.isContentEditable`
* The CSS `caret-color` property
* HTMLElement `input` event
dir
===

The **`dir`** global attribute is an enumerated attribute that indicates the directionality of the element's text.

Try it
------

It can have the following values:

* `ltr`, which means *left to right* and is to be used for languages that are written from the left to the right (like English);
* `rtl`, which means *right to left* and is to be used for languages that are written from the right to the left (like Arabic);
* `auto`, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

**Note:** This attribute is mandatory for the `<bdo>` element where it has a different semantic meaning.

* This attribute is *not* inherited by the `<bdi>` element. If not set, its value is `auto`.
* This attribute can be overridden by the CSS properties `direction` and `unicode-bidi`, if a CSS page is active and the element supports these properties.
* As the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the text will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.
* The `auto` value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database.

**Note:** Browsers might allow users to change the directionality of `<input>` and `<textarea>`s in order to assist with authoring content. Chrome and Safari provide a directionality option in the contextual menu of input fields while Legacy Edge uses the key combinations `Ctrl` + `Left Shift` and `Ctrl` + `Right Shift`. Firefox uses `Ctrl`/`Cmd` + `Shift` + `X` but does NOT update the **`dir`** attribute value.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-dir-attribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes.
* `HTMLElement.dir` that reflects this attribute.
inert
=====

The **`inert`** global attribute is a Boolean attribute indicating that the browser will ignore the element. With the `inert` attribute, all of the element's flat tree descendants (such as modal `<dialog>`s) that don't otherwise escape inertness are ignored. The `inert` attribute also makes the browser ignore input events sent by the user, including focus-related events and events from assistive technologies.

Specifically, `inert` does the following:

* Prevents the `click` event from being fired when the user clicks on the element.
* Prevents the `focus` event from being raised by preventing the element from gaining focus.
* Hides the element and its content from assistive technologies by excluding them from the accessibility tree.


```html
<body inert>
  <!-- content -->
</body>
```


The `inert` attribute can be added to sections of content that should not be interactive. When an element is inert, it along with all of the element's descendants, including normally interactive elements such as links, buttons, and form controls are disabled because they cannot receive focus or be clicked.

The `inert` attribute can also be added to elements that should be offscreen or hidden. An inert element, along with its descendants, gets removed from the tab order and accessibility tree.

**Note:** While `inert` is a global attribute and can be applied to any element, it is generally used for sections of content. To make individual controls "inert", consider using the `disabled` attribute, along with CSS `:disabled` styles, instead.

Accessibility concerns
----------------------

Use careful consideration for accessibility when applying the `inert` attribute. By default, there is no visual way to tell whether or not an element or its subtree is inert. As a web developer, it is your responsibility to clearly indicate the content parts that are active and those that are inert.

While providing visual and non-visual cues about content inertness, also remember that the visual viewport may contain only sections of content. Users may be zoomed in to a small section of content, or users may not be able to view the content at all. Inert sections not being obviously inert can lead to frustration and bad user experience.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-inert-attribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* HTML `<dialog>` element
* `HTMLElement.inert` HTML DOM property
* Introducing inert
* The "inert" attribute is finally coming to the web
popover
=======

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`popover`** global attribute is used to designate an element as a popover element.

Popover elements are hidden via `display: none` until opened via an invoking/control element (i.e. a `<button>` or `<input type="button">` with a `popovertarget` attribute) or a `HTMLElement.showPopover()` call.

When open, popover elements will appear above all other elements in the top layer, and won't be influenced by parent elements' `position` or `overflow` styling.

 A popover attribute can have values `"auto"` (default) or `"manual"`.
 Popovers that have the `auto` state can be "light dismissed" by selecting outside the popover area, and generally only allow one popover to be displayed on-screen at a time.
 By contrast, `manual` popovers must always be explicitly hidden, but allow for use cases such as nested popovers in menus.

For detailed information on usage, see the Popover API landing page.

Examples
--------

The following renders a button that will open a popover element when activated.


```html
<button popovertarget="my-popover">Open Popover</button>

<div popover id="my-popover">Greetings, one and all!</div>
```


**Note:** See our Popover API examples landing page to access the full collection of MDN popover examples.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-popover-attribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Popover API
* `popovertarget` HTML attribute
* `popovertargetaction` HTML attribute
* `::backdrop` CSS pseudo-element
* `:popover-open` CSS pseudo-class
enterkeyhint
============

 The **`enterkeyhint`** global attribute
 is an enumerated attribute defining what action label (or icon) to present for the enter key on virtual keyboards.

Try it
------

Description
-----------

Form controls (such as `<textarea>`
 or `<input>` elements) or elements using
 `contenteditable` can specify an
 `inputmode` attribute to control what kind of virtual keyboard
 will be used. To further improve the user's experience, the enter key can be customized specifically by providing an `enterkeyhint`
 attribute indicating how the enter key should be labeled (or which icon should be shown). The enter key usually
 represents what the user should do next; typical actions are: sending text, inserting a new line, or searching.

 If no `enterkeyhint` attribute is provided, the user agent might use contextual information from the
 `inputmode`,
 `type`,
 or `pattern`
 attributes to display a suitable enter key label (or icon).

### Values

The `enterkeyhint` attribute is an enumerated attribute and only accepts the following values:

| Value | Description | Example label (depends on user agent and user language) |
| --- | --- | --- |
| `enterkeyhint="enter"` | Typically inserting a new line. | `↵` |
| `enterkeyhint="done"` | 
 Typically meaning there is nothing more to input and the input method
 editor (IME) will be closed.
  | `Done` |
| `enterkeyhint="go"` | Typically meaning to take the user to the target of the text they typed. | `Open` |
| `enterkeyhint="next"` | Typically taking the user to the next field that will accept text. | `Next` |
| `enterkeyhint="previous"` | Typically taking the user to the previous field that will accept text. | `Previous` |
| `enterkeyhint="search"` | 
 Typically taking the user to the results of searching for the text they
 have typed.
  | `Search` |
| `enterkeyhint="send"` | Typically delivering the text to its target. | `Send` |

Specifications
--------------

| Specification |
| --- |
| HTML Standard # attr-enterkeyhint |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLElement.enterKeyHint` property reflecting this attribute
* `inputmode` global attribute
* `contenteditable` global attribute
* `type` and
 `pattern` attributes on
 `<input>` elements
draggable
=========

The **`draggable`** global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the HTML Drag and Drop API.

 The `draggable` attribute may be applied to elements that strictly fall under the HTML namespace, which means that it cannot be applied to SVGs.
 For more information about what namespace declarations look like, and what they do, see Namespace crash course.

`draggable` can have the following values:

* `true`: the element can be dragged.
* `false`: the element cannot be dragged.

**Warning:** This attribute is *enumerated* and not *Boolean*. A value of `true` or `false` is mandatory, and shorthand like `<img draggable>` is forbidden. The correct usage is `<img draggable="false">`.

If this attribute is not set, its default value is `auto`, which means drag behavior is the default browser behavior: only text selections, images, and links can be dragged. For other elements, the event `ondragstart` must be set for drag and drop to work, as shown in this comprehensive example.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-draggable-attribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes.
virtualkeyboardpolicy
=====================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`virtualkeyboardpolicy`** global attribute is an enumerated attribute. When specified on an element that the element's content is editable (for example, it is an `<input>` or `<textarea>` element, or an element with the `contenteditable` attribute set), it controls the on-screen virtual keyboard behavior on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.

The attribute must take one of the following values:

* `auto` or an *empty string*, which automatically shows the virtual keyboard when the element is focused or tapped.
* `manual`, which decouples focus and tap on the element from the virtual keyboard's state.
Specifications
--------------

| Specification |
| --- |
| VirtualKeyboard API # dom-elementcontenteditable-virtualkeyboardpolicy |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* All global attributes
* `HTMLElement.contentEditable` and `HTMLElement.isContentEditable`
* The VirtualKeyboard API
exportparts
===========

The **`exportparts`** global attribute allows you to select and style elements existing in nested shadow trees, by exporting their `part` names.

The shadow tree is an isolated structure where identifiers, classes, and styles cannot be reached by selectors or queries belonging to a regular DOM. There are two HTML attributes that can be applied to shadow tree elements that enable targeting CSS styles from outside to shadow tree: `part` and `exportparts`.

The global `part` attribute makes a shadow tree element visible to its parent DOM. A `part` name is used as the parameter of the `::part()` pseudo-element. In this way, you can apply CSS styles to elements in the shadow tree from outside of it. However, the `::part()` pseudo-element is only visible to the parent DOM. This means that when a shadow tree is nested, the parts are not visible to any ancestors other than the direct parent. The `exportparts` attribute solves this limitation.

The `exportparts` attribute enables shadow tree parts to be visible outside the shadow DOM. This concept is referred to as "exporting". The `exportparts` attribute is placed on the element's *shadow host*, which is the element to which the *shadow tree* is attached. The value of this attribute is a comma-separated list of `part` names present in the shadow tree. These names are made available to the DOMs outside the current structure.


```html
<template id="ancestor-component">
  <nested-component exportparts="part1, part2, part5"></nested-component>
</template>
```


When exporting a `part`, you have the option to assign a different name to the part, as shown in the snippet below. The value of the `exportparts` attribute is really a comma-separated list of part-name mappings. So the `exportparts` attribute in the above code snippet is the equivalent of `exportparts="part1:part1, part2:part2, part5:part5`, indicating that each `part` is exported with the same name. In each mapping, the first string specifies the name of the part within the shadow tree, and the second string specifies the name with which the part will be exposed externally.


```html
<template id="ancestor-component">
  <nested-component
 exportparts="part1:exposed1, part2:exposed2"></nested-component>
</template>
```

Specifications
--------------

| Specification |
| --- |
| CSS Shadow Parts # element-attrdef-html-global-exportparts |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `part` HTML attribute
* `<template>` and `<slot>` HTML elements
* `::part` and `::slotted` CSS pseudo-elements
* `ShadowRoot` interface
* `Element.part` property
* Using templates and slots
* CSS scoping module
itemref
=======

Properties that are not descendants of an element with the `itemscope` attribute can be associated with an item using the global attribute **`itemref`**.

`itemref` provides a list of element IDs (not `itemid`s) elsewhere in the document, with additional properties

The `itemref` attribute can only be specified on elements that have an `itemscope` attribute specified.

**Note:** The `itemref` attribute is not part of the microdata data model. It is merely a syntactic construct to aid authors in adding annotations to pages where the data to be annotated does not follow a convenient tree structure. For example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells.

Examples
--------

### Representing structured data for a band

This example uses microdata attributes to represent the following structured data (in JSON-LD format):


```json
{
  "@id": "amanda",
  "name": "Amanda",
  "band": {
    "@id": "b",
    "name": "Jazz Band",
    "size": 12
  }
}
```


#### HTML


```html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>
```


#### Result

Specifications
--------------

| Specification |
| --- |
| HTML Standard # attr-itemref |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Other different global attributes
* Other microdata related global attributes:
    + `itemid`
    + `itemprop`
    + `itemscope`
    + `itemtype`