lang - HTML: HyperText Markup Language

lang
====

The **`lang`** global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user. The attribute contains a single "language tag" in the format defined in RFC 5646: Tags for Identifying Languages (also known as BCP 47).

**Note:** The default value of `lang` is `unknown`, therefore it is recommended to always specify this attribute with the appropriate value.

Try it
------

If the attribute value is the *empty string* (`lang=""`), the language is set to *unknown*; if the language tag is not valid according to BCP47, it is set to *invalid*.

Even if the **lang** attribute is set, it may not be taken into account, as the **xml:lang** attribute has priority.

For the CSS pseudo-class `:lang`, two invalid language names are different if their names are different. So while `:lang(es)` matches both `lang="es-ES"` and `lang="es-419"`, `:lang(xyzzy)` would *not* match `lang="xyzzy-Zorp!"`.

Language tag syntax
-------------------

The full BCP47 syntax is in-depth enough to mark extremely specific language dialects, but most usage is much simpler.

A language tag is made of hyphen-separated *language subtags*, where each subtag indicates a certain property of the language. The 3 most common subtags are:

Language subtag

Required. A 2-or-3-character code that defines the basic language, typically written in all lowercase. For example, the language code for English is `en`, and the code for Badeshi is `bdz`.

Script subtag

Optional. This subtag defines the writing system used for the language, and is always 4 characters long, with the first letter capitalized. For example, French-in-Braille is `fr-Brai` and `ja-Kana` is Japanese written with the Katakana alphabet. If the language is written in a highly typical way, like English in the Latin alphabet, there is no need to use this subtag.

Region subtag

Optional. This subtag defines a dialect of the base language from a particular location, and is either 2 letters in ALLCAPS matching a country code, or 3 numbers matching a non-country area. For example, `es-ES` is for Spanish as spoken in Spain, and `es-013` is Spanish as spoken in Central America. "International Spanish" would just be `es`.

The script subtag precedes the region subtag if both are present — `ru-Cyrl-BY` is Russian, written in the Cyrillic alphabet, as spoken in Belarus.

To find the correct subtag codes for a language, try the Language Subtag Lookup.

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

WCAG Success Criterion 3.1.1 **requires** that a page language is specified in a way which may be 'programmatically determined' (i.e. via the **`lang`** attribute).

WCAG Success Criterion 3.1.2 requires that pages with **parts** in different languages have the languages of those parts specified too. Again, the **`lang`** attribute is the correct mechanism for this.

The purpose of these requirements is primarily to allow assistive technologies such as screen readers to invoke the correct pronunciation.

For example, the language menu on this site (MDN) includes a **`lang`** attribute for each entry:

```html
<div class="dropdown-container language-menu">
  <button
 id="header-language-menu"
 type="button"
 class="dropdown-menu-label"
 aria-haspopup="true"
 aria-owns="language-menu"
 aria-label="Current language is English. Choose your preferred language.">
    English
    <span class="dropdown-arrow-down" aria-hidden="true">▼</span>
  </button>
  <ul
 id="language-menu"
 class="dropdown-menu-items right show"
 aria-expanded="true"
 role="menu">
    <li lang="ca" role="menuitem">
      <a href="/ca/docs/Web/HTML/Global\_attributes/lang" title="Catalan">
        <bdi>Català</bdi>
      </a>
    </li>
    <li lang="de" role="menuitem">
      <a href="/de/docs/Web/HTML/Globale\_Attribute/lang" title="German">
        <bdi>Deutsch</bdi>
      </a>
    </li>
    <li lang="es" role="menuitem">
      <a href="/es/docs/Web/HTML/Atributos\_Globales/lang" title="Spanish">
        <bdi>Español</bdi>
      </a>
    </li>
    <li lang="fr" role="menuitem">
      <a href="/fr/docs/Web/HTML/Attributs\_universels/lang" title="French">
        <bdi>Français</bdi>
      </a>
    </li>
    <li lang="ja" role="menuitem">
      <a href="/ja/docs/Web/HTML/Global\_attributes/lang" title="Japanese">
        <bdi>日本語</bdi>
      </a>
    </li>
    <li lang="ko" role="menuitem">
      <a href="/ko/docs/Web/HTML/Global\_attributes/lang" title="Korean">
        <bdi>한국어</bdi>
      </a>
    </li>
    <li lang="pt-BR" role="menuitem">
      <a
 href="/pt-BR/docs/Web/HTML/Global\_attributes/lang"
 title="Portuguese (Brazilian)">
        <bdi>Português (do Brasil)</bdi>
      </a>
    </li>
    <li lang="ru" role="menuitem">
      <a href="/ru/docs/Web/HTML/Global\_attributes/lang" title="Russian">
        <bdi>Русский</bdi>
      </a>
    </li>
    <li lang="uk" role="menuitem">
      <a
 href="/uk/docs/Web/HTML/%D0%97%D0%B0%D0%B3%D0%B0%D0%BB%D1%8C%D0%BD%D1%96\_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D0%B8/lang"
 title="Ukrainian">
        <bdi>Українська</bdi>
      </a>
    </li>
    <li lang="zh-Hans" role="menuitem">
      <a
 href="/zh-CN/docs/Web/HTML/Global\_attributes/lang"
 title="Chinese (Simplified)">
        <bdi>中文 (简体)</bdi>
      </a>
    </li>
    <li>
      <a
 href="/en-US/docs/Web/HTML/Global\_attributes/lang$locales"
 rel="nofollow"
 id="translations-add">
        Add a translation
      </a>
    </li>
  </ul>
</div>
```

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

| Specification |
| --- |
| HTML Standard # attr-lang |

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

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

See also
--------

* All global attributes.
* `Content-Language` HTTP Header
* HTML `translate` attribute


is - HTML: HyperText Markup Language

is
==

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

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

Examples
--------

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

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

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

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

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

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

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

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

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

See also
--------

* All global attributes.


data-* - HTML: HyperText Markup Language

data-\*
=======

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

Try it
------

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

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

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

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

### Usage

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

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

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

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

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

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

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

See also
--------

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


inputmode - HTML: HyperText Markup Language

inputmode
=========

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

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

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

Values
------

The attribute can have any of the following values:

`none`

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

`text` (default value)

Standard input keyboard for the user's current locale.

`decimal`

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

`numeric`

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

`tel`

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

`search`

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

`email`

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

`url`

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

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

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

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

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

See also
--------

* All global attributes.
* `enterkeyhint` global attribute


title - HTML: HyperText Markup Language

title
=====

The **`title`** global attribute contains text representing advisory information related to the element it belongs to.

Try it
------

The main use of the `title` attribute is to label `<iframe>` elements for assistive technology.

The `title` attribute may also be used to label controls in data tables.

The `title` attribute, when added to `<link rel="stylesheet">`, creates an alternate stylesheet. When defining an alternative style sheet with `<link rel="alternate">` the attribute is required and must be set to a non-empty string.

If included on the `<abbr>` opening tag, the `title` must be a full expansion of the abbreviation or acronym. Instead of using `title`, when possible, provide an expansion of the abbreviation or acronym in plain text on first use, using the `<abbr>` to mark up the abbreviation. This enables all users know what name or term the abbreviation or acronym shortens while providing a hint to user agents on how to announce the content.

