Global attributes - HTML: HyperText Markup Language

Global attributes
=================

**Global attributes** are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.

Global attributes may be specified on all HTML elements, *even those not specified in the standard*. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as `<foo hidden>…</foo>`, even though `<foo>` is not a valid HTML element.

In addition to the basic HTML global attributes, the following global attributes also exist:

* `xml:lang` and `xml:base` — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.
* The ARIA `role` attribute and the multiple `aria-*` states and properties, used for ensuring accessibility.
* The event handler attributes: `onabort`, `onautocomplete`, `onautocompleteerror`, `onblur`, `oncancel`, `oncanplay`, `oncanplaythrough`, `onchange`, `onclick`, `onclose`, `oncontextmenu`, `oncuechange`, `ondblclick`, `ondrag`, `ondragend`, `ondragenter`, `ondragleave`, `ondragover`, `ondragstart`, `ondrop`, `ondurationchange`, `onemptied`, `onended`, `onerror`, `onfocus`, `oninput`, `oninvalid`, `onkeydown`, `onkeypress`, `onkeyup`, `onload`, `onloadeddata`, `onloadedmetadata`, `onloadstart`, `onmousedown`, `onmouseenter`, `onmouseleave`, `onmousemove`, `onmouseout`, `onmouseover`, `onmouseup`, `onmousewheel`, `onpause`, `onplay`, `onplaying`, `onprogress`, `onratechange`, `onreset`, `onresize`, `onscroll`, `onseeked`, `onseeking`, `onselect`, `onshow`, `onsort`, `onstalled`, `onsubmit`, `onsuspend`, `ontimeupdate`, `ontoggle`, `onvolumechange`, `onwaiting`.
List of global attributes
-------------------------

`accesskey`

Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.

`autocapitalize`

Controls whether inputted text is automatically capitalized and, if so, in what manner.

`autofocus`

Indicates that an element is to be focused on page load, or as soon as the `<dialog>` it is part of is displayed. This attribute is a boolean, initially false.

`class`

A space-separated list of the classes of the element. Classes allow CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`.

`contenteditable`

An enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values:

* `true` or the *empty string*, which indicates that the element must be editable;
* `false`, which indicates that the element must not be editable.

`contextmenu`
Deprecated

Non-standard

The **`id`** of a `<menu>` to use as the contextual menu for this element.

`data-*`

Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. 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.

`dir`

An enumerated attribute indicating the directionality of the element's text. 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 it applies that directionality to the whole element.

`draggable`

An enumerated attribute indicating whether the element can be dragged, using the Drag and Drop API. It can have the following values:

* `true`, which indicates that the element may be dragged
* `false`, which indicates that the element may not be dragged.

`enterkeyhint`

Hints what action label (or icon) to present for the enter key on virtual keyboards.

`exportparts`

Used to transitively export shadow parts from a nested shadow tree into a containing light tree.

`hidden`

An enumerated attribute indicating that the element is not yet, or is no longer, *relevant*. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.

`id`

Defines a unique 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).

`inert`

A boolean value that makes the browser disregard user input events for the element. Useful when click events are present.

`inputmode`

Provides a hint to browsers about the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on `<input>` elements, but is usable on any element while in `contenteditable` mode.

`is`

Allows you to specify that a standard HTML element should behave like a registered custom built-in element (see Using custom elements for more details).

**Note:** The `item*` attributes are part of the WHATWG HTML Microdata feature.

`itemid`

The unique, global identifier of an item.

`itemprop`

Used to add properties to an item. Every HTML element may have an `itemprop` attribute specified, where an `itemprop` consists of a name and value pair.

`itemref`

Properties that are not descendants of an element with the `itemscope` attribute can be associated with the item using an `itemref`. It provides a list of element ids (not `itemid`s) with additional properties elsewhere in the document.

`itemscope`

`itemscope` (usually) works along with `itemtype` to specify that the HTML contained in a block is about a particular item. `itemscope` creates the Item and defines the scope of the `itemtype` associated with it. `itemtype` is a valid URL of a vocabulary (such as schema.org) that describes the item and its properties context.

`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.

`lang`

Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. The attribute contains one "language tag" (made of hyphen-separated "language subtags") in the format defined in RFC 5646: Tags for Identifying Languages (also known as BCP 47). `xml:lang` has priority over it.

`nonce`

A cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not a given fetch will be allowed to proceed.

`part`

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

`popover`

Used to designate an element as a popover element (see Popover API). 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.

`role`

Roles define the semantic meaning of content, allowing screen readers and other tools to present and support interaction with an object in a way that is consistent with user expectations of that type of object. `roles` are added to HTML elements using `role="role_type"`, where `role_type` is the name of a role in the ARIA specification.

`slot`

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

`spellcheck`

An enumerated attribute defines whether the element may be checked for spelling errors. 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.

`style`

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

`tabindex`

An integer attribute indicating if the element can take input focus (is *focusable*), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values:

* a *negative value* means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
* `0` means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
* a *positive value* means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the **tabindex**. If several elements share the same tabindex, their relative order follows their relative positions in the document.

`title`

Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.

`translate`

An enumerated attribute that is used to specify whether an element's attribute values and the values of its `Text` node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values:

* empty string or `yes`, which indicates that the element will be translated.
* `no`, which indicates that the element will not be translated.

`virtualkeyboardpolicy`
Experimental

An enumerated attribute used to control the on-screen virtual keyboard behavior on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available for elements that its content is editable (for example, it is an `<input>` or `<textarea>` element, or an element with the `contenteditable` attribute set).

* `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 |
| --- |
| HTML Standard # the-accesskey-attribute |
| HTML Standard # attr-autocapitalize |
| HTML Standard # attr-fe-autocomplete |
| HTML Standard # dom-fe-autofocus |
| HTML Standard # global-attributes:classes-2 |
| HTML Standard # attr-contenteditable |
| HTML Standard # attr-data-\* |
| HTML Standard # the-dir-attribute |
| HTML Standard # the-draggable-attribute |
| HTML Standard # attr-enterkeyhint |
| CSS Shadow Parts # element-attrdef-html-global-exportparts |
| HTML Standard # the-hidden-attribute |
| HTML Standard # global-attributes:the-id-attribute-2 |
| HTML Standard # the-inert-attribute |
| HTML Standard # attr-inputmode |
| HTML Standard # attr-is |
| HTML Standard # attr-itemid |
| HTML Standard # names:-the-itemprop-attribute |
| HTML Standard # attr-itemref |
| HTML Standard # attr-itemscope |
| HTML Standard # attr-itemtype |
| HTML Standard # attr-lang |
| HTML Standard # attr-nonce |
| CSS Shadow Parts # part-attr |
| HTML Standard # the-popover-attribute |
| HTML Standard # attr-popovertarget |
| HTML Standard # attr-popovertargetaction |
| HTML Standard # attr-slot |
| DOM Standard # ref-for-dom-element-slot① |
| HTML Standard # attr-spellcheck |
| HTML Standard # the-style-attribute |
| HTML Standard # attr-tabindex |
| HTML Standard # the-title-attribute |
| HTML Standard # attr-translate |
| VirtualKeyboard API # dom-elementcontenteditable-virtualkeyboardpolicy |

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

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

See also
--------

* `Element` interface that allows querying most global attributes.


HTML attribute reference - HTML: HyperText Markup Language

HTML attribute reference
========================

Elements in HTML have **attributes**; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.

Attribute list
--------------

| Attribute Name | Elements | Description |
| --- | --- | --- |
| `accept` | `<form>`, `<input>` | List of types the server accepts, typically a file type. |
| `accept-charset` | `<form>` | List of supported charsets. |
| `accesskey` | Global attribute | Keyboard shortcut to activate or add focus to the element. |
| `action` | `<form>` |
 The URI of a program that processes the information submitted via the
 form.
  |
| `align`
Deprecated
 | `<caption>`, `<col>`,
 `<colgroup>`,
 `<hr>`, `<iframe>`,
 `<img>`, `<table>`,
 `<tbody>`, `<td>`,
 `<tfoot>`, `<th>`,
 `<thead>`, `<tr>` | Specifies the horizontal alignment of the element. |
| `allow` | `<iframe>` | Specifies a feature-policy for the iframe. |
| `alt` | `<area>`,
 `<img>`, `<input>` | Alternative text in case an image can't be displayed. |
| `async` | `<script>` | Executes the script asynchronously. |
| `autocapitalize` | Global attribute | Sets whether input is automatically capitalized when entered by user |
| `autocomplete` | `<form>`, `<input>`,
 `<select>`,
 `<textarea>` |
 Indicates whether controls in this form can by default have their values
 automatically completed by the browser.
  |
| `autoplay` | `<audio>`,
 `<video>` | The audio or video should play as soon as possible. |
| `background` | `<body>`, `<table>`,
 `<td>`, `<th>` | Specifies the URL of an image file.

**Note:** Although browsers and email clients may still
 support this attribute, it is obsolete. Use CSS
 `background-image` instead.

 |
| `bgcolor` | `<body>`, `<col>`,
 `<colgroup>`,
 `<marquee>`,
 `<table>`,
 `<tbody>`,
 `<tfoot>`, `<td>`,
 `<th>`, `<tr>` | Background color of the element.

**Note:** This is a legacy attribute. Please use the
 CSS `background-color` property instead.

 |
| `border` | `<img>`, `<object>`,
 `<table>` | The border width.

**Note:** This is a legacy attribute. Please use the
 CSS `border` property instead.

 |
| `buffered` | `<audio>`,
 `<video>` | Contains the time range of already buffered media. |
| `capture` | `<input>` |
 From the Media Capture specification,
 specifies a new file can be captured.
  |
| `charset` | `<meta>` | Declares the character encoding of the page or script. |
| `checked` | `<input>` | Indicates whether the element should be checked on page load. |
| `cite` | `<blockquote>`,
 `<del>`, `<ins>`,
 `<q>` | Contains a URI which points to the source of the quote or change. |
| `class` | Global attribute | Often used with CSS to style elements with common properties. |
| `color` | `<font>`, `<hr>` |
 This attribute sets the text color using either a named color or a
 color specified in the hexadecimal #RRGGBB format.

**Note:** This is a legacy attribute. Please use the
 CSS `color` property instead.

 |
| `cols` | `<textarea>` | Defines the number of columns in a textarea. |
| `colspan` | `<td>`, `<th>` | The colspan attribute defines the number of columns a cell should span. |
| `content` | `<meta>` |
 A value associated with `http-equiv` or
 `name` depending on the context.
  |
| `contenteditable` | Global attribute | Indicates whether the element's content is editable. |
| `contextmenu`
Non-standard

Deprecated
 | Global attribute |
 Defines the ID of a `<menu>` element which will
 serve as the element's context menu.
  |
| `controls` | `<audio>`,
 `<video>` | Indicates whether the browser should show playback controls to the user. |
| `coords` | `<area>` | A set of values specifying the coordinates of the hot-spot region. |
| `crossorigin` | `<audio>`, `<img>`,
 `<link>`, `<script>`,
 `<video>` | How the element handles cross-origin requests |
| `csp`

Experimental
 | `<iframe>` |
 Specifies the Content Security Policy that an embedded document must
 agree to enforce upon itself.
  |
| `data` | `<object>` | Specifies the URL of the resource. |
| `data-\*` | Global attribute | Lets you attach custom attributes to an HTML element. |
| `datetime` | `<del>`, `<ins>`,
 `<time>` | Indicates the date and time associated with the element. |
| `decoding` | `<img>` | Indicates the preferred method to decode the image. |
| `default` | `<track>` |
 Indicates that the track should be enabled unless the user's preferences
 indicate something different.
  |
| `defer` | `<script>` |
 Indicates that the script should be executed after the page has been
 parsed.
  |
| `dir` | Global attribute |
 Defines the text direction. Allowed values are ltr (Left-To-Right) or
 rtl (Right-To-Left)
  |
| `dirname` | `<input>`,
 `<textarea>` |  |
| `disabled` | `<button>`,
 `<fieldset>`,
 `<input>`,
 `<optgroup>`,
 `<option>`,
 `<select>`,
 `<textarea>` | Indicates whether the user can interact with the element. |
| `download` | `<a>`, `<area>` | Indicates that the hyperlink is to be used for downloading a resource. |
| `draggable` | Global attribute | Defines whether the element can be dragged. |
| `enctype` | `<form>` |
 Defines the content type of the form data when the
 `method` is POST.
  |
| `enterkeyhint`

Experimental
 | `<textarea>`,
 `contenteditable` |
 The `enterkeyhint`
 specifies what action label (or icon) to present for the enter key on
 virtual keyboards. The attribute can be used with form controls (such as
 the value of `textarea` elements), or in elements in an
 editing host (e.g., using `contenteditable` attribute).
  |
| `for` | `<label>`,
 `<output>` | Describes elements which belongs to this one. |
| `form` | `<button>`,
 `<fieldset>`,
 `<input>`,
 `<label>`,
 `<meter>`,
 `<object>`,
 `<output>`,
 `<progress>`,
 `<select>`,
 `<textarea>` | Indicates the form that is the owner of the element. |
| `formaction` | `<input>`,
 `<button>` |
 Indicates the action of the element, overriding the action defined in
 the `<form>`.
  |
| `formenctype` | `<button>`,
 `<input>` |
 If the button/input is a submit button (e.g. `type="submit"`),
 this attribute sets the encoding type to use during form submission. If
 this attribute is specified, it overrides the
 `enctype` attribute of the button's
 form owner.
  |
| `formmethod` | `<button>`,
 `<input>` |
 If the button/input is a submit button (e.g. `type="submit"`),
 this attribute sets the submission method to use during form submission
 (`GET`, `POST`, etc.). If this attribute is
 specified, it overrides the `method` attribute of the
 button's form owner.
  |
| `formnovalidate` | `<button>`,
 `<input>` |
 If the button/input is a submit button (e.g. `type="submit"`),
 this boolean attribute specifies that the form is not to be validated
 when it is submitted. If this attribute is specified, it overrides the
 `novalidate` attribute of the button's
 form owner.
  |
| `formtarget` | `<button>`,
 `<input>` |
 If the button/input is a submit button (e.g. `type="submit"`),
 this attribute specifies the browsing context (for example, tab, window,
 or inline frame) in which to display the response that is received after
 submitting the form. If this attribute is specified, it overrides the
 `target` attribute of the button's
 form owner.
  |
| `headers` | `<td>`, `<th>` |
 IDs of the `<th>` elements which applies to this
 element.
  |
| `height` | `<canvas>`,
 `<embed>`,
 `<iframe>`, `<img>`,
 `<input>`,
 `<object>`,
 `<video>` |
 Specifies the height of elements listed here. For all other elements,
 use the CSS `height` property.

**Note:** In some instances, such as
 `<div>`, this is a legacy attribute, in
 which case the CSS `height` property should
 be used instead.

 |
| `hidden` | Global attribute |
 Prevents rendering of given element, while keeping child elements, e.g.
 script elements, active.
  |
| `high` | `<meter>` | Indicates the lower bound of the upper range. |
| `href` | `<a>`, `<area>`,
 `<base>`, `<link>` | The URL of a linked resource. |
| `hreflang` | `<a>`, `<link>` | Specifies the language of the linked resource. |
| `http-equiv` | `<meta>` | Defines a pragma directive. |
| `id` | Global attribute |
 Often used with CSS to style a specific element. The value of this
 attribute must be unique.
  |
| `integrity` | `<link>`, `<script>` |
 Specifies a
 Subresource Integrity
 value that allows browsers to verify what they fetch.
  |
| `intrinsicsize`

Deprecated
 | `<img>` |
 This attribute tells the browser to ignore the actual intrinsic size of
 the image and pretend it's the size specified in the attribute.
  |
| `inputmode` | `<textarea>`,
 `contenteditable` |
 Provides a hint as to the type of data that might be entered by the user
 while editing the element or its contents. The attribute can be used
 with form controls (such as the value of
 `textarea` elements), or in elements in an editing host
 (e.g., using `contenteditable` attribute).
  |
| `ismap` | `<img>` | Indicates that the image is part of a server-side image map. |
| `itemprop` | Global attribute |  |
| `kind` | `<track>` | Specifies the kind of text track. |
| `label` | `<optgroup>`,
 `<option>`,
 `<track>` | Specifies a user-readable title of the element. |
| `lang` | Global attribute | Defines the language used in the element. |
| `language`

Deprecated
 | `<script>` | Defines the script language used in the element. |
| `loading`
Experimental
 | `<img>`, `<iframe>` |
 Indicates if the element should be loaded lazily
 (`loading="lazy"`) or loaded immediately
 (`loading="eager"`).
  |
| `list` | `<input>` | Identifies a list of pre-defined options to suggest to the user. |
| `loop` | `<audio>`,
 `<marquee>`,
 `<video>` |
 Indicates whether the media should start playing from the start when
 it's finished.
  |
| `low` | `<meter>` | Indicates the upper bound of the lower range. |
| `manifest`

Deprecated
 | `<html>` | Specifies the URL of the document's cache manifest.

**Note:** This attribute is obsolete, use
 `<link rel="manifest">`
 instead.

 |
| `max` | `<input>`,
 `<meter>`,
 `<progress>` | Indicates the maximum value allowed. |
| `maxlength` | `<input>`,
 `<textarea>` | Defines the maximum number of characters allowed in the element. |
| `minlength` | `<input>`,
 `<textarea>` | Defines the minimum number of characters allowed in the element. |
| `media` | `<a>`, `<area>`,
 `<link>`, `<source>`,
 `<style>` |
 Specifies a hint of the media for which the linked resource was
 designed.
  |
| `method` | `<form>` |
 Defines which HTTP method to use when
 submitting the form. Can be `GET` (default) or
 `POST`.
  |
| `min` | `<input>`,
 `<meter>` | Indicates the minimum value allowed. |
| `multiple` | `<input>`,
 `<select>` |
 Indicates whether multiple values can be entered in an input of the type
 `email` or `file`.
  |
| `muted` | `<audio>`,
 `<video>` | Indicates whether the audio will be initially silenced on page load. |
| `name` | `<button>`, `<form>`,
 `<fieldset>`,
 `<iframe>`,
 `<input>`,
 `<object>`,
 `<output>`,
 `<select>`,
 `<textarea>`,
 `<map>`, `<meta>`,
 `<param>` |
 Name of the element. For example used by the server to identify the
 fields in form submits.
  |
| `novalidate` | `<form>` |
 This attribute indicates that the form shouldn't be validated when
 submitted.
  |
| `open` | `<details>`,
 `<dialog>` |
 Indicates whether the contents are currently visible (in the case of
 a `<details>` element) or whether the dialog is active
 and can be interacted with (in the case of a
 `<dialog>` element).
  |
| `optimum` | `<meter>` | Indicates the optimal numeric value. |
| `pattern` | `<input>` |
 Defines a regular expression which the element's value will be validated
 against.
  |
| `ping` | `<a>`, `<area>` |
 The `ping` attribute specifies a space-separated list of URLs
 to be notified if a user follows the hyperlink.
  |
| `placeholder` | `<input>`,
 `<textarea>` | Provides a hint to the user of what can be entered in the field. |
| `playsinline` | `<video>` | A Boolean attribute indicating that the video is to be played "inline"; that is, within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen. |
| `poster` | `<video>` | A URL indicating a poster frame to show until the user plays or seeks. |
| `preload` | `<audio>`,
 `<video>` |
 Indicates whether the whole resource, parts of it or nothing should be
 preloaded.
  |
| `readonly` | `<input>`,
 `<textarea>` | Indicates whether the element can be edited. |
| `referrerpolicy` | `<a>`, `<area>`,
 `<iframe>`, `<img>`,
 `<link>`, `<script>` | Specifies which referrer is sent when fetching the resource. |
| `rel` | `<a>`, `<area>`,
 `<link>` | Specifies the relationship of the target object to the link object. |
| `required` | `<input>`,
 `<select>`,
 `<textarea>` | Indicates whether this element is required to fill out or not. |
| `reversed` | `<ol>` |
 Indicates whether the list should be displayed in a descending order
 instead of an ascending order.
  |
| `role` | Global attribute | Defines an explicit role for an element for use by assistive technologies. |
| `rows` | `<textarea>` | Defines the number of rows in a text area. |
| `rowspan` | `<td>`, `<th>` | Defines the number of rows a table cell should span over. |
| `sandbox` | `<iframe>` |
 Stops a document loaded in an iframe from using certain features (such
 as submitting forms or opening new windows).
  |
| `scope` | `<th>` |
 Defines the cells that the header test (defined in the
 `th` element) relates to.
  |
| `scoped`

Non-standard

Deprecated
 | `<style>` |  |
| `selected` | `<option>` | Defines a value which will be selected on page load. |
| `shape` | `<a>`, `<area>` |  |
| `size` | `<input>`,
 `<select>` |
 Defines the width of the element (in pixels). If the element's
 `type` attribute is `text` or
 `password` then it's the number of characters.
  |
| `sizes` | `<link>`, `<img>`,
 `<source>` |  |
| `slot` | Global attribute | Assigns a slot in a shadow DOM shadow tree to an element. |
| `span` | `<col>`,
 `<colgroup>` |  |
| `spellcheck` | Global attribute | Indicates whether spell checking is allowed for the element. |
| `src` | `<audio>`,
 `<embed>`,
 `<iframe>`, `<img>`,
 `<input>`,
 `<script>`,
 `<source>`,
 `<track>`,
 `<video>` | The URL of the embeddable content. |
| `srcdoc` | `<iframe>` |  |
| `srclang` | `<track>` |  |
| `srcset` | `<img>`, `<source>` | One or more responsive image candidates. |
| `start` | `<ol>` | Defines the first number if other than 1. |
| `step` | `<input>` |  |
| `style` | Global attribute | Defines CSS styles which will override styles previously set. |
| `summary`

Deprecated
 | `<table>` |  |
| `tabindex` | Global attribute |
 Overrides the browser's default tab order and follows the one specified
 instead.
  |
| `target` | `<a>`, `<area>`,
 `<base>`, `<form>` |
 Specifies where to open the linked document (in the case of an
 `<a>` element) or where to display the response received
 (in the case of a `<form>` element)
  |
| `title` | Global attribute | Text to be displayed in a tooltip when hovering over the element. |
| `translate` | Global attribute |
 Specify whether an element's attribute values and the values of its
 `Text` node
 children are to be translated when the page is localized, or whether to
 leave them unchanged.
  |
| `type` | `<button>`,
 `<input>`,
 `<embed>`,
 `<object>`,
 `<ol>`,
 `<script>`,
 `<source>`,
 `<style>`, `<menu>`,
 `<link>` | Defines the type of the element. |
| `usemap` | `<img>`, `<input>`,
 `<object>` |  |
| `value` | `<button>`, `<data>`,
 `<input>`, `<li>`,
 `<meter>`,
 `<option>`,
 `<progress>`,
 `<param>` |
 Defines a default value which will be displayed in the element on page
 load.
  |
| `width` | `<canvas>`,
 `<embed>`,
 `<iframe>`, `<img>`,
 `<input>`,
 `<object>`,
 `<video>` | For the elements listed here, this establishes the element's width.

**Note:** For all other instances, such as
 `<div>`, this is a legacy attribute, in
 which case the CSS `width` property should be
 used instead.

 |
| `wrap` | `<textarea>` | Indicates whether the text should be wrapped. |

Content versus IDL attributes
-----------------------------

In HTML, most attributes have two faces: the **content attribute** and the **IDL (Interface Definition Language) attribute**.

The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via `element.setAttribute()` or `element.getAttribute()`. The content attribute is always a string even when the expected value should be an integer. For example, to set an `<input>` element's `maxlength` to 42 using the content attribute, you have to call `setAttribute("maxlength", "42")` on that element.

The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like `element.foo`. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.

Most of the time, IDL attributes will return their values as they are really used. For example, the default `type` for `<input>` elements is "text", so if you set `input.type="foobar"`, the `<input>` element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the `type` IDL attribute will return the string "text".

IDL attributes are not always strings; for example, `input.maxlength` is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so `input.maxlength` is always going to return a number and when you set `input.maxlength`, it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.

IDL attributes can reflect other types such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (`select.size`, for example) and you should read the specifications to understand how exactly they behave.

Boolean Attributes
------------------

Some content attributes (e.g. `required`, `readonly`, `disabled`) are called boolean attributes. If a boolean attribute is present, its value is **true**, and if it's absent, its value is **false**.

HTML defines restrictions on the allowed values of boolean attributes: If the attribute is present, its value must either be the empty string (equivalently, the attribute may have an unassigned value), or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace. The following examples are valid ways to mark up a boolean attribute:

```html
<div itemscope>This is valid HTML but invalid XML.</div>
<div itemscope=itemscope>This is also valid HTML but invalid XML.</div>
<div itemscope="">This is valid HTML and also valid XML.</div>
<div itemscope="itemscope">
  This is also valid HTML and XML, but perhaps a bit verbose.