While `title` can be used to provide a programmatically associated label for an `<input>` element, this is not good practice. Use a `<label>` instead.

Multiline titles
----------------

The `title` attribute may contain several lines. Each `U+000A LINE FEED` (`LF`) character represents a line break. Some caution must be taken, as this means the following renders across two lines:

### HTML

```html
<p>
  Newlines in <code>title</code> should be taken into account. This
  <span
 title="This is a
multiline title">
    example span
  </span>
  has a title a attribute with a newline.
</p>
<hr />
<pre id="output"></pre>
```

### JavaScript

We can query the `title` attribute and display it in the empty `<pre>` element as follows:

```js
const span = document.querySelector("span");
const output = document.querySelector("#output");
output.textContent = span.title;
```

### Result

Title attribute inheritance
---------------------------

If an element has no `title` attribute, then it inherits it from its parent node, which in turn may inherit it from its parent, and so on.

If this attribute is set to the empty string, it means its ancestors' `title`s are irrelevant and shouldn't be used in the tooltip for this element.

### HTML

```html
<div title="CoolTip">
  <p>Hovering here will show "CoolTip".</p>
  <p title="">Hovering here will show nothing.</p>
</div>
```

### Result

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

Use of the `title` attribute is highly problematic for:

* People using touch-only devices
* People navigating with keyboards
* People navigating with assistive technology such as screen readers or magnifiers
* People experiencing fine motor control impairment
* People with cognitive concerns

This is due to inconsistent browser support, compounded by the additional assistive technology parsing of the browser-rendered page. If a tooltip effect is desired, it is better to use a more accessible technique that can be accessed with the above browsing methods.

* 3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents
* Using the HTML title attribute – updated | The Paciello Group
* Tooltips & Toggletips - Inclusive Components
* The Trials and Tribulations of the Title Attribute - 24 Accessibility
Specifications
--------------

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

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

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

See also
--------

* All global attributes.
* `HTMLElement.title` that reflects this attribute.


itemtype - HTML: HyperText Markup Language

itemtype
========

The global attribute **`itemtype`** specifies the URL of the vocabulary that will be used to define `itemprop`'s (item properties) in the data structure.

`itemscope` is used to set the scope of where in the data structure the vocabulary set by `itemtype` will be active.

Google and other major search engines support the schema.org vocabulary for structured data. This vocabulary defines a standard set of type names and property names. For example, `MusicEvent` indicates a concert performance, with `startDate` and `location` properties specifying the concert's key details. In this case, `MusicEvent` would be the URL used by `itemtype`, with `startDate` and location as `itemprop`'s which `MusicEvent` defines.

**Note:** More about `itemtype` attributes can be found at https://schema.org/Thing

* The **itemtype** attribute must have a value that is an unordered set of unique tokens which are case-sensitive, each is a valid and absolute URL, and all defined to use the same vocabulary. The attribute's value must have at least one token.
* The item types must all be types defined in applicable specifications (such as schema.org), and must all be defined to use the same vocabulary.
* The itemtype attribute can only be specified on elements which have an itemscope attribute specified.
* The itemid attribute can only be specified on elements which have both an itemscope attribute and an itemtype attribute specified. They must only be specified on elements with an itemscope attribute, whose itemtype attribute specifies a vocabulary not supporting global identifiers for items, as defined by that vocabulary's specification.
* The exact meaning of a global identifier is determined by the vocabulary's specification. It is left to such specifications to define whether multiple items of the same global identifier (whether on the same page or different pages) are allowed to exist, and what processing rules for that vocabulary are, with respect to handling the case of multiple items with the same ID.
Examples
--------

### Representing structured data for a product