</div>
```

To be clear, the values "`true`" and "`false`" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether. This restriction clears up some common misunderstandings: With `checked="false"` for example, the element's `checked` attribute would be interpreted as **true** because the attribute is present.

Event handler attributes
------------------------

**Warning:** The use of event handler content attributes is discouraged. The mix of HTML and JavaScript often produces unmaintainable code, and the execution of event handler attributes may also be blocked by content security policies.

In addition to the attributes listed in the table above, global event handlers — such as `onclick` — can also be specified as content attributes on all elements.

All event handler attributes accept a string. The string will be used to synthesize a JavaScript function like `function name(/*args*/) {body}`, where `name` is the attribute's name, and `body` is the attribute's value. The handler receives the same parameters as its JavaScript event handler counterpart — most handlers receive only one `event` parameter, while `onerror` receives five: `event`, `source`, `lineno`, `colno`, `error`. This means you can, in general, use the `event` variable within the attribute.

```html
<div onclick="console.log(event)">Click me!</div>
<!-- The synthesized handler has a name; you can reference itself -->
<div onclick="console.log(onclick)">Click me!</div>
```

See also
--------

* HTML elements


Quirks Mode - HTML: HyperText Markup Language

Quirks Mode
===========

In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.

There are now three modes used by the layout engines in web browsers: quirks mode, limited-quirks mode, and no-quirks mode. In **quirks mode**, layout emulates behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In **no-quirks mode**, the behavior is (hopefully) the desired behavior described by the modern HTML and CSS specifications. In **limited-quirks mode**, there are only a very small number of quirks implemented.

The limited-quirks and no-quirks modes used to be called "almost-standards" mode and "full standards" mode, respectively. These names have been changed as the behavior is now standardized.

How do browsers determine which mode to use?
--------------------------------------------

For HTML documents, browsers use a DOCTYPE in the beginning of the document to decide whether to handle it in quirks mode or standards mode. To ensure that your page uses full standards mode, make sure that your page has a DOCTYPE like in this example:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body></body>
</html>
```

The DOCTYPE shown in the example, `<!DOCTYPE html>`, is the simplest possible, and the one recommended by current HTML standards. Earlier versions of the HTML standard recommended other variants, but all existing browsers today will use full standards mode for this DOCTYPE, even the dated Internet Explorer 6. There are no valid reasons to use a more complicated DOCTYPE. If you do use another DOCTYPE, you may risk choosing one which triggers almost standards mode or quirks mode.

Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.

The only purpose of `<!DOCTYPE html>` is to activate no-quirks mode. Older versions of HTML standard DOCTYPEs provided additional meaning, but no browser ever used the DOCTYPE for anything other than switching between render modes.

See also a detailed description of when different browsers choose various modes.

### XHTML

If you serve your page as XHTML using the `application/xhtml+xml` MIME type in the `Content-Type` HTTP header, you do not need a DOCTYPE to enable standards mode, as such documents always use 'full standards mode'. Note however that serving your pages as `application/xhtml+xml` will cause Internet Explorer 8 to show a download dialog box for an unknown format instead of displaying your page, as the first version of Internet Explorer with support for XHTML is Internet Explorer 9.

If you serve XHTML-like content using the `text/html` MIME type, browsers will read it as HTML, and you will need the DOCTYPE to use standards mode.

How do I see which mode is used?
--------------------------------

If the page is rendered in quirks or limited-quirks mode, Firefox will log a warning to the console tab in the developer tools. If this warning is not shown, Firefox is using no-quirks mode.

The value of `document.compatMode` in JavaScript will show whether or not the document is in quirks mode. If its value is `"BackCompat"`, the document is in quirks mode. If it isn't, it will have value `"CSS1Compat"`.


Microformats - HTML: HyperText Markup Language

Microformats
============

*Microformats* are standards used to embed semantics and structured data in HTML, and provide an API to be used by social web applications, search engines, aggregators, and other tools. These minimal patterns of HTML are used for marking up entities that range from fundamental to domain-specific information, such as people, organizations, events, and locations.

* To create a microformats object, h-\* class names are used in the class attribute.
* To add a property to an object, the p-\*, u-\*, dt-\*, e-\* class names are used on one of the object's descendants.

Microformats use supporting vocabularies to describe objects and name-value pairs to assign values to their properties. The properties are carried in class attributes that can be added to any HTML element, while the data values re-use HTML element content and semantic attributes.

Microformats2 (sometimes referred to as mf2) is an update to microformats that provides a simpler way of annotating HTML structured syntax and vocabularies than previous approaches of using RDFa and microdata. These previous approaches require learning new attributes.

There are open source parsing libraries for most languages for microformats2.

How Microformats Work
---------------------

An author of a webpage can add microformats to their HTML. For example if they wanted to identify themselves they could use an h-card such as:

### HTML Example

```html
<a class="h-card" href="https://alice.example.com">Alice Blogger</a>
```

When a parser encounters this data, it will know that this page contains a "card" which describes a person or organization named `Alice Blogger` with a URL of `https://alice.example.com/`. The parser makes this data available via APIs that can be used for different applications. For example, an application could scan a page for a h-card to use as profile information for someone who has signed up to a service.

As in this example, some markup patterns require only a single microformat root class name, which parsers use to find a few generic properties such as `name`, `url`, `photo`.

Microformats Use Cases
----------------------

Microformats have numerous use cases. First, the Webmention standard uses microformats to provide a way in which messages and comments can be sent from one site to another. The Webmention specification defines specific attributes that sites may publish and consume to create a rich, interoperable way of publishing messages and comments. Microformats can also be used with Webmentions to enable sending social reactions such as likes, reposts, and bookmarks from one site to another.

Microformats also enable easy syndication across sites. An aggregator could parse a page with published microformats to look for information such as a post title, a post body, and the author of a post. This aggregator could then use the semantic information gathered to render a result on their site. For instance, news aggregators and community posting boards could facilitate submissions and use microformats to exact relevant content from a page. Further, a website could use microformats to send crafted requests to third-parties to publish content, such as social networks.

All major search engines support reading and interpreting microformats. Search engines benefit greatly from direct access to this structured data because it allows them to understand the information on web pages. With this information, search engines can provide more relevant results to users. Some search engines may render special snippets such as star ratings on a search result page based on the data provided in microformats.

In addition to being machine-readable, microformats are designed to be easily read by humans. This approach makes it easy for people to understand and maintain microformats data.

Microformats Prefixes
---------------------

All microformats consist of a root, and a collection of properties. Properties are all optional and potentially multivalued - applications needing a singular value may use the first instance of a property. Hierarchical data is represented with nested microformats, typically as property values themselves.

All microformats class names use prefixes. Prefixes are **syntax independent of vocabularies**, which are developed separately.

* **"h-\*" for root class names**, e.g. "h-card", "h-entry", "h-feed", and many more. These top-level root classes usually indicate a type and corresponding expected vocabulary of properties. For example:
    + h-card describes a person or organization
    + h-entry describes episodic or date stamped online content like a blog post
    + h-feed describes a stream or feed of posts
    + You can find many more vocabularies on the microformats2 wiki.
* **"p-\*" for plain (text) properties**, e.g. "p-name", "p-summary"
    + Generic plain text parsing, element text in general. On certain HTML elements, use special attributes first, e.g. img/alt, abbr/title.
* **"u-\*" for URL properties**, e.g. "u-url", "u-photo", "u-logo"
    + Special parsing: element attributes a/href, img/src, object/data etc. attributes over element contents.
* **"dt-\*" for datetime properties**, e.g. "dt-start", "dt-end", "dt-bday"
    + Special parsing: time element datetime attribute, value-class-pattern and separate date time value parsing for readability.
* **"e-\*" for element tree properties** where the entire contained element hierarchy is the value, e.g. "e-content". The "e-" prefix can also be mnemonically remembered as "element tree", "embedded markup", or "encapsulated markup".
Some microformats examples
--------------------------

### h-card

The h-card microformat represents a person or organization.

The value of each property is defined in HTML using the class property any element can carry

#### Example h-card

```html
<p class="h-card">
  <img class="u-photo" src="https://example.org/photo.png" alt="" />
  <a class="p-name u-url" href="https://example.org">Joe Bloggs</a>
  <a class="u-email" href="mailto:jbloggs@example.com">jbloggs@example.com</a>,
  <span class="p-street-address">17 Austerstræti</span>
  <span class="p-locality">Reykjavík</span>
  <span class="p-country-name">Iceland</span>
</p>
```

| Property | Description |
| --- | --- |
| **`p-name`** | The full/formatted name of the person or organization. |
| **`u-email`** | email address |
| **`u-photo`** | a photo of the person or organization |
| **`u-url`** | home page or other URL representing the person or organization |
| **`u-uid`** | universally unique identifier, preferably canonical URL |
| **`p-street-address`** | street number + name |
| **`p-locality`** | city/town/village |
| **`p-country-name`** | country name |