This example uses microdata attributes to represent structured data for a product, as follows:

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype | Product (https://schema.org/Product) |
| itemprop | name | Executive Anvil |
| itemprop | image | https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605\_960\_720.png |
| itemprop | description |
 Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for
 the business traveler looking for something to drop from a height.
  |
| itemprop | mpn | 925872 |
| itemprop | brand [Thing] |  |
| itemprop | name | ACME |
| itemscope | itemprop[itemtype] | aggregateRating[AggregateRating] |  |
| itemprop | ratingValue | 4.4 |
| itemprop | reviewCount | 89 |
| itemprop | offers [Offer] | https://schema.org/Offer |
| itemprop | priceCurrency | USD |
| itemprop | price | 119.99 |
| itemprop | priceValidUntil | 2020-11-05 |
| itemprop | itemCondition | https://schema.org/UsedCondition |
| itemprop | availability | https://schema.org/InStock |
| itemscope | itemprop[itemtype] | seller [Organization] | https://schema.org/Organization |
| itemprop | name | Executive Objects |

**Note:** A handy tool for extracting microdata structures from HTML is Google's Structured Data Testing Tool. Try it on the HTML shown here.

#### HTML

```html
<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="brand">ACME<br /></span>
  <span itemprop="name">Executive Anvil<br /></span>
  <img
 itemprop="image"
 src="https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605\_960\_720.png"
 width="50"
 height="50"
 alt="Executive Anvil logo" /><br />

  <span itemprop="description">
    Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the
    business traveler looking for something to drop from a height.
    <br />
  </span>

  Product #: <span itemprop="mpn">925872<br /></span>
  <span
 itemprop="aggregateRating"
 itemscope
 itemtype="https://schema.org/AggregateRating">
    Rating: <span itemprop="ratingValue">4.4</span> stars, based on
    <span itemprop="reviewCount">89 </span> reviews
  </span>
  <p>
    <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
      Regular price: $179.99<br />
      <meta itemprop="priceCurrency" content="USD" />
      <span itemprop="price">Sale price: $119.99<br /></span>
      (Sale ends
      <time itemprop="priceValidUntil" datetime="2020-11-05">5 November!</time>)
      <br />
      Available from:
      <span
 itemprop="seller"
 itemscope
 itemtype="https://schema.org/Organization">
        <span itemprop="name">Executive Objects<br /></span>
      </span>
      Condition:
      <link
 itemprop="itemCondition"
 href="https://schema.org/UsedCondition" />Previously owned, in excellent
      condition<br />
      <link itemprop="availability" href="https://schema.org/InStock" />In
      stock! Order now!
    </span>
  </p>
</div>
```

#### Result

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

| Specification |
| --- |
| HTML Standard # attr-itemtype |

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

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

See also
--------

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


contenteditable - HTML: HyperText Markup Language

contenteditable
===============

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

Try it
------

The attribute must take one of the following values:

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

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

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

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

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

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

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

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

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

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

See also
--------

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


dir - HTML: HyperText Markup Language

dir
===

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

Try it
------

It can have the following values:

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

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

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

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

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

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

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

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

See also
--------

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


itemscope - HTML: HyperText Markup Language

itemscope
=========

**`itemscope`** is a boolean global attribute that defines the scope of associated metadata. Specifying the **`itemscope`** attribute for an element creates a new item, which results in a number of name-value pairs that are associated with the element.

A related attribute, `itemtype`, is used to specify the valid URL of a vocabulary (such as schema.org) that describes the item and its properties context. In each of the following examples, the vocabulary is from schema.org.

Every HTML element may have an `itemscope` attribute specified. An `itemscope` element that does not have an associated `itemtype` must have an associated `itemref`.

**Note:** Find more about `itemtype` attributes at https://schema.org/Thing

### itemscope id attributes

When you specify the `itemscope` attribute for an element, a new item is created. The item consists of a group of name-value pairs. For elements with an `itemscope` attribute and an `itemtype` attribute, you may also specify an `id` attribute. You can use the `id` attribute to set a global identifier for the new item. A global identifier allows the item to relate to other items found on pages across the Web.

Examples
--------

### Representing structured data for a movie

The following example specifies the `itemtype` as "http://schema.org/Movie", and specifies four related `itemprop` attributes.

|  |  |  |
| --- | --- | --- |
| itemscope | Itemtype | Movie |
| itemprop | (itemprop name) | (itemprop value) |
| itemprop | director | James Cameron |
| itemprop | genre | Science Fiction |
| itemprop | name | Avatar |
| itemprop | Trailer | https://youtu.be/0AY1XIkX7bY |

```html
<div itemscope itemtype="https://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>
    Director: <span itemprop="director">James Cameron</span> (born August 16,
    1954)
  </span>
  <span itemprop="genre">Science fiction</span>
  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
</div>
```

### Representing structured data for a recipe

There are four `itemscope` attributes in the following example. Each `itemscope` attribute sets the scope of its corresponding `itemtype` attribute. The `itemtype`s, `Recipe`, `AggregateRating`, and `NutritionInformation` in the following example are part of the schema.org structured data for a recipe, as specified by the first `itemtype`, `http://schema.org/Recipe`.

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype | Recipe |
| itemprop | name | Grandma's Holiday Apple Pie |
| itemprop | image | https://c1.staticflickr.com/1/30/42759561\_8631e2f905\_n.jpg |
| itemprop | datePublished | 2022-11-05 |
| itemprop | description |
 This is my grandmother's apple pie recipe. I like to add a dash of
 nutmeg.
  |
| itemprop | prepTime | PT30M |
| itemprop | cookTime | PT1H |
| itemprop | totalTime | PT1H30M |
| itemprop | recipeYield | 1 9" pie (8 servings) |
| itemprop | recipeIngredient | Thinly-sliced apples: 6 cups |
| itemprop | recipeIngredient | White sugar: 3/4 cup |
| itemprop | recipeInstructions |
 1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar
 for tart apples.
  |
| itemprop | author [Person] |
| itemprop | name | Carol Smith |
| itemscope | itemprop[itemtype] | aggregateRating [AggregateRating] |
| itemprop | ratingValue | 4.0 |
| itemprop | reviewCount | 35 |
| itemscope | itemprop[itemtype] | nutrition [NutritionInformation] |
| itemprop | servingSize | 1 medium slice |
| itemprop | calories | 250 cal |
| itemprop | fatContent | 12 g |

**Note:** A handy tool for extracting microdata structures from HTML is Google's Rich Results Testing Tool. Try it on the HTML shown here.

#### HTML

```html
<div itemscope itemtype="https://schema.org/Recipe">
  <h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
  <img
 itemprop="image"
 src="https://c1.staticflickr.com/1/30/42759561\_8631e2f905\_n.jpg"
 width="50"
 height="50" />
  <p>
    By
    <span itemprop="author" itemscope itemtype="https://schema.org/Person">
      <span itemprop="name">Carol Smith</span>
    </span>
  </p>
  <p>
    Published:
    <time datetime="2022-11-05" itemprop="datePublished">
      November 5, 20022
    </time>
  </p>
  <span itemprop="description">
    This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
  </span>
  <br />
  <span
 itemprop="aggregateRating"
 itemscope
 itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.0</span> stars based on
    <span itemprop="reviewCount">35</span> reviews
  </span>
  <br />
  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time>
  <br />
  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour</time>
  <br />
  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
  <br />
  Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span>
  <br />
  <span
 itemprop="nutrition"
 itemscope
 itemtype="https://schema.org/NutritionInformation">
    Serving size: <span itemprop="servingSize">1 medium slice</span><br />
    Calories per serving: <span itemprop="calories">250 cal</span><br />
    Fat per serving: <span itemprop="fatContent">12 g</span><br />
  </span>
  <p>
    Ingredients:<br />
    <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br /></span>
    <span itemprop="recipeIngredient">White sugar: 3/4 cup<br /></span>
    …
  </p>
  Directions: <br />
  <div itemprop="recipeInstructions">
    1. Cut and peel apples<br />
    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br />
    …
  </div>
</div>
```

#### Result

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

| Specification |
| --- |
| HTML Standard # attr-itemscope |

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

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

See also
--------

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


tabindex - HTML: HyperText Markup Language

tabindex
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

* Learn more
* See full compatibility
* Report feedback
The **`tabindex`** global attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation.

Try it
------

It accepts an integer as a value, with different results depending on the integer's value:

**Note:** If an HTML element renders and has `tabindex` attribute with any valid integer value, the element can be focused with JavaScript (by calling the `focus()` method) or visually by clicking with the mouse. The particular `tabindex` value controls whether the element is `tabbable` (i.e. reachable via sequential keyboard navigation, usually with the `Tab` key).

* A *negative value* (the exact negative value doesn't actually matter, usually `tabindex="-1"`) means that the element is not reachable via sequential keyboard navigation.

**Note:** `tabindex="-1"` may be useful for elements that should not be navigated to directly using the `Tab` key, but need to have keyboard focus set to them. Examples include an off-screen modal window that should be focused when it comes into view, or a form submission error message that should be immediately focused when an errant form is submitted.
* `tabindex="0"` means that the element should be focusable in sequential keyboard navigation, after any positive `tabindex` values. The focus navigation order of these elements is defined by their order in the document source.
* A *positive value* means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, `tabindex="4"` is focused before `tabindex="5"` and `tabindex="0"`, but after `tabindex="3"`. If multiple elements share the same positive `tabindex` value, their order relative to each other follows their position in the document source. The maximum value for `tabindex` is 32767.
* If the `tabindex` attribute is included with no value set, whether the element is focusable is determined by the user agent.

**Warning:** You are recommended to only use `0` and `-1` as `tabindex` values. Avoid using `tabindex` values greater than `0` and CSS properties that can change the order of focusable HTML elements (Ordering flex items). Doing so makes it difficult for people who rely on using keyboard for navigation or assistive technology to navigate and operate page content. Instead, write the document with the elements in a logical sequence.

Some focusable HTML elements have a default `tabindex` value of `0` set under the hood by the user agent. These elements are an `<a>` or `<area>` with `href` attribute, `<button>`, `<frame>`
Deprecated
, `<iframe>`, `<input>`, `<object>`, `<select>`, `<textarea>`, and SVG `<a>` element, or a `<summary>` element that provides summary for a `<details>` element. Developers shouldn't add the `tabindex` attribute to these elements unless it changes the default behavior (for example, including a negative value will remove the element from the focus navigation order).

**Warning:** The tabindex attribute must not be used on the `<dialog>` element.

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

Avoid using the `tabindex` attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input. An example of this would be using a `<div>` element to describe a button, instead of the `<button>` element.

Interactive components authored using non-interactive elements are not listed in the accessibility tree. This prevents assistive technology from being able to navigate to and manipulate those components. The content should be semantically described using interactive elements (`<a>`, `<button>`, `<details>`, `<input>`, `<select>`, `<textarea>`, etc.) instead. These elements have built-in roles and states that communicate status to the accessibility that would otherwise have to be managed by ARIA.

* Using the tabindex attribute | The Paciello Group
Specifications
--------------

| Specification |
| --- |
| HTML Standard # attr-tabindex |

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

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

See also
--------

* All global attributes
* `HTMLElement.tabIndex` that reflects this attribute
* Accessibility problems with `tabindex`: see Don't Use Tabindex Greater than 0 by Adrian Roselli


inert - HTML: HyperText Markup Language

inert
=====

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

Specifically, `inert` does the following:

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

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

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

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

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

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

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

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

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

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

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

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

See also
--------

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


popover - HTML: HyperText Markup Language

popover
=======

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

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

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

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

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

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

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

Examples
--------

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

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

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

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

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

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

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

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

See also
--------

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


enterkeyhint - HTML: HyperText Markup Language

enterkeyhint
============

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

Try it
------

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

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

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

### Values

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

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

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

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

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

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

See also
--------

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


draggable - HTML: HyperText Markup Language

draggable
=========

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

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

`draggable` can have the following values:

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

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

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

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

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

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

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

See also
--------

* All global attributes.


id - HTML: HyperText Markup Language

id
==

The **`id`** global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

Try it
------

**Warning:** This attribute's value is an opaque string: this means that web authors should not rely on it to convey human-readable information (although having your IDs somewhat human-readable can be useful for code comprehension, e.g. consider `ticket-18659` versus `r45tgfe-freds&$@`).

An `id`'s value must not contain whitespace (spaces, tabs, etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the `class` attribute, which allows space-separated values, elements can only have one single ID value.

Technically, the value for an `id` attribute may contain any character, except whitespace characters. However, to avoid inadvertent errors, only ASCII letters, digits, `'_'`, and `'-'` should be used, and the value for an `id` attribute should start with a letter.

For example, `.` has a special meaning in CSS (it starts a class selector). While valid, unless you are careful to escape it when used as part of a CSS selector, it won't be recognized as part of the element's `id`. The same applies to the `querySelector()` and `querySelectorAll()` parameters, which use the same selector syntax. It is easy to forget to do this, resulting in bugs in your code that could be hard to detect.

Similarly, an `id` starting with a digit (E.g., `1234-322-678`) or a hyphen followed by a digit (E.g., `-123`), though valid in HTML, may lead to problems when used in CSS, JavaScript, and Web APIs:

* CSS ID selectors accept any CSS identifier. If the `id` starts with a digit or one hyphen immediately followed by a digit, both the hyphen and digit must be escaped in CSS. For example, while `id="544-383-3388"` and `id="-3Pi"` are valid in HTML, the `id` selectors must be escaped. The element with these `id` values can be targeted in CSS with `#\35 44-383-3388` and `#\2D \33 pi`.
* Any valid HTML `id` value is valid as an attribute selector in CSS and JavaScript. The selectors `[id="544-383-3388"]` and `[id="-3Pi"]` are valid.
* `Document.querySelector()` and similar methods using CSS-selector-style queries will not find them unless you escape them. (See this page for an example.)
* Such an `id` is not a valid JavaScript identifier. Elements with IDs become global properties, but you cannot use non-identifier global properties as global variables — `1234` is not a global variable, and you have to use `window[1234]` instead to get the element with `id="1234"`. This is slightly inconvenient as you have to create the variable with an extra step: `const element = window[1234]`.
Specifications
--------------

| Specification |
| --- |
| HTML Standard # global-attributes:the-id-attribute-2 |

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

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

See also
--------

* All global attributes.
* `Element.id` that reflects this attribute.
* The `Document.getElementById` method.
* CSS ID selectors.


virtualkeyboardpolicy - HTML: HyperText Markup Language

virtualkeyboardpolicy
=====================

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

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

The attribute must take one of the following values:

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

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

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

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

See also
--------

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


itemprop - HTML: HyperText Markup Language

itemprop
========

The **`itemprop`** global attribute is used to add properties to an item. Every HTML element can have an `itemprop` attribute specified, and an `itemprop` consists of a name-value pair. Each name-value pair is called a **property**, and a group of one or more properties forms an **item**. Property values are either a string or a URL and can be associated with a very wide range of elements including `<audio>`, `<embed>`, `<iframe>`, `<img>`, `<link>`, `<object>`, `<source>`, `<track>`, and `<video>`.

Examples
--------

The example below shows the source for a set of elements marked up with `itemprop` attributes, followed by a table showing the resulting structured data.

### HTML

```html
<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>
    Director:
    <span itemprop="director">James Cameron</span>
    (born August 16, 1954)
  </span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">
    Trailer
  </a>
</div>
```

### Structured data

|  |  |
| --- | --- |
|  | **Item** |
| **itemprop name** | **itemprop value** |
| itemprop | name | Avatar |
| itemprop | director | James Cameron |
| itemprop | genre | Science fiction |
| itemprop | trailer | ../movies/avatar-theatrical-trailer.html |

Properties
----------

Properties have values that are either a string or a URL. When a string value is a URL, it is expressed using the `<a>` element and its `href` attribute, the `<img>` element and its `src` attribute, or other elements that link to or embed external resources.

### Three properties with values that are strings

```html
<div itemscope>
  <p>My name is <span itemprop="name">Neil</span>.</p>
  <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
  <p>I am <span itemprop="nationality">British</span>.</p>
</div>
```

### One property, "image", whose value is a URL

```html
<div itemscope>
  <img itemprop="image" src="google-logo.png" alt="Google" />
</div>
```

When a string value can't be easily read and understood by a person (e.g., a long string of numbers and letters), it can be displayed using the value attribute of the data element, with the more easily-understood-by-a human-version given in the element's contents (which is not part of the structured data - see example below).

### An item with a property whose value is a product ID

The ID is not human-friendly, so the product's name is used instead.

```html
<h1 itemscope>
  <data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
</h1>
```

For numeric data, the meter element and its value attribute can be used.

### A meter element

```html
<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Panasonic White 60L Refrigerator</span>
  <img src="panasonic-fridge-60l-white.jpg" alt="" />
  <div
 itemprop="aggregateRating"
 itemscope
 itemtype="http://schema.org/AggregateRating">
    <meter itemprop="ratingValue" min="0" value="3.5" max="5">
      Rated 3.5/5
    </meter>
    (based on <span itemprop="reviewCount">11</span>
    customer reviews)
  </div>
</div>
```

Similarly, for date- and time-related data, the time element and its datetime attribute can be used.

### An item with one property, "birthday", whose value is a date

```html
<div itemscope>
  I was born on
  <time itemprop="birthday" datetime="1984-05-10">May 10th 1984</time>.
</div>
```

Properties can also be groups of name-value pairs, by putting the itemscope attribute on the element that declares the property. Each value is either a string or a group of name-value pairs (i.e. an item).

### An outer item representing a person, and an inner one representing a band

```html
<div itemscope>
  <p>Name: <span itemprop="name">Amanda</span></p>
  <p>
    Band:
    <span itemprop="band" itemscope>
      <span itemprop="name">Jazz Band</span>
      (<span itemprop="size">12</span> players)
    </span>
  </p>
</div>
```

The outer item above has two properties, "name" and "band". The "name" is "Amanda", and the "band" is an item in its own right, with two properties, "name" and "size". The "name" of the band is "Jazz Band", and the "size" is "12". The outer item in this example is a top-level microdata item. Items that are not part of others are called top-level microdata items.

### All the properties separated from their items

This example is the same as the previous one, but all the properties are separated from their items.

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

This gives the same result as the previous example. The first item has two properties, "name", set to "Amanda", and "band", set to another item. That second item has two further properties, "name", set to "Jazz Band", and "size", set to "12".

An item can have multiple properties with the same name and different values.

### Ice cream with two flavors

```html
<div itemscope>
  <p>Flavors in my favorite ice cream:</p>
  <ul>
    <li itemprop="flavor">Lemon sorbet</li>
    <li itemprop="flavor">Apricot sorbet</li>
  </ul>
</div>
```

This results in an item with two properties, both with the name "flavor" and having the values "Lemon sorbet" and "Apricot sorbet".

An element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value.

### An item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange"

```html
<div itemscope>
  <span
 itemprop="favorite-color
 favorite-fruit"
 >orange
  </span>
</div>
```

**Note:** There is no relationship between the microdata and the content of the document where the microdata is marked up.

### Same structured data marked up in two different ways

There is no semantic difference between the following two examples

```html
<figure>
  <img src="castle.jpeg" />
  <figcaption>
    <span itemscope><span itemprop="name">The Castle</span></span> (1986)
  </figcaption>
</figure>
```

```html
<span itemscope><meta itemprop="name" content="The Castle" /></span>
<figure>
  <img src="castle.jpeg" />
  <figcaption>The Castle (1986)</figcaption>
</figure>
```

Both have a figure with a caption, and both, completely unrelated to the figure, have an item with a name-value pair with the name "name" and the value "The Castle". The only difference is that if the user drags the figcaption out of the document, the item will be included in the drag-and-drop data. The image associated with the item won't be included.

Names and values
----------------

A property is an unordered set of unique tokens that are case-sensitive and represent the name-value pairs. The property value must have at least one token. In the example below, each data cell is a token.

### Names examples

|  | Item |
| --- | --- |
| itemprop **name** | itemprop **value** |
| itemprop | country | Ireland |
| itemprop | Option | 2 |
| itemprop | https://www.flickr.com/photos/nlireland/6992065114/ | Ring of Kerry |
| itemprop | img | https://www.flickr.com/photos/nlireland/6992065114/ |
| itemprop | website | flickr |
| itemprop | (token) | (token) |

**Tokens** are either strings or URL's. An item is called a **typed item** if it is a URL. Otherwise, it is a string. Strings cannot contain a period or a colon (see below).

1. If the item is a typed item it must be either:
    1. A defined property name, or
    2. A valid URL, which refers to the vocabulary definition, or
    3. A valid URL that is used as a proprietary item property name (i.e. one not defined in a public specification), or
2. If the item is not a typed item it must be:
    1. A string that contains no "`.`" (U+002E FULL STOP) characters and no "`:`" characters (U+003A COLON) and is used as a proprietary item property name (again, one not defined in a public specification).

**Note:** The rules above disallow ":" characters in non-URL values because otherwise they could not be distinguished from URLs. Values with "." characters are reserved for future extensions. Space characters are disallowed because otherwise the values would be parsed as multiple tokens.

Values
------

The property value of a name-value pair is as given for the first matching case in the following list:

* If the element has an `itemscope` attribute
    + The value is the **item** created by the element
* If the element is a `meta` element
    + The value is the value of the element's `content` attribute
* If the element is an `audio`, `embed`, `iframe`, `img`, `source`, `track`, or `video` element
    + The value is the resulting URL string that results from parsing the value of the element's src attribute relative to the node document (part of the Microdata DOM API) of the element at the time the attribute is set
* If the element is an `a`, `area`, or `link` element
    + The value is the resulting URL string that results from parsing the value of the element's href attribute relative to the node document of the element at the time the attribute is set
* If the element is an `object` element
    + The value is the resulting URL string that results from parsing the value of the element's data attribute relative to the node document of the element at the time the attribute is set
* If the element is a `data` element
    + The value is the value of the element's value attribute
* If the element is a `meter` element
    + The value is the value of the element's `value` attribute
* If the element is a `time` element
    + The value is the element's `datetime` value

Otherwise

* The value is the element's *textContent*.

If a property's value is a `URL`, the property must be specified using a URL property element. The URL property elements are the `a`, `area`, `audio`, `embed`, `iframe`, `img`, `link`, `object`, `source`, `track`, and `video` elements.

### Name order

Names are unordered relative to each other, but if a particular name has multiple values, they do have a relative order.

In the following example, the "a" property has the values "1" and "2", *in that order*, but whether the "a" property comes before the "b" property or not is not important.

```html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
  <p itemprop="b">test</p>
</div>
```

Here are several equivalent examples:

```html
<div itemscope>
  <p itemprop="b">test</p>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
</div>
```

```html
<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>
```

```html
<div id="x">
  <p itemprop="a">1</p>
</div>
<div itemscope itemref="x">
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>
```

### 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 # names:-the-itemprop-attribute |

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

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

See also
--------

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


exportparts - HTML: HyperText Markup Language

exportparts
===========

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

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

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

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

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

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

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

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

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

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

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

See also
--------

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


itemref - HTML: HyperText Markup Language

itemref
=======

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

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

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

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

Examples
--------

### Representing structured data for a band

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

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

#### HTML

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

#### Result

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

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

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

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

See also
--------

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


spellcheck - HTML: HyperText Markup Language

spellcheck
==========

The **`spellcheck`** global attribute is an enumerated attribute that defines whether the element may be checked for spelling errors.

**Note:** This attribute is merely a hint for the browser: browsers are not required to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the `spellcheck` attribute is set to `true` and the browser supports spellchecking.

Try it
------

It may have the following values:

* empty string or `true`, which indicates that the element should be, if possible, checked for spelling errors;
* `false`, which indicates that the element should not be checked for spelling errors.

If this attribute is not set, its default value is element-type and browser-defined. This default value may also be *inherited*, which means that the element content will be checked for spelling errors only if its nearest ancestor has a *spellcheck* state of `true`.

Security and privacy concerns
-----------------------------

 Using spellchecking can have consequences for users' security and privacy.
 The specification does not regulate *how* spellchecking is done and the content of the element may be sent to a third party for spellchecking results (see enhanced spellchecking and "spell-jacking").

You should consider setting `spellcheck` to `false` for elements that can contain sensitive information.

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

| Specification |
| --- |
| HTML Standard # attr-spellcheck |

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

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

See also
--------

* All global attributes.


autocapitalize - HTML: HyperText Markup Language

autocapitalize
==============

The **`autocapitalize`** global attribute is an enumerated attribute that controls whether inputted text is automatically capitalized and, if so, in what manner. This is relevant to:

* `<input>` and `<textarea>` elements.
* Any element with `contenteditable` set on it.

`autocapitalize` doesn't affect behavior when typing on a physical keyboard. It affects the behavior of other input mechanisms such as virtual keyboards on mobile devices and voice input. This can assist users by making data entry quicker and easier, for example by automatically capitalizing the first letter of each sentence.

Value
-----

Possible values are:

`none` or `off`

Do not automatically capitalize any text.

`sentences` or `on`

Automatically capitalize the first character of each sentence.

`words`

Automatically capitalize the first character of each word.

`characters`

Automatically capitalize every character.

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

* `autocapitalize` can be set on `<input>` and `<textarea>` elements, *and* on their containing `<form>` elements. When `autocapitalize` is set on a `<form>` element, it sets the autocapitalize behavior for all contained `<input>`s and `<textarea>`s, overriding any `autocapitalize` values set on contained elements.
* `autocapitalize` has no effect on the `url`, `email`, or `password` `<input>` types, where autocapitalization is never enabled.
* Where `autocapitalize` is not specified, the adopted default behavior varies between browsers. For example:
    + Chrome and Safari default to `on`/`sentences`
    + Firefox defaults to `off`/`none`.
Examples
--------

### HTML

```html
<p>Form to test different autocapitalize settings:</p>

<form>
  <div>
    <label for="default">Default: no autocapitalize set</label>
    <input type="text" id="default" name="default" />
  </div>
  <div>
    <label for="off">autocapitalize="off"</label>
    <input type="text" id="off" name="off" autocapitalize="off" />
  </div>
  <div>
    <label for="none">autocapitalize="none"</label>
    <input type="text" id="none" name="none" autocapitalize="none" />
  </div>
  <div>
    <label for="on">autocapitalize="on"</label>
    <input type="text" id="on" name="on" autocapitalize="on" />
  </div>
  <div>
    <label for="sentences">autocapitalize="sentences"</label>
    <input
 type="text"
 id="sentences"
 name="sentences"
 autocapitalize="sentences" />
  </div>
  <div>
    <label for="words">autocapitalize="words"</label>
    <input type="text" id="words" name="words" autocapitalize="words" />
  </div>
  <div>
    <label for="characters">autocapitalize="characters"</label>
    <input
 type="text"
 id="characters"
 name="characters"
 autocapitalize="characters" />
  </div>
  <div>
    <label for="characters-ta">autocapitalize="characters" on textarea</label>
    <textarea
 type="text"
 id="characters-ta"
 name="characters-ta"
 autocapitalize="characters">
    </textarea>
  </div>
</form>

<hr />

<p contenteditable autocapitalize="characters">
  This content is editable and has autocapitalize="characters" set on it
</p>
```

```
div {
  margin-bottom: 20px;
}
```

Result
------

Test the effect on each input using a virtual keyboard or voice entry (keyboard entry will not work).

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

| Specification |
| --- |
| HTML Standard # attr-autocapitalize |

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

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


<del>: The Deleted Text element - HTML: HyperText Markup Language

<del>: The Deleted Text element
===============================

The **`<del>`** HTML element represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. The `<ins>` element can be used for the opposite purpose: to indicate text that has been added to the document.

Try it
------

This element is often (but need not be) rendered by applying a strike-through style to the text.

|  |  |
| --- | --- |
| Content categories | Phrasing content,
 flow content.
  |
| Permitted content | Transparent. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content.
  |
| Implicit ARIA role | `deletion` |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLModElement` |

Attributes
----------

This element's attributes include the global attributes.

`cite`

A URI for a resource that explains the change (for example, meeting minutes).

`datetime`

This attribute indicates the time and date of the change and must be a valid date string with an optional time. If the value cannot be parsed as a date with an optional time string, the element does not have an associated timestamp. For the format of the string without a time, see Date strings. The format of the string if it includes both date and time is covered in Local date and time strings.

Examples
--------

```html
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>
```

### Result

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

The presence of the `del` element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS `content` property, along with the `::before` and `::after` pseudo-elements.

```css
del::before,
del::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}
```

Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been deleted would adversely affect understanding.

* Short note on making your mark (more accessible) | The Paciello Group
* Tweaking Text Level Styles | Adrian Roselli
Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-del-element |

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

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

See also
--------

* `<ins>` element for insertions into a text
* `<s>` element for strikethrough separate from representing deletion of text


<img>: The Image Embed element - HTML: HyperText Markup Language

<img>: The Image Embed element
==============================

The **`<img>`** HTML element embeds an image into the document.

Try it
------

The above example shows usage of the `<img>` element:

* The `src` attribute is **required**, and contains the path to the image you want to embed.
* The `alt` attribute holds a textual replacement for the image, which is mandatory and **incredibly useful** for accessibility — screen readers read the attribute value out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.

There are many other attributes to achieve various purposes:

* Referrer/CORS control for security and privacy: see `crossorigin` and `referrerpolicy`.
* Use both `width` and `height` to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts.
* Responsive image hints with `sizes` and `srcset` (see also the `<picture>` element and our Responsive images tutorial).
Supported image formats
-----------------------

The HTML standard doesn't list what image formats to support, so user agents may support different formats.

**Note:** The Image file type and format guide provides comprehensive information about image formats and their web browser support.
 This section is just a summary!

The image file formats that are most commonly used on the web are:

* APNG (Animated Portable Network Graphics) — Good choice for lossless animation sequences (GIF is less performant)
* AVIF (AV1 Image File Format) — Good choice for both images and animated images due to high performance.
* GIF (Graphics Interchange Format) — Good choice for *simple* images and animations.
* JPEG (Joint Photographic Expert Group image) — Good choice for lossy compression of still images (currently the most popular).
* PNG (Portable Network Graphics) — Good choice for lossless compression of still images (slightly better quality than JPEG).
* SVG (Scalable Vector Graphics) — Vector image format. Use for images that must be drawn accurately at different sizes.
* WebP (Web Picture format) — Excellent choice for both images and animated images

Formats like WebP and AVIF are recommended as they perform much better than PNG, JPEG, GIF for both still and animated images.

SVG remains the recommended format for images that must be drawn accurately at different sizes.

Image loading errors
--------------------

If an error occurs while loading or rendering an image, and an `onerror` event handler has been set for the `error` event, that event handler will get called. This can happen in several situations, including:

* The `src` attribute is empty (`""`) or `null`.
* The `src` URL is the same as the URL of the page the user is currently on.
* The image is corrupted in some way that prevents it from being loaded.
* The image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the `<img>` element's attributes.
* The image is in a format not supported by the user agent.
Attributes
----------

This element includes the global attributes.

`alt`

Defines text that can replace the image in the page.

**Note:** Browsers do not always display images. There are a number of situations in which a browser might not display images, such as:

* Non-visual browsers (such as those used by people with visual impairments)
* The user chooses not to display images (saving bandwidth, privacy reasons)
* The image is invalid or an unsupported type

In these cases, the browser may replace the image with the text in the element's `alt` attribute. For these reasons and others, provide a useful value for `alt` whenever possible.

Setting this attribute to an empty string (`alt=""`) indicates that this image is *not* a key part of the content (it's decoration or a tracking pixel), and that non-visual browsers may omit it from rendering. Visual browsers will also hide the broken image icon if the `alt` attribute is empty and the image failed to display.

This attribute is also used when copying and pasting the image to text, or saving a linked image to a bookmark.

`crossorigin`

Indicates if the fetching of the image must be done using a CORS request. Image data from a CORS-enabled image returned from a CORS request can be reused in the `<canvas>` element without being marked "tainted".

If the `crossorigin` attribute is *not* specified, then a non-CORS request is sent (without the `Origin` request header), and the browser marks the image as tainted and restricts access to its image data, preventing its usage in `<canvas>` elements.

If the `crossorigin` attribute *is* specified, then a CORS request is sent (with the `Origin` request header); but if the server does not opt into allowing cross-origin access to the image data by the origin site (by not sending any `Access-Control-Allow-Origin` response header, or by not including the site's origin in any `Access-Control-Allow-Origin` response header it does send), then the browser blocks the image from loading, and logs a CORS error to the devtools console.

Allowed values:

`anonymous`

A CORS request is sent with credentials omitted (that is, no cookies, X.509 certificates, or `Authorization` request header).

`use-credentials`

The CORS request is sent with any credentials included (that is, cookies, X.509 certificates, and the `Authorization` request header). If the server does not opt into sharing credentials with the origin site (by sending back the `Access-Control-Allow-Credentials: true` response header), then the browser marks the image as tainted and restricts access to its image data.

If the attribute has an invalid value, browsers handle it as if the `anonymous` value was used. See CORS settings attributes for additional information.

`decoding`

This attribute provides a hint to the browser as to whether it should perform image decoding along with rendering the other DOM content in a single presentation step that looks more "correct" (`sync`), or render and present the other DOM content first and then decode the image and present it later (`async`). In practice, `async` means that the next paint does not wait for the image to decode.

It is often difficult to perceive any noticeable effect when using `decoding` on static `<img>` elements. They'll likely be initially rendered as empty images while the image files are fetched (either from the network or from the cache) and then handled independently anyway, so the "syncing" of content updates is less apparent. However, the blocking of rendering while decoding happens, while often quite small, *can* be measured — even if it is difficult to observe with the human eye. See What does the image decoding attribute actually do? for a more detailed analysis (tunetheweb.com, 2023).

Using different `decoding` types can result in more noticeable differences when dynamically inserting `<img>` elements into the DOM via JavaScript — see `HTMLImageElement.decoding` for more details.

Allowed values:

`sync`

Decode the image synchronously along with rendering the other DOM content, and present everything together.

`async`

Decode the image asynchronously, after rendering and presenting the other DOM content.

`auto`

No preference for the decoding mode; the browser decides what is best for the user. This is the default value.

`elementtiming`

Marks the image for observation by the `PerformanceElementTiming` API. The value given becomes an identifier for the observed image element. See also the `elementtiming` attribute page.

`fetchpriority`

Provides a hint of the relative priority to use when fetching the image. Allowed values:

`high`

Signals a high-priority fetch relative to other images.

`low`

Signals a low-priority fetch relative to other images.

`auto`

Default: Signals automatic determination of fetch priority relative to other images.

`height`

The intrinsic height of the image, in pixels. Must be an integer without a unit.

**Note:** Including `height` and `width` enables the aspect ratio of the image to be calculated by the browser prior to the image being loaded. This aspect ratio is used to reserve the space needed to display the image, reducing or even preventing a layout shift when the image is downloaded and painted to the screen. Reducing layout shift is a major component of good user experience and web performance.

`ismap`

This Boolean attribute indicates that the image is part of a server-side map. If so, the coordinates where the user clicked on the image are sent to the server.

**Note:** This attribute is allowed only if the `<img>` element is a descendant of an `<a>` element with a valid `href` attribute. This gives users without pointing devices a fallback destination.

`loading`

Indicates how the browser should load the image:

`eager`

Loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value).

`lazy`

Defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser. The intent is to avoid the network and storage bandwidth needed to handle the image until it's reasonably certain that it will be needed. This generally improves the performance of the content in most typical use cases.

**Note:** Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when.
 **Note:** Images with `loading` set to `lazy` will never be loaded if they do not intersect a visible part of an element, even if loading them would change that as unloaded images have a `width` and `height` of `0`. Putting `width` and `height` on lazyloaded images fixes this issue and is a best practice, recommended by the specification. Doing so also helps prevent layout shifts.

`referrerpolicy`

A string indicating which referrer to use when fetching the resource:

* `no-referrer`: The `Referer` header will not be sent.
* `no-referrer-when-downgrade`: The `Referer` header will not be sent to origins without TLS (HTTPS).
* `origin`: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
* `origin-when-cross-origin`: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
* `same-origin`: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
* `strict-origin`: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
* `strict-origin-when-cross-origin` (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
* `unsafe-url`: The referrer will include the origin *and* the path (but not the fragment, password, or username). **This value is unsafe**, because it leaks origins and paths from TLS-protected resources to insecure origins.

`sizes`

One or more strings separated by commas, indicating a set of source sizes. Each source size consists of:

1. A media condition. This must be omitted for the last item in the list.
2. A source size value.

Media Conditions describe properties of the *viewport*, not of the *image*. For example, `(max-height: 500px) 1000px` proposes to use a source of 1000px width, if the *viewport* is not higher than 500px.

Source size values specify the intended display size of the image. User agents use the current source size to select one of the sources supplied by the `srcset` attribute, when those sources are described using width (`w`) descriptors. The selected source size affects the intrinsic size of the image (the image's display size if no CSS styling is applied). If the `srcset` attribute is absent, or contains no values with a width descriptor, then the `sizes` attribute has no effect.

`src`

The image URL. Mandatory for the `<img>` element. On browsers supporting `srcset`, `src` is treated like a candidate image with a pixel density descriptor `1x`, unless an image with this pixel density descriptor is already defined in `srcset`, or unless `srcset` contains `w` descriptors.

`srcset`

One or more strings separated by commas, indicating possible image sources for the user agent to use. Each string is composed of:

1. A URL to an image
2. Optionally, whitespace followed by one of:
    * A width descriptor (a positive integer directly followed by `w`). The width descriptor is divided by the source size given in the `sizes` attribute to calculate the effective pixel density.
    * A pixel density descriptor (a positive floating point number directly followed by `x`).

If no descriptor is specified, the source is assigned the default descriptor of `1x`.

It is incorrect to mix width descriptors and pixel density descriptors in the same `srcset` attribute. Duplicate descriptors (for instance, two sources in the same `srcset` which are both described with `2x`) are also invalid.

If the `srcset` attribute uses width descriptors, the `sizes` attribute must also be present, or the `srcset` itself will be ignored.

The user agent selects any of the available sources at its discretion. This provides them with significant leeway to tailor their selection based on things like user preferences or bandwidth conditions. See our Responsive images tutorial for an example.

`width`

The intrinsic width of the image in pixels. Must be an integer without a unit.

`usemap`

The partial URL (starting with `#`) of an image map associated with the element.

**Note:** You cannot use this attribute if the `<img>` element is inside an `<a>` or `<button>` element.

### Deprecated attributes

`align`
Deprecated

Aligns the image with its surrounding context. Use the `float` and/or `vertical-align` CSS properties instead of this attribute. Allowed values:

`top`

Equivalent to `vertical-align: top` or `vertical-align: text-top`

`middle`

Equivalent to `vertical-align: -moz-middle-with-baseline`

`bottom`

The default, equivalent to `vertical-align: unset` or `vertical-align: initial`

`left`

Equivalent to `float: left`

`right`

Equivalent to `float: right`

`border`
Deprecated

The width of a border around the image. Use the `border` CSS property instead.

`hspace`
Deprecated

The number of pixels of white space on the left and right of the image. Use the `margin` CSS property instead.

`longdesc`
Deprecated

A link to a more detailed description of the image. Possible values are a URL or an element `id`.

**Note:** This attribute is mentioned in the latest W3C version, HTML 5.2, but has been removed from the WHATWG's HTML Living Standard. It has an uncertain future; authors should use a WAI-ARIA alternative such as `aria-describedby` or `aria-details`.

`name`
Deprecated

A name for the element. Use the `id` attribute instead.

`vspace`
Deprecated

The number of pixels of white space above and below the image. Use the `margin` CSS property instead.

Styling with CSS
----------------

`<img>` is a replaced element; it has a `display` value of `inline` by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were `inline-block`. You can set properties like `border`/`border-radius`, `padding`/`margin`, `width`, `height`, etc. on an image.

`<img>` has no baseline, so when images are used in an inline formatting context with `vertical-align``: baseline`, the bottom of the image will be placed on the text baseline.

You can use the `object-position` property to position the image within the element's box, and the `object-fit` property to adjust the sizing of the image within the box (for example, whether the image should fit the box or fill it even if clipping is required).

Depending on its type, an image may have an intrinsic width and height. For some image types, however, intrinsic dimensions are unnecessary. SVG images, for instance, have no intrinsic dimensions if their root `<svg>` element doesn't have a `width` or `height` set on it.

Examples
--------

### Alternative text

The following example embeds an image into the page and includes alternative text for accessibility.

```html
<img src="favicon144.png" alt="MDN" />
```

### Image link

This example builds upon the previous one, showing how to turn the image into a link. To do so, nest the `<img>` tag inside the `<a>`. You should make the alternative text describe the resource the link is pointing to, as if you were using a text link instead.

```html
<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>
```

### Using the srcset attribute

In this example we include a `srcset` attribute with a reference to a high-resolution version of the logo; this will be loaded instead of the `src` image on high-resolution devices. The image referenced in the `src` attribute is counted as a `1x` candidate in user agents that support `srcset`.

```html
<img src="favicon72.png" alt="MDN" srcset="favicon144.png 2x" />
```

### Using the srcset and sizes attributes

The `src` attribute is ignored in user agents that support `srcset` when `w` descriptors are included. When the `(max-width: 600px)` media condition matches, the 200 pixel-wide image will load (it is the one that matches `200px` most closely), otherwise the other image will load.

```html
<img
 src="clock-demo-200px.png"
 alt="The time is 12:45."
 srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
 sizes="(max-width: 600px) 200px, 50vw" />
```

**Note:** To see the resizing in action, view the example on a separate page, so you can actually resize the content area.

Security and privacy concerns
-----------------------------

Although `<img>` elements have innocent uses, they can have undesirable consequences for user security and privacy. See Referer header: privacy and security concerns for more information and mitigations.

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

### Authoring meaningful alternate descriptions

An `alt` attribute's value should provide a clear and concise text replacement for the image's content. It should not describe the presence of the image itself or the file name of the image. If the `alt` attribute is purposefully left off because the image has no textual equivalent, consider alternate methods to present what the image is trying to communicate.

#### Don't

```html
<img alt="image" src="penguin.jpg" />
```

#### Do

```html
<img alt="A Rockhopper Penguin is standing on a beach." src="penguin.jpg" />
```

When an `alt` attribute is not present on an image, some screen readers may announce the image's file name instead. This can be a confusing experience if the file name isn't representative of the image's contents.

* An alt Decision Tree • Images • WAI Web Accessibility Tutorials
* Alt-texts: The Ultimate Guide — Axess Lab
* How to Design Great Alt Text: An Introduction | Deque
* MDN Understanding WCAG, Guideline 1.1 explanations
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
### Identifying SVG as an image

Due to a VoiceOver bug, VoiceOver does not correctly announce SVG images as images. Include `role="img"` to all `<img>` elements with SVG source files to ensure assistive technologies correctly announce the SVG as image content.

```html
<img src="mdn.svg" alt="MDN" role="img" />
```

### The title attribute

The `title` attribute is not an acceptable substitute for the `alt` attribute. Additionally, avoid duplicating the `alt` attribute's value in a `title` attribute declared on the same image. Doing so may cause some screen readers to announce the same text twice, creating a confusing experience.

The `title` attribute should also not be used as supplemental captioning information to accompany an image's `alt` description. If an image needs a caption, use the `figure` and `figcaption` elements.

The value of the `title` attribute is usually presented to the user as a tooltip, which appears shortly after the cursor stops moving over the image. While this *can* provide additional information to the user, you should not assume that the user will ever see it: the user may only have keyboard or touchscreen. If you have information that's particularly important or valuable for the user, present it inline using one of the methods mentioned above instead of using `title`.

* Using the HTML title attribute – updated | The Paciello Group
Technical summary
-----------------

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content,
 embedded content,
 palpable content. If the element has a `usemap` attribute, it also is a part
 of the interactive content category.
  |
| Permitted content | None; it is a void element. |
| Tag omission | Must have a start tag and must not have an end tag. |
| Permitted parents | Any element that accepts embedded content. |
| Implicit ARIA role | * with non-empty `alt` attribute or no
 `alt` attribute:
 ``img``
* with empty `alt` attribute:
 `presentation`
 |
| Permitted ARIA roles | * with non-empty `alt` attribute:
    + `button`
    + `checkbox`
    + `link`
    + `menuitem`
    + `menuitemcheckbox`
    + `menuitemradio`
    + `option`
    + `progressbar`
    + `scrollbar`
    + `separator`
    + `slider`
    + `switch`
    + `tab`
    + `treeitem`
* with empty `alt` attribute, `none`
 or `presentation`
* with no `alt` attribute, no `role` permitted
 |
| DOM interface | `HTMLImageElement` |

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

| Specification |
| --- |
| HTML Standard # the-img-element |

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

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

See also
--------

* `<picture>`, `<object>`, and `<embed>` elements
* `object-fit`, `object-position`, `image-orientation`, `image-rendering`, and `image-resolution`: Image-related CSS properties.
* `HTMLImageElement` interface for this element
* Images in HTML
* Image file type and format guide
* Responsive images