#### Nested h-card example

```html
<div class="h-card">
  <a class="p-name u-url" href="https://blog.lizardwrangler.com/">
    Mitchell Baker
  </a>
  (<a class="p-org h-card" href="https://mozilla.org/">Mozilla Foundation</a>)
</div>
```

Parsed JSON:

```json
{
  "items": [
    {
      "type": ["h-card"],
      "properties": {
        "name": ["Mitchell Baker"],
        "url": ["https://blog.lizardwrangler.com/"],
        "org": [
          {
            "value": "Mozilla Foundation",
            "type": ["h-card"],
            "properties": {
              "name": ["Mozilla Foundation"],
              "url": ["https://mozilla.org/"]
            }
          }
        ]
      }
    }
  ]
}
```

In this example, a h-card is specified for both a person and the organization they represent. The person's affiliation with the linked organization is specified using the p-org property.

Note: the nested h-card has implied 'name' and 'url' properties, just like any other root-class-name-only h-card on an `<a href>` would.

### h-entry

The h-entry microformat represents episodic or datestamped content on the web. h-entry is often used with content intended to be syndicated, e.g. blog posts and short notes.

Example h-entry as a blog post:

```html
<article class="h-entry">
  <h1 class="p-name">Microformats are amazing</h1>
  <p>
    Published by
    <a class="p-author h-card" href="https://example.com">W. Developer</a> on
    <time class="dt-published" datetime="2013-06-13 12:00:00">
      13<sup>th</sup> June 2013
    </time>
  </p>

  <p class="p-summary">In which I extoll the virtues of using microformats.</p>

  <div class="e-content">
    <p>Blah blah blah</p>
  </div>
</article>
```

#### Properties

| Property | Description |
| --- | --- |
| **`p-name`** | entry name/title |
| **`p-author`** | who wrote the entry, optionally embedded h-card |
| **`dt-published`** | when the entry was published |
| **`p-summary`** | short entry summary |
| **`e-content`** | full content of the entry |

#### Parsed reply h-entry example

```html
<div class="h-entry">
  <p>
    <span class="p-author h-card">
      <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">
        <img
 class="u-photo"
 alt="Greg McVerry"
 src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" />
      </a>
      <a
 class="p-name u-url"
 href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">
        Greg McVerry
      </a>
    </span>
    Replied to
    <a
 class="u-in-reply-to"
 href="https://developer.mozilla.org/en-US/docs/Web/HTML/microformats">
      a post on <strong>developer.mozilla.org</strong>
    </a>
    :
  </p>
  <p class="p-name e-content">
    Hey thanks for making this microformats resource
  </p>
  <p>
    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">
      Greg McVerry
    </a>
    published this
    <a
 class="u-url url"
 href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource">
      <time class="dt-published" datetime="2019-05-31T14:19:09+0000">
        31 May 2019
      </time>
    </a>
  </p>
</div>
```

```json
{
  "items": [
    {
      "type": ["h-entry"],
      "properties": {
        "in-reply-to": [
          "https://developer.mozilla.org/en-US/docs/Web/HTML/microformats"
        ],
        "name": ["Hey thanks for making this microformats resource"],
        "url": [
          "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"
        ],
        "published": ["2019-05-31T14:19:09+0000"],
        "content": [
          {
            "html": "Hey thanks for making this microformats resource",
            "value": "Hey thanks for making this microformats resource",
            "lang": "en"
          }
        ],
        "author": [
          {
            "type": ["h-card"],
            "properties": {
              "name": ["Greg McVerry"],
              "photo": [
                "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"
              ],
              "url": [
                "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106"
              ]
            },
            "lang": "en",
            "value": "Greg McVerry"
          }
        ]
      },
      "lang": "en"
    }
  ]
}
```

### h-feed

The h-feed is a stream or feed of h-entry posts, like complete posts on a home page or archive pages, or summaries or other brief lists of posts.

#### Example h-feed

```html
<div class="h-feed">
  <h1 class="p-name">Microformats Blogs</h1>
  <article class="h-entry">
    <h2 class="p-name">Microformats are amazing</h2>
    <p>
      Published by
      <a class="p-author h-card" href="https://example.com">W. Developer</a> on
      <time class="dt-published" datetime="2013-06-13 12:00:00">
        13<sup>th</sup> June 2013
      </time>
    </p>
    <p class="p-summary">
      In which I extoll the virtues of using microformats.
    </p>
    <div class="e-content"><p>Blah blah blah</p></div>
  </article>
</div>
```

#### Properties

| Property | Description |
| --- | --- |
| **`p-name`** | name of the feed |
| **`p-author`** | author of the feed, optionally embed an h-card |

#### Children

|  |  |
| --- | --- |
| **Nested h-entry** |  |
| objects representing the items of the feed |  |

### h-event

The `h-event` is for events on the web. h-event is often used with both event listings and individual event pages.

```html
<div class="h-event">
  <h1 class="p-name">Microformats Meetup</h1>
  <p>
    From
    <time class="dt-start" datetime="2013-06-30 12:00">
      30<sup>th</sup> June 2013, 12:00
    </time>
    to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> at
    <span class="p-location">Some bar in SF</span>
  </p>
  <p class="p-summary">
    Get together and discuss all things microformats-related.
  </p>
</div>
```

#### Properties

| Property | Description |
| --- | --- |
| **`p-name`** | event name (or title) |
| **`p-summary`** | short summary of the event |
| **`dt-start`** | datetime the event starts |
| **`dt-end`** | datetime the event ends |
| **`p-location`** | where the event takes place, optionally embedded h-card |

#### Parsed h-event Example

```html
<div class="h-event">
  <h2 class="p-name">IndieWeb Summit</h2>
  <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">
    June 29, 2019 at 9:00am (-0700)
  </time>
  <br />through
  <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">
    June 30, 2019 at 6:00pm (-0700)
  </time>
  <br />
  <div class="p-location h-card">
    <div>
      <span class="p-name">Mozilla</span>
    </div>
    <div>
      <span class="p-street-address">1120 NW Couch St</span>,
      <span class="p-locality">Portland</span>,
      <span class="p-region">Oregon</span>,
      <span class="p-country">US</span>
    </div>
    <data class="p-latitude" value="45.52345"></data>
    <data class="p-longitude" value="-122.682677"></data>
  </div>
  <div class="e-content">Come join us</div>
  <div>
    <span class="p-author h-card">
      <a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a>
    </span>
    Published this
    <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on
    <time class="dt published" datetime="2019-05-25T18:00:00-07:00">
      May 5th, 2019
    </time>
  </div>
</div>
```

```json
{
  "items": [
    {
      "type": ["h-event"],
      "properties": {
        "name": ["IndieWeb Summit"],
        "url": ["https://aaronparecki.com/2019/06/29/1/"],
        "author": [
          {
            "type": ["h-card"],
            "properties": {
              "name": ["Aaron Parecki"],
              "url": ["https://aaronparecki.com"]
            },
            "lang": "en",
            "value": "Aaron Parecki"
          }
        ],
        "start": ["2019-06-29T09:00:00-07:00"],
        "end": ["2019-06-30T18:00:00-07:00"],
        "published": ["2019-05-25T18:00:00-07:00"],
        "content": [
          {
            "html": "Come join us",
            "value": "Come join us",
            "lang": "en"
          }
        ],
        "location": [
          {
            "type": ["h-card"],
            "properties": {
              "name": ["Mozilla"],
              "p-street-address": ["1120 NW Couch St"],
              "locality": ["Portland"],
              "region": ["Oregon"],
              "country": ["US"],
              "latitude": ["45.52345"],
              "longitude": ["-122.682677"]
            },
            "lang": "en",
            "value": "Mozilla"
          }
        ]
      },
      "lang": "en"
    }
  ]
}
```

Microformats rel property examples
----------------------------------

There are some microformats that are applied to a page by using a special `rel=` property. These microformats describe a relation between a current document and a linked document. For a full list of these, see the rel property on the microformats wiki.

### rel=author

This attribute states that the linked document represents the author of the current page.

```html
<a rel="author" href="https://jamesg.blog">James Gallagher</a>
```

### rel=license

This attribute states that the linked document contains the license under which the current page is published.

```html
<a rel="license" href="https://mit-license.org/">MIT License</a>
```

### rel=nofollow

This attribute states that the linked document should not be given any weight by search engine ranking algorithms that may derive from the current page. This is useful to prevent link graph algorithms from weighing a page higher than it otherwise would after seeing a link to a document.

```html
<a rel="nofollow" href="https://jamesg.blog">James Gallagher</a>
```

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

Supported in all browsers' support for the class attribute and its DOM API.

See also
--------

* class attribute
* Microformat on Wikipedia
* Microformats official website
* Search engines support on Microformats official website
* Microformats on IndieWebCamp


HTML elements reference - HTML: HyperText Markup Language

HTML elements reference
=======================

This page lists all the HTML elements, which are created using tags.

They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element's page as well as this one.

**Note:** For more information about the basics of HTML elements and attributes, see the section on elements in the Introduction to HTML article.

Main root
---------

| Element | Description |
| --- | --- |
| `<html>` | Represents the root (top-level element) of an HTML document, so it is also referred to as the *root element*. All other elements must be descendants of this element. |

Document metadata
-----------------

Metadata contains information about the page. This includes information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or linked to another file that has the information.

| Element | Description |
| --- | --- |
| `<base>` | Specifies the base URL to use for all relative URLs in a document. There can be only one such element in a document. |
| `<head>` | Contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets. |
| `<link>` | Specifies relationships between the current document and an external resource. This element is most commonly used to link to CSS but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things. |
| `<meta>` | Represents metadata that cannot be represented by other HTML meta-related elements, like `<base>`, `<link>`, `<script>`, `<style>` and `<title>`. |
| `<style>` | Contains style information for a document or part of a document. It contains CSS, which is applied to the contents of the document containing this element. |
| `<title>` | Defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored. |

Sectioning root
---------------

| Element | Description |
| --- | --- |
| `<body>` | represents the content of an HTML document. There can be only one such element in a document. |

Content sectioning
------------------

Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.

| Element | Description |
| --- | --- |
| `<address>` | Indicates that the enclosed HTML provides contact information for a person or people, or for an organization. |
| `<article>` | Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include a forum post, a magazine or newspaper article, a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. |
| `<aside>` | Represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes. |
| `<footer>` | Represents a footer for its nearest ancestor sectioning content or sectioning root element. A `<footer>` typically contains information about the author of the section, copyright data, or links to related documents. |
| `<header>` | Represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements. |
| `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Represent six levels of section headings. `<h1>` is the highest section level and `<h6>` is the lowest. |
| `<hgroup>` | Represents a heading grouped with any secondary content, such as subheadings, an alternative title, or a tagline. |
| `<main>` | Represents the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. |
| `<nav>` | Represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes. |
| `<section>` | Represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions. |
| `<search>` | Represents a part that contains a set of form controls or other content related to performing a search or filtering operation. |

Text content
------------

Use HTML text content elements to organize blocks or sections of content placed between the opening `<body>` and closing `</body>` tags. Important for accessibility and SEO, these elements identify the purpose or structure of that content.

| Element | Description |
| --- | --- |
| `<blockquote>` | Indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the `cite` attribute, while a text representation of the source can be given using the `<cite>` element. |
| `<dd>` | Provides the description, definition, or value for the preceding term (`<dt>`) in a description list (`<dl>`). |
| `<div>` | The generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g., styling is directly applied to it, or some kind of layout model like flexbox is applied to its parent element). |
| `<dl>` | Represents a description list. The element encloses a list of groups of terms (specified using the `<dt>` element) and descriptions (provided by `<dd>` elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). |
| `<dt>` | Specifies a term in a description or definition list, and as such must be used inside a `<dl>` element. It is usually followed by a `<dd>` element; however, multiple `<dt>` elements in a row indicate several terms that are all defined by the immediate next `<dd>` element. |
| `<figcaption>` | Represents a caption or legend describing the rest of the contents of its parent `<figure>` element. |
| `<figure>` | Represents self-contained content, potentially with an optional caption, which is specified using the `<figcaption>` element. The figure, its caption, and its contents are referenced as a single unit. |
| `<hr>` | Represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section. |
| `<li>` | Represents an item in a list. It must be contained in a parent element: an ordered list (`<ol>`), an unordered list (`<ul>`), or a menu (`<menu>`). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter. |
| `<menu>` | A semantic alternative to `<ul>`, but treated by browsers (and exposed through the accessibility tree) as no different than `<ul>`. It represents an unordered list of items (which are represented by `<li>` elements). |
| `<ol>` | Represents an ordered list of items — typically rendered as a numbered list. |
| `<p>` | Represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields. |
| `<pre>` | Represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written. |
| `<ul>` | Represents an unordered list of items, typically rendered as a bulleted list. |

Inline text semantics
---------------------

Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.

| Element | Description |
| --- | --- |
| `<a>` | Together with its `href` attribute, creates a hyperlink to web pages, files, email addresses, locations within the current page, or anything else a URL can address. |
| `<abbr>` | Represents an abbreviation or acronym. |
| `<b>` | Used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use `<b>` for styling text or granting importance. If you wish to create boldface text, you should use the CSS `font-weight` property. If you wish to indicate an element is of special importance, you should use the strong element. |
| `<bdi>` | Tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. It's particularly useful when a website dynamically inserts some text and doesn't know the directionality of the text being inserted. |
| `<bdo>` | Overrides the current directionality of text, so that the text within is rendered in a different direction. |
| `<br>` | Produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant. |
| `<cite>` | Used to mark up the title of a cited creative work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata. |
| `<code>` | Displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font. |
| `<data>` | Links a given piece of content with a machine-readable translation. If the content is time- or date-related, the`<time>` element must be used. |
| `<dfn>` | Used to indicate the term being defined within the context of a definition phrase or sentence. The ancestor `<p>` element, the `<dt>`/`<dd>` pairing, or the nearest section ancestor of the `<dfn>` element, is considered to be the definition of the term. |
| `<em>` | Marks text that has stress emphasis. The `<em>` element can be nested, with each nesting level indicating a greater degree of emphasis. |
| `<i>` | Represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, and taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the `<i>` naming of this element. |
| `<kbd>` | Represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a `<kbd>` element using its default monospace font, although this is not mandated by the HTML standard. |
| `<mark>` | Represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context. |
| `<q>` | Indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the `<blockquote>` element. |
| `<rp>` | Used to provide fall-back parentheses for browsers that do not support the display of ruby annotations using the `<ruby>` element. One `<rp>` element should enclose each of the opening and closing parentheses that wrap the `<rt>` element that contains the annotation's text. |
| `<rt>` | Specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The `<rt>` element must always be contained within a `<ruby>` element. |
| `<ruby>` | Represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common. |
| `<s>` | Renders text with a strikethrough, or a line through it. Use the `<s>` element to represent things that are no longer relevant or no longer accurate. However, `<s>` is not appropriate when indicating document edits; for that, use the del and ins elements, as appropriate. |
| `<samp>` | Used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such as Courier or Lucida Console). |
| `<small>` | Represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font size smaller, such as from `small` to `x-small`. |
| `<span>` | A generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the `class` or `id` attributes), or because they share attribute values, such as `lang`. It should be used only when no other semantic element is appropriate. `<span>` is very much like a div element, but div is a block-level element whereas a `<span>` is an inline-level element. |
| `<strong>` | Indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type. |
| `<sub>` | Specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text. |
| `<sup>` | Specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text. |
| `<time>` | Represents a specific period in time. It may include the `datetime` attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders. |
| `<u>` | Represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline but may be altered using CSS. |
| `<var>` | Represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent. |
| `<wbr>` | Represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location. |

Image and multimedia
--------------------

HTML supports various multimedia resources such as images, audio, and video.

| Element | Description |
| --- | --- |
| `<area>` | Defines an area inside an image map that has predefined clickable areas. An *image map* allows geometric areas on an image to be associated with hyperlink. |
| `<audio>` | Used to embed sound content in documents. It may contain one or more audio sources, represented using the `src` attribute or the source element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a `MediaStream`. |
| `<img>` | Embeds an image into the document. |
| `<map>` | Used with `<area>` elements to define an image map (a clickable link area). |
| `<track>` | Used as a child of the media elements, audio and video. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (`.vtt` files)—Web Video Text Tracks. |
| `<video>` | Embeds a media player which supports video playback into the document. You can also use `<video>` for audio content, but the audio element may provide a more appropriate user experience. |

Embedded content
----------------

In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.

| Element | Description |
| --- | --- |
| `<embed>` | Embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in. |
| `<iframe>` | Represents a nested browsing context, embedding another HTML page into the current one. |
| `<object>` | Represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin. |
| `<picture>` | Contains zero or more `<source>` elements and one `<img>` element to offer alternative versions of an image for different display/device scenarios. |
| `<portal>` | Enables the embedding of another HTML page into the current one to enable smoother navigation into new pages. |
| `<source>` | Specifies multiple media resources for the picture, the audio element, or the video element. It is a void element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats. |

SVG and MathML
--------------

You can embed SVG and MathML content directly into HTML documents, using the `<svg>` and `<math>` elements.

| Element | Description |
| --- | --- |
| `<svg>` | Container defining a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document. |
| `<math>` | The top-level element in MathML. Every valid MathML instance must be wrapped in it. In addition, you must not nest a second `<math>` element in another, but you can have an arbitrary number of other child elements in it. |

Scripting
---------

To create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.

| Element | Description |
| --- | --- |
| `<canvas>` | Container element to use with either the canvas scripting API or the WebGL API to draw graphics and animations. |
| `<noscript>` | Defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser. |
| `<script>` | Used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The `<script>` element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON. |

Demarcating edits
-----------------

These elements let you provide indications that specific parts of the text have been altered.

| Element | Description |
| --- | --- |
| `<del>` | 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. |
| `<ins>` | Represents a range of text that has been added to a document. You can use the `<del>` element to similarly represent a range of text that has been deleted from the document. |

Table content
-------------

The elements here are used to create and handle tabular data.

| Element | Description |
| --- | --- |
| `<caption>` | Specifies the caption (or title) of a table. |
| `<col>` | Defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a `<colgroup>` element. |
| `<colgroup>` | Defines a group of columns within a table. |
| `<table>` | Represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. |
| `<tbody>` | Encapsulates a set of table rows (`<tr>` elements), indicating that they comprise the body of the table (`<table>`). |
| `<td>` | Defines a cell of a table that contains data. It participates in the *table model*. |
| `<tfoot>` | Defines a set of rows summarizing the columns of the table. |
| `<th>` | Defines a cell as a header of a group of table cells. The exact nature of this group is defined by the `scope` and `headers` attributes. |
| `<thead>` | Defines a set of rows defining the head of the columns of the table. |
| `<tr>` | Defines a row of cells in a table. The row's cells can then be established using a mix of `<td>` (data cell) and `<th>` (header cell) elements. |

Forms
-----

HTML provides several elements that can be used together to create forms that the user can fill out and submit to the website or application. Further information about this available in the HTML forms guide.

| Element | Description |
| --- | --- |
| `<button>` | An interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it performs an action, such as submitting a form or opening a dialog. |
| `<datalist>` | Contains a set of `<option>` elements that represent the permissible or recommended options available to choose from within other controls. |
| `<fieldset>` | Used to group several controls as well as labels (`<label>`) within a web form. |
| `<form>` | Represents a document section containing interactive controls for submitting information. |
| `<input>` | Used to create interactive controls for web-based forms to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The `<input>` element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes. |
| `<label>` | Represents a caption for an item in a user interface. |
| `<legend>` | Represents a caption for the content of its parent `<fieldset>`. |
| `<meter>` | Represents either a scalar value within a known range or a fractional value. |
| `<optgroup>` | Creates a grouping of options within a `<select>` element. |
| `<option>` | Used to define an item contained in a select, an `<optgroup>`, or a `<datalist>` element. As such, `<option>` can represent menu items in popups and other lists of items in an HTML document. |
| `<output>` | Container element into which a site or app can inject the results of a calculation or the outcome of a user action. |
| `<progress>` | Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. |
| `<select>` | Represents a control that provides a menu of options. |
| `<textarea>` | Represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example, a comment on a review or feedback form. |

Interactive elements
--------------------

HTML offers a selection of elements that help to create interactive user interface objects.

| Element | Description |
| --- | --- |
| `<details>` | Creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the `<summary>` element. |
| `<dialog>` | Represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow. |
| `<summary>` | Specifies a summary, caption, or legend for a details element's disclosure box. Clicking the `<summary>` element toggles the state of the parent `<details>` element open and closed. |

Web Components
--------------

Web Components is an HTML-related technology that makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.

| Element | Description |
| --- | --- |
| `<slot>` | Part of the Web Components technology suite, this element is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together. |
| `<template>` | A mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript. |

Obsolete and deprecated elements
--------------------------------

**Warning:** These are old HTML elements that are deprecated and should not be used. **You should never use them in new projects, and you should replace them in old projects as soon as you can.** They are listed here for completeness only.

| Element | Description |
| --- | --- |
| `<acronym>` | Allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word. |
| `<big>` | Renders the enclosed text at a font size one level larger than the surrounding text (`medium` becomes `large`, for example). The size is capped at the browser's maximum permitted font size. |
| `<center>` | Displays its block-level or inline contents centered horizontally within its containing element. |
| `<content>` | An obsolete part of the Web Components suite of technologies—was used inside of Shadow DOM as an insertion point, and wasn't meant to be used in ordinary HTML. It has now been replaced by the `<slot>` element, which creates a point in the DOM at which a shadow DOM can be inserted. Consider using `<slot>` instead. |
| `<dir>` | Container for a directory of files and/or folders, potentially with styles and icons applied by the user agent. Do not use this obsolete element; instead, you should use the `<ul>` element for lists, including lists of files. |
| `<font>` | Defines the font size, color and face for its content. |
| `<frame>` | Defines a particular area in which another HTML document can be displayed. A frame should be used within a `<frameset>`. |
| `<frameset>` | Used to contain `<frame>` elements. |
| `<image>` | An ancient and poorly supported precursor to the `<img>` element. It should not be used. |
| `<marquee>` | Used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes. |
| `<menuitem>` | Represents a command that a user is able to invoke through a popup menu. This includes context menus, as well as menus that might be attached to a menu button. |
| `<nobr>` | Prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text. |
| `<noembed>` | An obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the embed element or do not support the type of embedded content an author wishes to use. This element was deprecated in HTML 4.01 and above in favor of placing fallback content between the opening and closing tags of an `<object>` element. |
| `<noframes>` | Provides content to be presented in browsers that don't support (or have disabled support for) the `<frame>` element. Although most commonly-used browsers support frames, there are exceptions, including certain special-use browsers including some mobile browsers, as well as text-mode browsers. |
| `<param>` | Defines parameters for an `<object>` element. |
| `<plaintext>` | Renders everything following the start tag as raw text, ignoring any following HTML. There is no closing tag, since everything after it is considered raw text. |
| `<rb>` | Used to delimit the base text component of a ruby annotation, i.e. the text that is being annotated. One `<rb>` element should wrap each separate atomic segment of the base text. |
| `<rtc>` | Embraces semantic annotations of characters presented in a ruby of `<rb>` elements used inside of `<ruby>` element. `<rb>` elements can have both pronunciation (`<rt>`) and semantic (`<rtc>`) annotations. |
| `<shadow>` | An obsolete part of the Web Components technology suite that was intended to be used as a shadow DOM insertion point. You might have used it if you have created multiple shadow roots under a shadow host. Consider using `<slot>` instead. |
| `<strike>` | Places a strikethrough (horizontal line) over text. |
| `<tt>` | Creates inline text which is presented using the user agent default monospace font face. This element was created for the purpose of rendering text as it would be displayed on a fixed-width display such as a teletype, text-only screen, or line printer. |
| `<xmp>` | Renders text between the start and end tags without interpreting the HTML in between and using a monospaced font. The HTML2 specification recommended that it should be rendered wide enough to allow 80 characters per line. |

See also
--------

* `Element` interface


Allowing cross-origin use of images and canvas - HTML: HyperText Markup Language

Allowing cross-origin use of images and canvas
==============================================

HTML provides a `crossorigin` attribute for images that, in combination with an appropriate CORS header, allows images defined by the `<img>` element that are loaded from foreign origins to be used in a `<canvas>` as if they had been loaded from the current origin.

See CORS settings attributes for details on how the `crossorigin` attribute is used.

Security and tainted canvases
-----------------------------

Because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevitable that security problems may arise.

As soon as you draw into a canvas any data that was loaded from another origin without CORS approval, the canvas becomes **tainted**. A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.

If the source of the foreign content is an HTML `<img>` or SVG `<svg>` element, attempting to retrieve the contents of the canvas isn't allowed.

If the foreign content comes from an image obtained from either as `HTMLCanvasElement` or `ImageBitMap`, and the image source doesn't meet the same origin rules, attempts to read the canvas's contents are blocked.

Calling any of the following on a tainted canvas will result in an error:

* Calling `getImageData()` on the canvas's context
* Calling `toBlob()`, `toDataURL()` or `captureStream()` on the `<canvas>` element itself

Attempting any of these when the canvas is tainted will cause a `SecurityError` to be thrown. This protects users from having private data exposed by using images to pull information from remote websites without permission.

Storing an image from a foreign origin
--------------------------------------

In this example, we wish to permit images from a foreign origin to be retrieved and saved to local storage. Implementing this requires configuring the server as well as writing code for the website itself.

### Web server configuration

The first thing we need is a server that's configured to host images with the `Access-Control-Allow-Origin` header configured to permit cross-origin access to image files.

Let's assume we're serving our site using Apache. Consider the HTML5 Boilerplate Apache server configuration file for CORS images, shown below:

```xml
<IfModule mod\_setenvif.c>
  <IfModule mod\_headers.c>
    <FilesMatch "\.(avifs?|bmp|cur|gif|ico|jpe?g|jxl|a?png|svgz?|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
```

In short, this configures the server to allow graphic files (those with the extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") to be accessed cross-origin from anywhere on the internet.

### Implementing the save feature

Now that the server has been configured to allow retrieval of the images cross-origin, we can write the code that allows the user to save them to local storage, just as if they were being served from the same domain the code is running on.

The key is to use the `crossorigin` attribute by setting `crossOrigin` on the `HTMLImageElement` into which the image will be loaded. This tells the browser to request cross-origin access when downloading the image data.

#### Starting the download

The code that starts the download (say, when the user clicks a "Download" button), looks like this:

```js
function startDownload() {
  let imageURL =
    "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn\_logo-only\_color.svg?1535749917189";
  let imageDescription = "The Mozilla logo";

  downloadedImg = new Image();
  downloadedImg.crossOrigin = "anonymous";
  downloadedImg.addEventListener("load", imageReceived, false);
  downloadedImg.alt = imageDescription;
  downloadedImg.src = imageURL;
}
```

We're using a hard-coded URL (`imageURL`) and associated descriptive text (`imageDescription`) here, but that could easily come from anywhere. To begin downloading the image, we create a new `HTMLImageElement` object by using the `Image()` constructor. The image is then configured to allow cross-origin downloading by setting its `crossOrigin` attribute to `"anonymous"` (that is, allow non-authenticated downloading of the image cross-origin). An event listener is added for the `load` event being fired on the image element, which means the image data has been received. Alternative text is added to the image; while `<canvas>` does not support the `alt` attribute, the value can be used to set an `aria-label` or the canvas's inner content.

Finally, the image's `src` attribute is set to the URL of the image to download; this triggers the download to begin.

#### Receiving and saving the image

The code that handles the newly-downloaded image is found in the `imageReceived()` method:

```js
function imageReceived() {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");

  canvas.width = downloadedImg.width;
  canvas.height = downloadedImg.height;
  canvas.innerText = downloadedImg.alt;

  context.drawImage(downloadedImg, 0, 0);
  imageBox.appendChild(canvas);

  try {
    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
  } catch (err) {
    console.error(`Error: ${err}`);
  }
}
```

`imageReceived()` is called to handle the `"load"` event on the `HTMLImageElement` that receives the downloaded image. This event is triggered once the downloaded data is all available. It begins by creating a new `<canvas>` element that we'll use to convert the image into a data URL, and by getting access to the canvas's 2D drawing context (`CanvasRenderingContext2D`) in the variable `context`.

The canvas's size is adjusted to match the received image, the inner text is set to the image description, then the image is drawn into the canvas using `drawImage()`. The canvas is then inserted into the document so the image is visible.

Now it's time to actually save the image locally. To do this, we use the Web Storage API's local storage mechanism, which is accessed through the `localStorage` global. The canvas method `toDataURL()` is used to convert the image into a data:// URL representing a PNG image, which is then saved into local storage using `setItem()`.

See also
--------

* Using Cross-domain images in WebGL and Chrome 13
* HTML Specification - the `crossorigin` attribute
* Web Storage API


Microdata - HTML: HyperText Markup Language

Microdata
=========

Microdata is part of the WHATWG HTML Standard and is used to nest metadata within existing content on web pages. Search engines and web crawlers can extract and process microdata from a web page and use it to provide a richer browsing experience for users. Search engines benefit greatly from direct access to this structured data because it allows search engines to understand the information on web pages and provide more relevant results to users. Microdata uses a supporting vocabulary to describe an item and name-value pairs to assign values to its properties. Microdata is an attempt to provide a simpler way of annotating HTML elements with machine-readable tags than the similar approaches of using RDFa and classic microformats.

At a high level, microdata consists of a group of name-value pairs. The groups are called items, and each name-value pair is a property. Items and properties are represented by regular elements.

* To create an item, the `itemscope` attribute is used.
* To add a property to an item, the `itemprop` attribute is used on one of the item's descendants.
Vocabularies
------------

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, Schema.org Music Event indicates a concert performance, with `startDate` and `location` properties to specify the concert's key details. In this case, Schema.org Music Event would be the URL used by `itemtype` and `startDate` and location would be `itemprop`'s that Schema.org Music Event defines.

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

Microdata vocabularies provide the semantics or meaning of an *`Item`*. Web developers can design a custom vocabulary or use vocabularies available on the web, such as the widely used schema.org vocabulary. A collection of commonly used markup vocabularies are provided by Schema.org.

Commonly used vocabularies:

* Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries
* Embedded non-text objects: AudioObject, ImageObject, VideoObject
* `Event`
* Health and medical types: Notes on the health and medical types under MedicalEntity
* `Organization`
* `Person`
* `Place`, LocalBusiness, Restaurant
* `Product`, Offer, AggregateOffer
* `Review`, AggregateRating
* `Action`
* `Thing`
* `Intangible`

Major search engine operators like Google, Microsoft, and Yahoo! rely on the schema.org vocabulary to improve search results. For some purposes, an ad hoc vocabulary is adequate. For others, a vocabulary will need to be designed. Where possible, authors are encouraged to re-use existing vocabularies, as this makes content re-use easier.

Localization
------------

In some cases, search engines covering specific regions may provide locally-specific extensions of microdata. For example, Yandex, a major search engine in Russia, supports microformats such as `hCard` (company contact information), `hRecipe` (food recipe), `hReview` (market reviews) and `hProduct` (product data) and provides its own format for the definition of the terms and encyclopedic articles. This extension was made to solve transliteration problems between the Cyrillic and Latin alphabets. Due to the implementation of additional marking parameters of Schema's vocabulary, the indexation of information in Russian-language web-pages became considerably more successful.

Global attributes
-----------------

`itemid` – The unique, global identifier of an item.

`itemprop` – Used to add properties to an item. Every HTML element may have an `itemprop` attribute specified, where an `itemprop` consists of a name and value pair.

`itemref` – Properties that are not descendants of an element with the `itemscope` attribute can be associated with the item using an **itemref**. `itemref` provides a list of element ids (not `itemid`s) with additional properties elsewhere in the document.

`itemscope` – The `itemscope` attribute (usually) works along with `itemtype` to specify that the HTML contained in a block is about a particular item. The `itemscope` attribute creates the *`Item`* and defines the scope of the itemtype associated with it. The `itemtype` attribute is a valid URL of a vocabulary (such as schema.org) that describes the item and its properties context.

`itemtype` – Specifies the URL of the vocabulary that will be used to define `itemprop`'s (item properties) in the data structure. The `itemscope` attribute is used to set the scope of where in the data structure the vocabulary set by `itemtype` will be active.

Example
-------

### HTML

```html
<div itemscope itemtype="https://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> - REQUIRES
  <span itemprop="operatingSystem">ANDROID</span><br />
  <link
 itemprop="applicationCategory"
 href="https://schema.org/SoftwareApplication" />

  <div
 itemprop="aggregateRating"
 itemscope
 itemtype="https://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>
```

### Structured data

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype | SoftwareApplication (https://schema.org/SoftwareApplication) |
| itemprop | name | Angry Birds |
| itemprop | operatingSystem | ANDROID |
| itemprop | applicationCategory | SoftwareApplication (https://schema.org/SoftwareApplication) |
| itemscope | itemprop[itemtype] | aggregateRating [AggregateRating] |
| itemprop | ratingValue | 4.6 |
| itemprop | ratingCount | 8864 |
| itemscope | itemprop[itemtype] | offers [Offer] |
| itemprop | price | 1.00 |
| itemprop | priceCurrency | USD |

### Result

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

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

Supported in Firefox 16. Removed in Firefox 49.

See also
--------

* Global Attributes