<details>: The Details disclosure element - HTML: HyperText Markup Language

<details>: The Details disclosure element
=========================================

The **`<details>`** HTML element 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.

A disclosure widget is typically presented onscreen using a small triangle that rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the `<summary>` element are used as the label for the disclosure widget. The contents of the `<details>` provide the accessible description for the `<summary>`.

Try it
------

A `<details>` widget can be in one of two states. The default *closed* state displays only the triangle and the label inside `<summary>` (or a user agent-defined default string if no `<summary>`).

When the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents. The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisty".

You can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its `open` attribute. Unfortunately, at this time, there's no built-in way to animate the transition between open and closed.

By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.

Fully standards-compliant implementations automatically apply the CSS ``display`: list-item` to the `<summary>` element. You can use this to customize its appearance further. See Customizing the disclosure widget for further details.

Attributes
----------

This element includes the global attributes.

`open`

This Boolean attribute indicates whether the details — that is, the contents of the `<details>` element — are currently visible. The details are shown when this attribute exists, or hidden when this attribute is absent. By default this attribute is absent which means the details are not visible.

**Note:** You have to remove this attribute entirely to make the details hidden. `open="false"` makes the details visible because this attribute is Boolean.

Events
------

In addition to the usual events supported by HTML elements, the `<details>` element supports the `toggle` event, which is dispatched to the `<details>` element whenever its state changes between open and closed. It is sent *after* the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.

You can use an event listener for the `toggle` event to detect when the widget changes state:

```js
details.addEventListener("toggle", (event) => {
  if (details.open) {
    /\* the element was toggled open \*/
  } else {
    /\* the element was toggled closed \*/
  }
});
```

Examples
--------

### A simple disclosure example

This example shows a simple `<details>` element with a `<summary>`.

```html
<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>
```

#### Result

### Creating an open disclosure box

To start the `<details>` box in its open state, add the Boolean `open` attribute:

```html
<details open>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>
```

#### Result

### Customizing the appearance

Now let's apply some CSS to customize the appearance of the disclosure box.

#### CSS

```css
details {
  font:
    16px "Open Sans",
    Calibri,
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}
```

This CSS creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.

The selector `details[open]` can be used to style the element which is open.

#### HTML

```html
<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>
```

#### Result

### Customizing the disclosure widget

The disclosure triangle itself can be customized, although this is not as broadly supported. There are variations in how browsers support this customization due to experimental implementations as the element was standardized, so we'll have to use multiple approaches for a while.

The `<summary>` element supports the `list-style` shorthand property and its longhand properties, such as `list-style-type`, to change the disclosure triangle to whatever you choose (usually with `list-style-image`). For example, we can remove the disclosure widget icon by setting `list-style: none`.

#### CSS

```css
details {
  font:
    16px "Open Sans",
    Calibri,
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: none;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}
```

This CSS creates a look similar to a tabbed interface, where activating the tab expands and opens it to reveal its contents.

#### HTML

```html
<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>
```

#### Result

Technical summary
-----------------

|  |  |
| --- | --- |
| Content categories | Flow content, sectioning root, interactive content, palpable content. |
| Permitted content |
 One `<summary>` element followed by
 flow content.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 flow content.
  |
| Implicit ARIA role | `group` |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLDetailsElement` |

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

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

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

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

See also
--------

* `<summary>`


<th>: The Table Header element - HTML: HyperText Markup Language

<th>: The Table Header element
==============================

The **`<th>`** HTML element defines a cell as the header of a group of table cells. The exact nature of this group is defined by the `scope` and `headers` attributes.

Try it
------

Attributes
----------

This element includes the global attributes.

`abbr`

This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself.

`colspan`

This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is `1`. Values higher than 1000 will be considered as incorrect and will be set to the default value (1).

`headers`

This attribute contains a list of space-separated strings, each corresponding to the **id** attribute of the `<th>` elements that apply to this element.

`rowspan`

This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is `1`; if its value is set to `0`, it extends until the end of the table section (`<thead>`, `<tbody>`, `<tfoot>`, even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534.

`scope`

This enumerated attribute defines the cells that the header (defined in the `<th>`) element relates to. It may have the following values:

* `row`: The header relates to all cells of the row it belongs to.
* `col`: The header relates to all cells of the column it belongs to.
* `rowgroup`: The header belongs to a rowgroup and relates to all of its cells.
* `colgroup`: The header belongs to a colgroup and relates to all of its cells.

If the `scope` attribute is not specified, or its value is not `row`, `col`, or `rowgroup`, or `colgroup`, then browsers automatically select the set of cells to which the header cell applies.

### Deprecated attributes

`align`
Deprecated

This enumerated attribute specifies how the cell content's horizontal alignment will be handled. Possible values are:

* `left`: The content is aligned to the left of the cell.
* `center`: The content is centered in the cell.
* `right`: The content is aligned to the right of the cell.
* `justify` (with text only): The content is stretched out inside the cell so that it covers its entire width.
* `char` (with text only): The content is aligned to a character inside the `<th>` element with minimal offset. This character is defined by the `char` and `charoff` attributes.

The default value when this attribute is not specified is `left`.

**Note:** Do not use this attribute as it is obsolete in the latest standard.

* To achieve the same effect as the `left`, `center`, `right` or `justify` values, apply the CSS `text-align` property to the element.
* To achieve the same effect as the `char` value, give the `text-align` property the same value you would use for the `char`.

`axis`
Deprecated

This attribute contains a list of space-separated strings. Each string is the `id` of a group of cells that this header applies to.

**Note:** Do not use this attribute as it is obsolete in the latest standard: use the `scope` attribute instead.

`bgcolor`
Deprecated

This attribute defines the background color of each cell in a column. It consists of a 6-digit hexadecimal code as defined in sRGB and is prefixed by '#'.

`char`
Deprecated

The content in the cell element is aligned to a character. Typical values include a period (.) to align numbers or monetary values. If `align` is not set to `char`, this attribute is ignored.

**Note:** Do not use this attribute as it is obsolete in the latest standard. To achieve the same effect, you can specify the character as the first value of the `text-align` property.

`charoff`
Deprecated

This attribute is used to shift column data to the right of the character specified by the **char** attribute. Its value specifies the length of this shift.

**Note:** Do not use this attribute as it is obsolete in the latest standard.

`height`
Deprecated

This attribute is used to define a recommended cell height.

**Note:** Do not use this attribute as it is obsolete in the latest standard: use the CSS `height` property instead.

`valign`
Deprecated

This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are:

* `baseline`: Positions the text near the bottom of the cell and aligns it with the baseline of the characters instead of the bottom. If characters don't descend below the baseline, the baseline value achieves the same effect as `bottom`.
* `bottom`: Positions the text near the bottom of the cell.
* `middle`: Centers the text in the cell.
* and `top`: Positions the text near the top of the cell.

**Note:** Do not use this attribute as it is obsolete in the latest standard: use the CSS `vertical-align` property instead.

`width`
Deprecated

This attribute is used to define a recommended cell width. Additional space can be added with the `cellspacing` and `cellpadding` properties and the width of the `<col>` element can also create extra width. But, if a column's width is too narrow to show a particular cell properly, it will be widened when displayed.

**Note:** Do not use this attribute as it is obsolete in the latest standard: use the CSS `width` property instead.

Examples
--------

See `<table>` for examples on `<th>`.

Technical summary
-----------------

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | Flow content, but with no header, footer, sectioning content, or heading content
 descendants.
  |
| Tag omission |
 The start tag is mandatory.The end tag may be omitted, if it is
 immediately followed by a `<th>` or
 `<td>` element or if there are no more data in its
 parent element.
  |
| Permitted parents | A `<tr>` element. |
| Implicit ARIA role | `columnheader` or `rowheader` |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLTableCellElement` |

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

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

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

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

See also
--------

* Other table-related HTML Elements: `<caption>`, `<col>`, `<colgroup>`, `<table>`, `<tbody>`, `<td>`, `<tfoot>`, `<thead>`, `<tr>`.


<select>: The HTML Select element - HTML: HyperText Markup Language

<select>: The HTML Select element
=================================

The **`<select>`** HTML element represents a control that provides a menu of options.

Try it
------

The above example shows typical `<select>` usage. It is given an `id` attribute to enable it to be associated with a `<label>` for accessibility purposes, as well as a `name` attribute to represent the name of the associated data point submitted to the server. Each menu option is defined by an `<option>` element nested inside the `<select>`.

Each `<option>` element should have a `value` attribute containing the data value to submit to the server when that option is selected. If no `value` attribute is included, the value defaults to the text contained inside the element. You can include a `selected` attribute on an `<option>` element to make it selected by default when the page first loads.

The `<select>` element has some unique attributes you can use to control it, such as `multiple` to specify whether multiple options can be selected, and `size` to specify how many options should be shown at once. It also accepts most of the general form input attributes such as `required`, `disabled`, `autofocus`, etc.

You can further nest `<option>` elements inside `<optgroup>` elements to create separate groups of options inside the dropdown. You can also include `<hr>` elements to create separators that add visual breaks between options.

For further examples, see The native form widgets: Drop-down content.

Attributes
----------

This element includes the global attributes.

`autocomplete`

A string providing a hint for a user agent's autocomplete feature. See The HTML autocomplete attribute for a complete list of values and details on how to use autocomplete.

`autofocus`

This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form element in a document can have the `autofocus` attribute.

`disabled`

This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example `<fieldset>`; if there is no containing element with the `disabled` attribute set, then the control is enabled.

`form`

The `<form>` element to associate the `<select>` with (its *form owner*). The value of this attribute must be the `id` of a `<form>` in the same document. (If this attribute is not set, the `<select>` is associated with its ancestor `<form>` element, if any.)

This attribute lets you associate `<select>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.

`multiple`

This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time. When `multiple` is specified, most browsers will show a scrolling list box instead of a single line dropdown.

`name`

This attribute is used to specify the name of the control.

`required`

A Boolean attribute indicating that an option with a non-empty string value must be selected.

`size`

If the control is presented as a scrolling list box (e.g. when `multiple` is specified), this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is `0`.

**Note:** According to the HTML specification, the default value for size should be `1`; however, in practice, this has been found to break some websites, and no other browser currently does that, so Mozilla has opted to continue to return `0` for the time being with Firefox.

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

### Selecting multiple options

On a desktop computer, there are a number of ways to select multiple options in a `<select>` element with a `multiple` attribute:

Mouse users can hold the `Ctrl`, `Command`, or `Shift` keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them.

**Warning:** The mechanism for selecting multiple non-contiguous items via the keyboard described below currently only seems to work in Firefox.

On macOS, the `Ctrl` + `Up` and `Ctrl` + `Down` shortcuts conflict with the OS default shortcuts for *Mission Control* and *Application windows*, so you'll have to turn these off before it will work.

Keyboard users can select multiple contiguous items by:

* Focusing on the `<select>` element (e.g. using
 `Tab`
 ).
* Selecting an item at the top or bottom of the range they want to select using the
 `Up`
 and
 `Down`
 cursor keys to go up and down the options.
* Holding down the
 `Shift`
 key and then using the
 `Up`
 and
 `Down`
 cursor keys to increase or decrease the range of items selected.

Keyboard users can select multiple non-contiguous items by:

* Focusing on the `<select>` element (e.g. using
 `Tab`
 ).
* Holding down the
 `Ctrl`
 key then using the
 `Up`
 and
 `Down`
 cursor keys to change the "focused" select option, i.e. the one that will be selected if you choose to do so. The "focused" select option is highlighted with a dotted outline, in the same way as a keyboard-focused link.
* Pressing
 `Space`
 to select/deselect "focused" select options.
Styling with CSS
----------------

The `<select>` element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element — for example, manipulating the box model, the displayed font, etc., and you can use the `appearance` property to remove the default system `appearance`.

However, these properties don't produce a consistent result across browsers, and it is hard to do things like line different types of form element up with one another in a column. The `<select>` element's internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics.

For more useful information on styling `<select>`, see:

* Styling HTML forms
* Advanced styling for HTML forms

Also see the "Customizing select styles" example below for an example of you could attempt a simple `<select>` styling.

Examples
--------

### Basic select

The following example creates a very simple dropdown menu, the second option of which is selected by default.

```html
<!-- The second value will be selected initially -->
<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>
```

#### Result

### Select with grouping options

The following example creates a dropdown menu with grouping using `<optgroup>` and `<hr>` to make it easier for the user to understand the content in the dropdown.

```html
<label for="hr-select">Your favorite food</label> <br />

<select name="foods" id="hr-select">
  <option value="">Choose a food</option>
  <hr />
  <optgroup label="Fruit">
    <option value="apple">Apples</option>
    <option value="banana">Bananas</option>
    <option value="cherry">Cherries</option>
    <option value="damson">Damsons</option>
  </optgroup>
  <hr />
  <optgroup label="Vegetables">
    <option value="artichoke">Artichokes</option>
    <option value="broccoli">Broccoli</option>
    <option value="cabbage">Cabbages</option>
  </optgroup>
  <hr />
  <optgroup label="Meat">
    <option value="beef">Beef</option>
    <option value="chicken">Chicken</option>
    <option value="pork">Pork</option>
  </optgroup>
  <hr />
  <optgroup label="Fish">
    <option value="cod">Cod</option>
    <option value="haddock">Haddock</option>
    <option value="salmon">Salmon</option>
    <option value="turbot">Turbot</option>
  </optgroup>
</select>
```

#### Result

### Advanced select with multiple features

The follow example is more complex, showing off more features you can use on a `<select>` element:

```html
<label>
  Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>
```

#### Result

You'll see that:

* Multiple options are selectable because we've included the `multiple` attribute.
* The `size` attribute causes only 4 lines to display at a time; you can scroll to view all the options.
* We've included `<optgroup>` elements to divide the options up into different groups. This is a purely visual grouping, its visualization generally consists of the group name being bolded, and the options being indented.
* The "Hamster" option includes a `disabled` attribute and therefore can't be selected at all.
### Customizing select styles

This example shows how you could use some CSS and JavaScript to provide extensive custom styling for a `<select>` box.

This example basically:

* Clones the `<select>`'s context (the `<option>` elements) in a parent wrapper and reimplements the standard expected behavior using additional HTML elements and JavaScript. This includes basic tab behavior to provide keyboard accessibility.
* Maps some standards native `attributes` to `data-attributes` of the new elements in order to manage state and CSS.

**Note:** Not all native features are supported, it's a Proof of Concept. IT starts from standard HTML but the same results can be achieved starting from JSON data, custom HTML, or other solutions.

#### HTML

```html
<form>
  <fieldset>
    <legend>Standard controls</legend>
    <select name="1A" id="select" autocomplete="off" required>
      <option>Carrots</option>
      <option>Peas</option>
      <option>Beans</option>
      <option>Pneumonoultramicroscopicsilicovolcanoconiosis</option>
    </select>
  </fieldset>
  <fieldset id="custom">
    <legend>Custom controls</legend>
    <select name="2A" id="select" autocomplete="off" required>
      <option>Carrots</option>
      <option>Peas</option>
      <option>Beans</option>
      <option>Pneumonoultramicroscopicsilicovolcanoconiosis</option>
    </select>
  </fieldset>
</form>
```

#### CSS

```css
body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
 body
 form
 fieldset#custom
 div.select
 div.optgroup
 div.option[data-disabled] {
  color: gray;
}

html
 body
 form
 fieldset#custom
 div.select
 div.optgroup
 div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}
```

#### JavaScript

```js
const selects = custom.querySelectorAll("select");
for (const select of selects) {
  const div = document.createElement("div");
  const header = document.createElement("div");
  const datalist = document.createElement("datalist");
  const optgroups = select.querySelectorAll("optgroup");
  const span = document.createElement("span");
  const options = select.options;
  const parent = select.parentElement;
  const multiple = select.hasAttribute("multiple");
  function onclick(e) {
    const disabled = this.hasAttribute("data-disabled");
    select.value = this.dataset.value;
    span.innerText = this.dataset.label;
    if (disabled) return;
    if (multiple) {
      if (e.shiftKey) {
        const checked = this.hasAttribute("data-checked");
        if (checked) {
          this.removeAttribute("data-checked");
        } else {
          this.setAttribute("data-checked", "");
        }
      } else {
        const options = div.querySelectorAll(".option");
        for (let i = 0; i < options.length; i++) {
          const option = options[i];
          option.removeAttribute("data-checked");
        }
        this.setAttribute("data-checked", "");
      }
    }
  }

  function onkeyup(e) {
    e.preventDefault();
    e.stopPropagation();
    if (e.keyCode === 13) {
      this.click();
    }
  }

  div.classList.add("select");
  header.classList.add("header");
  div.tabIndex = 1;
  select.tabIndex = -1;
  span.innerText = select.label;
  header.appendChild(span);

  for (const attribute of select.attributes) {
    div.dataset[attribute.name] = attribute.value;
  }
  for (let i = 0; i < options.length; i++) {
    const option = document.createElement("div");
    const label = document.createElement("div");
    const o = options[i];
    for (const attribute of o.attributes) {
      option.dataset[attribute.name] = attribute.value;
    }
    option.classList.add("option");
    label.classList.add("label");
    label.innerText = o.label;
    option.dataset.value = o.value;
    option.dataset.label = o.label;
    option.onclick = onclick;
    option.onkeyup = onkeyup;
    option.tabIndex = i + 1;
    option.appendChild(label);
    datalist.appendChild(option);
  }
  div.appendChild(header);
  for (const o of optgroups) {
    const optgroup = document.createElement("div");
    const label = document.createElement("div");
    const options = o.querySelectorAll("option");

    Object.assign(optgroup, o);
    optgroup.classList.add("optgroup");
    label.classList.add("label");
    label.innerText = o.label;
    optgroup.appendChild(label);
    div.appendChild(optgroup);
    for (const o of options) {
      const option = document.createElement("div");
      const label = document.createElement("div");

      for (const attribute of o.attributes) {
        option.dataset[attribute.name] = attribute.value;
      }
      option.classList.add("option");
      label.classList.add("label");
      label.innerText = o.label;
      option.tabIndex = i + 1;
      option.dataset.value = o.value;
      option.dataset.label = o.label;
      option.onclick = onclick;
      option.onkeyup = onkeyup;
      option.tabIndex = i + 1;
      option.appendChild(label);
      optgroup.appendChild(option);
    }
  }

  div.onclick = (e) => {
    e.preventDefault();
  };

  parent.insertBefore(div, select);
  header.appendChild(select);
  div.appendChild(datalist);
  datalist.style.top = `${header.offsetTop + header.offsetHeight}px`;

  div.onclick = (e) => {
    if (!multiple) {
      const open = div.hasAttribute("data-open");
      e.stopPropagation();
      if (open) {
        div.removeAttribute("data-open");
      } else {
        div.setAttribute("data-open", "");
      }
    }
  };

  div.onkeyup = (event) => {
    event.preventDefault();
    if (event.keyCode === 13) {
      div.click();
    }
  };

  document.addEventListener("click", (e) => {
    if (div.hasAttribute("data-open")) {
      div.removeAttribute("data-open");
    }
  });

  const width = Math.max(
    ...Array.from(options).map((e) => {
      span.innerText = e.label;
      return div.offsetWidth;
    }),
  );

  console.log(width);
  div.style.width = `${width}px`;
}
document.forms[0].onsubmit = (e) => {
  const data = new FormData(this);
  e.preventDefault();
  submit.innerText = JSON.stringify([...data.entries()]);
};
```

#### Result

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

The `<hr>` within a `<select>` should be considered purely decorative, as they are currently not exposed within the accessibility tree and therefore not exposed to assistive technologies.

Technical summary
-----------------

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content,
 interactive content,
 listed,
 labelable,
 resettable, and
 submittable
form-associated element
  |
| Permitted content |
 Zero or more `<option>`,
 `<optgroup>` or `<hr>` elements.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content.
  |
| Implicit ARIA role | `combobox` with **no**
`multiple` attribute and **no**
`size` attribute greater than 1, otherwise
 `listbox` |
| Permitted ARIA roles | `menu` with **no**
`multiple` attribute and **no**
`size` attribute greater than 1, otherwise no
 `role` permitted
  |
| DOM interface | `HTMLSelectElement` |

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

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

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

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

See also
--------

* Events fired by `<select>`: `change`, `input`
* The `<option>` element
* The `<optgroup>` element


<samp>: The Sample Output element - HTML: HyperText Markup Language

<samp>: The Sample Output element
=================================

The **`<samp>`** HTML element is 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).

Try it
------

Attributes
----------

This element only includes the global attributes.

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

You can use a CSS rule to override the browser's default font face for the `<samp>` element; however, it's possible that the browser's preferences may take precedence over any CSS you specify.

The CSS to override the default font face would look like this:

```css
samp {
  font-family: "Courier";
}
```

**Note:** If you need an element which will serve as a container for output generated by your website or app's JavaScript code, you should instead use the `<output>` element.

Examples
--------

### Basic example

In this simple example, a paragraph includes an example of the output of a program.

```html
<p>
  When the process is complete, the utility will output the text
  <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to
  the next step.
</p>
```

#### Result

### Sample output including user input

You can nest the `<kbd>` element within a `<samp>` block to present an example that includes text entered by the user. For example, consider this text presenting a transcript of a Linux (or macOS) console session:

#### HTML

```html
<pre>
<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>
```

Note the use of `<span>` to allow customization of the appearance of specific portions of the sample text such as the shell prompts and the cursor. Note also the use of `<kbd>` to represent the command the user entered at the prompt in the sample text.

#### CSS

The CSS that achieves the appearance we want is:

```css
.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}
```

This gives the prompt and cursor fairly subtle colorization and emboldens the keyboard input within the sample text.

#### Result

The resulting output is this:

Technical summary
-----------------

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

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

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

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

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

See also
--------

* Related elements: `<kbd>`, `<code>`, `<pre>`
* The `<output>` element: a container for script-generated output


<portal>: The Portal element - HTML: HyperText Markup Language

<portal>: The Portal element
============================

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

The **`<portal>`** HTML element enables the embedding of another HTML page into the current one for the purposes of allowing smoother navigation into new pages.

A `<portal>` is similar to an `<iframe>`. An `<iframe>` allows a separate browsing context to be embedded. However, the embedded content of a `<portal>` is more limited than that of an `<iframe>`. It cannot be interacted with, and therefore is not suitable for embedding widgets into a document. Instead, the `<portal>` acts as a preview of the content of another page. It can be navigated into therefore allowing for seamless transition to the embedded content.

Attributes
----------

This element includes the global attributes.

`referrerpolicy`

Sets the referrer policy to use when requesting the page at the URL given as the value of the `src` attribute.

`src`

The URL of the page to embed.

Examples
--------

### Basic example

The following example will embed the contents of `https://example.com` as a preview.

```html
<portal id="exampleportal" src="https://example.com/"></portal>
```

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

The preview displayed by a `<portal>` is not interactive, therefore does not receive input events or focus. Therefore the embedded contents of the portal are not exposed as elements in the accessibility tree. The portal can be navigated to and activated like a button, the default behavior when clicking on the portal is to activate it.

Portals are given a default label which is the title of the embedded page. If no title is present the visible text in the preview is concatenated to create a label. The `aria-label` attribute can be used to override this.

Portals used for prerendering only should be hidden with the hidden HTML attribute or the CSS `display` property with a value of `none`.

When using animations during portal activation the `prefers-reduced-motion` media feature should be respected.

Technical summary
-----------------

|  |  |
| --- | --- |
| Implicit ARIA role | button |
| DOM interface | `HTMLPortalElement` |

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

| Specification |
| --- |
| Portals # the-portal-element |

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

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


<search>: The generic search element - HTML: HyperText Markup Language

<search>: The generic search element
====================================

The **`<search>`** HTML element is a container representing the parts of the document or application with form controls or other content related to performing a search or filtering operation. The `<search>` element semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof.

Attributes
----------

This element only includes the global attributes.

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

The `<search>` element is not for presenting search results. Rather, search or filtered results should be presented as part of the main content of that web page. That said, suggestions and links that are part of "quick search" functionality within the search or filtering functionality are appropriately nested within the contents of the `<search>` element as they are search features.

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

The `<search>` element defines a `search` landmark. This removes the need for adding `role=search` to a `<form>` element.

Examples
--------

### Header search form

This example demonstrates the use of `<search>` as the container for a search within a website header to perform a simple site-wide search. The `<search>` is a semantic container for the `<form>` that submits the user-entered search query to a server.

#### HTML

```html
<header>
  <h1>Movie website</h1>
  <search>
    <form action="./search/">
      <label for="movie">Find a Movie</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">Search</button>
    </form>
  </search>
</header>
```

#### Result

### Web app search

This example demonstrates potential DOM content when dynamically including JavaScript search functionality in a web application. When search functionality is implemented entirely with JavaScript, if no form is submitted, neither a `<form>` element nor a submit `<button>` is required. For semantics, the `<search>` element is included to contain the search and filtering capabilities.

#### HTML

```html
<search>
  <label>
    Find and filter your query
    <input type="search" id="query" />
  </label>
  <label>
    <input type="checkbox" id="exact-only" />
    Exact matches only
  </label>

  <section>
    <h3>Results:</h3>
    <ul id="results">
      <!-- search result content -->
    </ul>
    <output id="no-results">
      <!-- no results content -->
    </output>
  </section>
</search>
```

#### Result

**Note:** Remember that some users don't have JavaScript, and none of your users have JavaScript running until the JavaScript is successfully downloaded, parsed, and executed, ensure your users can access the content of your site with JavaScript disabled.

### Multiple searches

This example demonstrates a page with two search features. The first is a global site search located on the header. The second is a search and filter based on the page context, in our example a car search.

#### HTML

```html
<body>
  <header>
    <h1>Car rental agency</h1>
    <search title="Website">...</search>
  </header>
  <main>
    <h2>Cars available for rent</h2>
    <search title="Cars">
      <h3>Filter results</h3>
      ...
    </search>
    <article>
      <!-- search result content -->
    </article>
  </main>
</body>
```

#### Result

Technical summary
-----------------

|  |  |
| --- | --- |
| Content categories | Flow content, palpable content. |
| Permitted content | Flow content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Implicit ARIA role | `search` |
| Permitted ARIA roles | `form`, `group`, `none`, `presentation`, `region`, `search` |
| DOM interface | `HTMLElement` |

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

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

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

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

See also
--------

* Other search-related elements: `<header>`, `<footer>`, `<aside>`, `<nav>`, `<form>`
* ARIA: Search role


<object>: The External Object element - HTML: HyperText Markup Language

<object>: The External Object element
=====================================

The **`<object>`** HTML element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.

Try it
------

Attributes
----------

This element includes the global attributes.

`archive`
Deprecated

A space-separated list of URIs for archives of resources for the object.

`border`
Deprecated

The width of a border around the control, in pixels.

`classid`
Deprecated

The URI of the object's implementation. It can be used together with, or in place of, the **data** attribute.

`codebase`
Deprecated

The base path used to resolve relative URIs specified by **classid**, **data**, or **archive**. If not specified, the default is the base URI of the current document.

`codetype`
Deprecated

The content type of the data specified by **classid**.

`data`

The address of the resource as a valid URL. At least one of **data** and **type** must be defined.

`declare`
Deprecated

The presence of this Boolean attribute makes this element a declaration only. The object must be instantiated by a subsequent `<object>` element. Repeat the `<object>` element completely each time the resource is reused.

`form`

The form element, if any, that the object element is associated with (its *form owner*). The value of the attribute must be an ID of a `<form>` element in the same document.

`height`

The height of the displayed resource, in CSS pixels. — (Absolute values only. NO percentages)

`name`

The name of valid browsing context (HTML5), or the name of the control (HTML 4).

`standby`
Deprecated

A message that the browser can show while loading the object's implementation and data.

`type`

The content type of the resource specified by **data**. At least one of **data** and **type** must be defined.

`usemap`

A hash-name reference to a `<map>` element; that is a '#' followed by the value of a `name` of a map element.

`width`

The width of the display resource, in CSS pixels. — (Absolute values only. NO percentages)

Examples
--------

### Embed a video

#### HTML

```html
<object
 type="video/mp4"
 data="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
 width="600"
 height="140">
  <img src="path/image.jpg" alt="useful image description" />
</object>
```

#### Result

If the video in the example fails to load, the user will be provided with an image as fallback content. The `<img>` tag is used to display an image. We include the `src` attribute set to the path to the image we want to embed. We also include the `alt` attribute, which provides the image with an accessible name. If the image also fails to load, the content of the `alt` attribute will be displayed.

Technical summary
-----------------

|  |  |
| --- | --- |
| Content categories | Flow content;
 phrasing content;
 embedded content, palpable content; if the element has a
 `usemap` attribute, interactive content;
 listed,
 submittable
form-associated element.
  |
| Permitted content |
 zero or more `<param>` elements, then
 transparent.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts embedded content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | `application`, `document`, `img` |
| DOM interface | `HTMLObjectElement` |

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

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

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

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

See also
--------

* `<embed>`
* `<param>`


<time>: The (Date) Time element - HTML: HyperText Markup Language

<time>: The (Date) Time element
===============================

The **`<time>`** HTML element 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.

It may represent one of the following:

* A time on a 24-hour clock.
* A precise date in the Gregorian calendar (with optional time and timezone information).
* A valid time duration.
Try it
------

Attributes
----------

Like all other HTML elements, this element supports the global attributes.

`datetime`

This attribute indicates the time and/or date of the element and must be in one of the formats described below.

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

This element is for presenting dates and times in a machine-readable format. For example, this can help a user agent offer to add an event to a user's calendar.

This element should not be used for dates prior to the introduction of the Gregorian calendar (due to complications in calculating those dates).

The *datetime value* (the machine-readable value of the datetime) is the value of the element's `datetime` attribute, which must be in the proper format (see below). If the element does not have a `datetime` attribute, **it must not have any element descendants**, and the *datetime value* is the element's child text content.

### Valid datetime values

a valid year string

`2011`

a valid month string

`2011-11`

a valid date string

`2011-11-18`

a valid yearless date string

`11-18`

a valid week string

`2011-W47`

a valid time string

`14:54`

`14:54:39`

`14:54:39.929`

a valid local date and time string

`2011-11-18T14:54:39.929`

`2011-11-18 14:54:39.929`

a valid global date and time string

`2011-11-18T14:54:39.929Z`

`2011-11-18T14:54:39.929-0400`

`2011-11-18T14:54:39.929-04:00`

`2011-11-18 14:54:39.929Z`

`2011-11-18 14:54:39.929-0400`

`2011-11-18 14:54:39.929-04:00`

a valid duration string

`PT4H18M3S`

Examples
--------

### Simple example

#### HTML

```html
<p>The concert starts at <time datetime="2018-07-07T20:00:00">20:00</time>.</p>
```

#### Result

### `datetime` example

#### HTML

```html
<p>
  The concert took place on <time datetime="2001-05-15T19:00">May 15</time>.
</p>
```

#### Result

Technical summary
-----------------

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

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

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

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

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

See also
--------

* The `<data>` element, allowing to signal other kind of values.


<figcaption>: The Figure Caption element - HTML: HyperText Markup Language

<figcaption>: The Figure Caption element
========================================

The **`<figcaption>`** HTML element represents a caption or legend describing the rest of the contents of its parent `<figure>` element, providing the `<figure>` an accessible description.

Try it
------

Attributes
----------

This element only includes the global attributes.

Examples
--------

Please see the `<figure>` page for examples on `<figcaption>`.

Technical summary
-----------------

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | Flow content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 A `<figure>` element; the
 `<figcaption>` element must be its first or last child.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | `group`, `none`,
 `presentation` |
| DOM interface | `HTMLElement` |

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

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

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

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

See also
--------

* The `<figure>` element.


<pre>: The Preformatted Text element - HTML: HyperText Markup Language

<pre>: The Preformatted Text element
====================================

The **`<pre>`** HTML element 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.

By default, `<pre>` is a block-level element, i.e. its default `display` value is `block`.

Try it
------

If you have to display reserved characters such as `<`, `>`, `&`, and `"` within the `<pre>` tag, the characters must be escaped using their respective HTML entity.

Attributes
----------

This element only includes the global attributes.

`cols`
Non-standard

Deprecated

Contains the *preferred* count of characters that a line should have. It was a non-standard synonym of `width`. To achieve such an effect, use CSS `width` instead.

`width`
Deprecated

Non-standard

Contains the *preferred* count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS `width` instead.

`wrap`
Non-standard

Deprecated

Is a *hint* indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS `white-space` instead.

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

It is important to provide an alternate description for any images or diagrams created using preformatted text. The alternate description should clearly and concisely describe the image or diagram's content.

People experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence.

A combination of the `<figure>` and `<figcaption>` elements, supplemented by the ARIA `role` and `aria-label` attributes on the `pre` element allow the preformatted ASCII art to be announced as an image with alternative text, and the `figcaption` serving as the image's caption.

### Example

```html
<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  < I'm an expert in my field. >
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    A cow saying, "I'm an expert in my field." The cow is illustrated using
    preformatted text characters.
  </figcaption>
</figure>
```

* MDN Understanding WCAG, Guideline 1.1 explanations
* H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0
Examples
--------

### Basic example

#### HTML

```html
<p>Using CSS to change the font color is easy.</p>
<pre>
body {
  color: red;
}
</pre>
```

#### Result

### Escaping reserved characters

#### HTML

```html
<pre>
let i = 5;

if (i < 10 && i > 0)
  return "Single Digit Number"
</pre>
```

#### Result

Technical summary
-----------------

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

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

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

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

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

See also
--------

* CSS: `white-space`, `word-break`
* HTML Entity
* Related element: `<code>`


<s>: The Strikethrough element - HTML: HyperText Markup Language

<s>: The Strikethrough element
==============================

The **`<s>`** HTML element 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.

Try it
------

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

Attributes
----------

This element only includes the global attributes.

Examples
--------

```css
.sold-out {
  text-decoration: line-through;
}
```

```html
<s>Today's Special: Salmon</s> SOLD OUT<br />
<span class="sold-out">Today's Special: Salmon</span> SOLD OUT
```

### Result

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

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

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

s::before {
  content: " [start of stricken text] ";
}

s::after {
  content: " [end of stricken text] ";
}
```

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

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

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

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

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

See also
--------

* The `<strike>` element, alter ego of the `<s>` element, is obsolete and should not be used on websites anymore.
* The `<del>` element is to be used instead if the data has been *deleted*.
* The CSS `text-decoration-line` property is to be used to achieve the former visual aspect of the `<s>` element.


<picture>: The Picture element - HTML: HyperText Markup Language

<picture>: The Picture element
==============================

The **`<picture>`** HTML element contains zero or more `<source>` elements and one `<img>` element to offer alternative versions of an image for different display/device scenarios.

The browser will consider each child `<source>` element and choose the best match among them. If no matches are found—or the browser doesn't support the `<picture>` element—the URL of the `<img>` element's `src` attribute is selected. The selected image is then presented in the space occupied by the `<img>` element.

Try it
------

To decide which URL to load, the user agent examines each `<source>`'s `srcset`, `media`, and `type` attributes to select a compatible image that best matches the current layout and capabilities of the display device.

The `<img>` element serves two purposes:

1. It describes the size and other attributes of the image and its presentation.
2. It provides a fallback in case none of the offered `<source>` elements are able to provide a usable image.

Common use cases for `<picture>`:

* **Art direction.** Cropping or modifying images for different `media` conditions (for example, loading a simpler version of an image which has too many details, on smaller displays).
* **Offering alternative image formats**, for cases where certain formats are not supported.

**Note:** For example, newer formats like AVIF or WEBP have many advantages, but might not be supported by the browser. A list of supported image formats can be found in: Image file type and format guide.
* **Saving bandwidth and speeding page load times** by loading the most appropriate image for the viewer's display.

If providing higher-density versions of an image for high-DPI (Retina) display, use `srcset` on the `<img>` element instead. This lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit `media` conditions.

|  |  |
| --- | --- |
| Content categories | Flow content, phrasing content, embedded content |
| Permitted content |
 Zero or more `<source>` elements, followed by one
 `<img>` element, optionally intermixed with
 script-supporting elements.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that allows embedded content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLPictureElement` |

Attributes
----------

This element includes only global attributes.

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

You can use the `object-position` property to adjust the positioning of the image within the element's frame, and the `object-fit` property to control how the image is resized to fit within the frame.

**Note:** Use these properties on the child `<img>` element, **not** the `<picture>` element.

Examples
--------

These examples demonstrate how different attributes of the `<source>` element change the selection of the image inside `<picture>`.

### The media attribute

The `media` attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each `<source>` element.

If the `<source>`'s media condition evaluates to `false`, the browser skips it and evaluates the next element inside `<picture>`.

```html
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>
```

### The srcset attribute

The srcset attribute is used to offer a list of possible images based on size or the display's pixel density.

It is composed of a comma-separated list of image descriptors. Each image descriptor is composed of a URL of the image, and *either*:

* a *width descriptor*, followed by a `w` (such as `300w`);
 *OR*
* a *pixel density descriptor*, followed by an `x` (such as `2x`) to serve a high-res image for high-DPI screens.

Make sure to note that:

* width and pixel density descriptors should not be used together
* a missing pixel density descriptor implies 1x
* duplicate descriptor values are not allowed (2x & 2x, 100w & 100w)

The following example illustrates the usage of `srcset` attribute with the `<source>` element to specify a high-density and standard-resolution image:

```html
<picture>
  <source srcset="logo.png, logo-1.5x.png 1.5x" />
  <img src="logo.png" alt="MDN Web Docs logo" height="320" width="320" />
</picture>
```

The `srcset` attribute can also be used on the `<img>` element without needing the `<picture>` element. The following example demonstrates how to use the `srcset` attribute to specify standard-resolution and high-density images, respectively:

```html
<img
 srcset="logo.png, logo-2x.png 2x"
 src="logo.png"
 height="320"
 width="320"
 alt="MDN Web Docs logo" />
```

The `sizes` attribute is not mandatory when using srcset, but it is recommended to use it in order to provide additional information to the browser to help it select the best image source.

Without sizes, the browser will use the default size of the image as specified by its dimensions in pixels. This may not be the best fit for all devices, especially if the image is displayed on different screen sizes or in different contexts.

 Please note that sizes will have its effect only if width dimension descriptors are provided with srcset instead of pixel ratio values (200w instead of 2x for example).
 For more information on using `srcset`, see the Responsive images documentation.

### The type attribute

The `type` attribute specifies a MIME type for the resource URL(s) in the `<source>` element's `srcset` attribute. If the user agent does not support the given type, the `<source>` element is skipped.

```html
<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="photo" />
</picture>
```

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

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

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

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

See also
--------

* `<img>` element
* `<source>` element
* Positioning and sizing the picture within its frame: `object-position` and `object-fit`
* Image file type and format guide


<rtc>: The Ruby Text Container element - HTML: HyperText Markup Language

<rtc>: The Ruby Text Container element
======================================

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

The **`<rtc>`** HTML element 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.

Try it
------

Attributes
----------

This element only includes the global attributes.

Examples
--------

```html
<div class="info">
  <ruby>
    <rtc>
      <rb>旧</rb><rt>jiù</rt>
      <rb>金</rb><rt>jīn</rt>
      <rb>山</rb><rt>shān</rt>
    </rtc>
    <rtc>San Francisco</rtc>
  </ruby>
</div>
```

```
.info {
  padding-top: 10px;
  font-size: 36px;
}
```

### Result

Technical summary
-----------------

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | Phrasing content
 or `<rt>` elements.
  |
| Tag omission |
 The closing tag can be omitted if it is immediately followed by a
 `<rb>`, `<rtc>` or
 `<rt>` element opening tag or by its parent
 closing tag.
  |
| Permitted parents | A `<ruby>` element. |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` |

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

| Specification |
| --- |
| HTML Standard # rtc |

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

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

See also
--------

* `<ruby>`
* `<rp>`
* `<rb>`
* `<rt>`


<canvas>: The Graphics Canvas element - HTML: HyperText Markup Language

<canvas>: The Graphics Canvas element
=====================================

Use the **HTML `<canvas>` element** with either the canvas scripting API or the WebGL API to draw graphics and animations.

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content,
 embedded content, palpable content.
  |
| Permitted content |
 Transparent but with no
 interactive content
 descendants except for `<a>` elements,
 `<button>` elements,
 `<input>` elements whose
 `type` attribute is
 `checkbox`, `radio`, or `button`.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLCanvasElement` |

Attributes
----------

This element's attributes include the global attributes.

`height`

The height of the coordinate space in CSS pixels. Defaults to 150.

`moz-opaque`
Non-standard

Deprecated

Lets the canvas know whether translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized. This is only supported by Mozilla-based browsers; use the standardized `canvas.getContext('2d', { alpha: false })` instead.

`width`

The width of the coordinate space in CSS pixels. Defaults to 300.

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

### Alternative content

You should provide alternate content inside the `<canvas>` block. That content will be rendered both on older browsers that don't support canvas and in browsers with JavaScript disabled.

### Closing `</canvas>` tag

Unlike the `<img>` element, the `<canvas>` element **requires** the closing tag (`</canvas>`).

### Sizing the canvas using CSS versus HTML

The displayed size of the canvas can be changed using CSS, but if you do this the image is scaled during rendering to fit the styled size, which can make the final graphics rendering end up being distorted.

It is better to specify your canvas dimensions by setting the `width` and `height` attributes directly on the `<canvas>` elements, either directly in the HTML or by using JavaScript.

### Maximum canvas size

The exact maximum size of a `<canvas>` element depends on the browser and environment. While in most cases the maximum dimensions exceed 10,000 x 10,000 pixels, notably iOS devices limit the canvas size to only 4,096 x 4,096 pixels. See canvas size limits in different browsers and devices (2021).

**Note:** Exceeding the maximum dimensions or area renders the canvas unusable — drawing commands will not work.

### Using an offscreen canvas

 A canvas can be rendered using the `OffscreenCanvas` API where the document and canvas are decoupled.
 The benefit is that a worker thread can handle canvas rendering and the main thread of your web application is not blocked by canvas operations.
 By parallelizing work, other UI elements of your web application will remain responsive even if you are running complex graphics on an offscreen canvas.
 For more information, see the `OffscreenCanvas` API documentation.

Examples
--------

### HTML

This code snippet adds a canvas element to your HTML document. A fallback text is provided if a browser is unable to read or render the canvas.

```html
<canvas width="120" height="120">
  An alternative text describing what your canvas displays.
</canvas>
```

### JavaScript

Then in the JavaScript code, call `HTMLCanvasElement.getContext()` to get a drawing context and start drawing onto the canvas:

```js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
// Add a rectangle at (10, 10) with size 100x100 pixels
ctx.fillRect(10, 10, 100, 100);
```

### Result

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

### Alternative content

The `<canvas>` element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools as semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guides can help to make it more accessible.

* Canvas accessibility use cases
* Canvas element accessibility issues
* HTML Canvas Accessibility in Firefox 13 – by Steve Faulkner
* Best practices for interactive canvas elements
Specifications
--------------

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

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

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

See also
--------

* Canvas API
* Canvas tutorial
* OffscreenCanvas
* Canvas cheat sheet (2009)
* Canvas cheat sheet (pdf) (2015)
* Safari HTML canvas guide via Apple (2013)
* `CanvasRenderingContext2D` 2D drawing context for a canvas element via Apple.com
* WebGL API
* `<img>`
* SVG
* Using HTML audio and video


<hr>: The Thematic Break (Horizontal Rule) element - HTML: HyperText Markup Language

<hr>: The Thematic Break (Horizontal Rule) element
==================================================

The **`<hr>`** HTML element 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.

Try it
------

Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.

Attributes
----------

This element's attributes include the global attributes.

`align`
Deprecated

Non-standard

Sets the alignment of the rule on the page. If no value is specified, the default value is `left`.

`color`
Deprecated

Non-standard

Sets the color of the rule through color name or hexadecimal value.

`noshade`
Deprecated

Non-standard

Sets the rule to have no shading.

`size`
Deprecated

Non-standard

Sets the height, in pixels, of the rule.

`width`
Deprecated

Non-standard

Sets the length of the rule on the page through a pixel or percentage value.

Example
-------

### HTML

```html
<p>
  This is the first paragraph of text. This is the first paragraph of text. This
  is the first paragraph of text. This is the first paragraph of text.
</p>

<hr />

<p>
  This is the second paragraph of text. This is the second paragraph of text.
  This is the second paragraph of text. This is the second paragraph of text.
</p>
```

### Result

Technical summary
-----------------

|  |  |
| --- | --- |
| Content categories | Flow content. |
| Permitted content | None; it is a void element. |
| Tag omission | It must have start tag, but must not have an end tag. |
| Permitted parents | * Any element that accepts flow content
* `<select>` element
 |
| Implicit ARIA role | `separator` |
| Permitted ARIA roles | `presentation` or `none` |
| DOM interface | `HTMLHRElement` |

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

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

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

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

See also
--------

* `<p>`
* `<hr>` in `<select>`


<kbd>: The Keyboard Input element - HTML: HyperText Markup Language

<kbd>: The Keyboard Input element
=================================

The **`<kbd>`** HTML element 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.

Try it
------

`<kbd>` may be nested in various combinations with the `<samp>` (Sample Output) element to represent various forms of input or output based on visual cues.

Attributes
----------

This element only includes the global attributes.

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

Other elements can be used in tandem with `<kbd>` to represent more specific scenarios:

* Nesting a `<kbd>` element within another `<kbd>` element represents an actual key or other unit of input as a portion of a larger input. See Representing keystrokes within an input below.
* Nesting a `<kbd>` element inside a `<samp>` element represents input that has been echoed back to the user by the system. See Echoed input, below, for an example.
* Nesting a `<samp>` element inside a `<kbd>` element, on the other hand, represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen. See the example under Representing onscreen input options below.

**Note:** You can define a custom style to override the browser's default font selection for the `<kbd>` element, although the user's preferences may potentially override your CSS.

Examples
--------

### Basic example

```html
<p>
  Use the command <kbd>help mycommand</kbd> to view documentation for the
  command "mycommand".
</p>
```

#### Result

### Representing keystrokes within an input

To describe an input comprised of multiple keystrokes, you can nest multiple `<kbd>` elements, with an outer `<kbd>` element representing the overall input and each individual keystroke or component of the input enclosed within its own `<kbd>`.

#### Unstyled

First, let's look at what this looks like as just plain HTML.

##### HTML

```html
<p>
  You can also create a new document using the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> keyboard shortcut.
</p>
```

This wraps the entire key sequence in an outer `<kbd>` element, then each individual key within its own, in order to denote the components of the sequence.

**Note:** You don't need to do all this wrapping; you can choose to simplify it by leaving out the external `<kbd>` element. In other words, simplifying this to just `<kbd>Ctrl</kbd>+<kbd>N</kbd>` would be perfectly valid.

**Note:** Depending on your style sheet, though, you may find it useful to do this kind of nesting.

##### Result

The output looks like this without a style sheet applied:

#### With custom styles

We can make more sense of this by adding some CSS:

##### CSS

We add a new selector for nested `<kbd>` elements, `kbd>kbd`, which we can apply when rendering keyboard keys:

```css
kbd > kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
```

##### HTML

Then we update the HTML to use this class on the keys in the output to be presented:

```html
<p>
  You can also create a new document by pressing the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> shortcut.
</p>
```

##### Result

The result is just what we want!

### Echoed input

Nesting a `<kbd>` element inside a `<samp>` element represents input that has been echoed back to the user by the system.

```html
<p>
  If a syntax error occurs, the tool will output the initial command you typed
  for your review:
</p>
<blockquote>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>
```

#### Result

### Representing onscreen input options

Nesting a `<samp>` element inside a `<kbd>` element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.

For example, you can explain how to choose the "New Document" option in the "File" menu using HTML that looks like this:

```html
<p>
  To create a new file, choose the <kbd><kbd><samp>File</samp></kbd>
  ⇒<kbd><samp>New Document</samp></kbd></kbd> menu option.
</p>

<p>
  Don't forget to click the <kbd><samp>OK</samp></kbd> button to confirm once
  you've entered the name of the new file.
</p>
```

This does some interesting nesting. For the menu option description, the entire input is enclosed in a `<kbd>` element. Then, inside that, both the menu and menu item names are contained within both `<kbd>` and `<samp>`, indicating an input which is selected from a screen widget.

#### Result

Technical summary
-----------------

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content, palpable content.
  |
| Permitted content | Phrasing content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` |

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

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

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

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

See also
--------

* `<code>`


<bdo>: The Bidirectional Text Override element - HTML: HyperText Markup Language

<bdo>: The Bidirectional Text Override element
==============================================

The **`<bdo>`** HTML element overrides the current directionality of text, so that the text within is rendered in a different direction.

Try it
------

The text's characters are drawn from the starting point in the given direction; the individual characters' orientation is not affected (so characters don't get drawn backward, for example).

Attributes
----------

This element's attributes include the global attributes.

`dir`

The direction in which text should be rendered in this element's contents. Possible values are:

* `ltr`: Indicates that the text should go in a left-to-right direction.
* `rtl`: Indicates that the text should go in a right-to-left direction.

Examples
--------

```html
<!-- Switch text direction -->
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
```

### Result

Notes
-----

The HTML 4 specification did not specify events for this element; they were added in XHTML. This is most likely an oversight.

Technical summary
-----------------

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content, palpable content.
  |
| Permitted content | Phrasing content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content.
  |
| Implicit ARIA role | `generic` |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` Up to Gecko 1.9.2 (Firefox 4)
 inclusive, Firefox implements the
 `HTMLSpanElement`
 interface for this element.
  |

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

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

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

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

See also
--------

* Related HTML element: `<bdi>`


<sup>: The Superscript element - HTML: HyperText Markup Language

<sup>: The Superscript element
==============================

The **`<sup>`** HTML element 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.

Try it
------

Attributes
----------

This element only includes the global attributes.

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

The `<sup>` element should only be used for typographical reasons—that is, to change the position of the text to comply with typographical conventions or standards, rather than solely for presentation or appearance purposes.

For example, to style the wordmark of a business or product which uses a raised baseline should be done using CSS (most likely `vertical-align`) rather than `<sup>`. This would be done using, for example, `vertical-align: super` or, to shift the baseline up 50%, `vertical-align: 50%`.

Appropriate use cases for `<sup>` include (but aren't necessarily limited to):

* Displaying exponents, such as "x3". It may be worth considering the use of MathML for these, especially in more complex cases. See Exponents under Examples below.
* Displaying superior lettering, which is used in some languages when rendering certain abbreviations. For example, in French, the word "mademoiselle" can be abbreviated "Mlle"; this is an acceptable use case. See Superior lettering for examples.
* Representing ordinal numbers, such as "4th" instead of "fourth." See Ordinal numbers for examples.
Examples
--------

### Exponents

Exponents, or powers of a number, are among the most common uses of superscripted text. For example:

```html
<p>
  One of the most common equations in all of physics is <var>E</var>=<var>m</var
 ><var>c</var><sup>2</sup>.
</p>
```

#### Result

### Superior lettering

Superior lettering is not technically the same thing as superscript. However, it is common to use `<sup>` to present superior lettering in HTML. Among the most common uses of superior lettering is the presentation of certain abbreviations in French:

```html
<p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p>
```

#### Result

### Ordinal numbers

Ordinal numbers, such as "fourth" in English or "quinto" in Spanish may be abbreviated using numerals and language-specific text rendered in superscript:

```html
<p>
  The ordinal number "fifth" can be abbreviated in various languages as follows:
</p>
<ul>
  <li>English: 5<sup>th</sup></li>
  <li>French: 5<sup>ème</sup></li>
</ul>
```

#### Result

Technical summary
-----------------

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

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

| Specification |
| --- |
| HTML Standard # the-sub-and-sup-elements |

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

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

See also
--------

* The `<sub>` HTML element that produces subscripts. Note that you cannot use `sub` and `sup` at the same time: you need to use MathML to produce both a superscript and a subscript next to the chemical symbol of an element, representing its atomic number and its nuclear number.
* The `<msub>`, `<msup>`, and `<msubsup>` MathML elements.
* The CSS `vertical-align` property.


<big>: The Bigger Text element - HTML: HyperText Markup Language

<big>: The Bigger Text element
==============================

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

The **`<big>`** HTML deprecated element 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.

**Warning:** This element has been removed from the specification and shouldn't be used anymore. Use the CSS `font-size` property to adjust the font size.

Attributes
----------

This element has no other attributes than the global attributes, common to all elements.

Examples
--------

Here we see examples showing the use of `<big>` followed by an example showing how to accomplish the same results using modern CSS syntax instead.

### Using big

This example uses the obsolete `<big>` element to increase the size of some text.

#### HTML

```html
<p>
  This is the first sentence.
  <big>This whole sentence is in bigger letters.</big>
</p>
```

#### Result

### Using CSS `font-size`

This example uses the CSS `font-size` property to increase the font size by one level.

#### CSS

```css
.bigger {
  font-size: larger;
}
```

#### HTML

```html
<p>
  This is the first sentence.
  <span class="bigger">This whole sentence is in bigger letters.</span>
</p>
```

#### Result

DOM interface
-------------

This element implements the `HTMLElement` interface.

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

| Specification |
| --- |
| HTML Standard # big |

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

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

See also
--------

* CSS: `font-size`, `font`
* HTML: `<small>`, `<font>`, `<style>`
* HTML 4.01 Specification: Font Styles


<rb>: The Ruby Base element - HTML: HyperText Markup Language

<rb>: The Ruby Base element
===========================

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

The **`<rb>`** HTML element is 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.

Attributes
----------

This element only includes the global attributes.

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

* Ruby annotations are for showing pronunciation of East Asian characters, like using Japanese furigana or Taiwanese bopomofo characters. The `<rb>` element is used to separate out each segment of the ruby base text.
* Even though `<rb>` is not a void element, it is common to just include the opening tag of each element in the source code, so that the ruby markup is less complex and easier to read. The browser can then fill in the full element in the rendered version.
* You need to include one `<rt>` element for each base segment/`<rb>` element that you want to annotate.
Examples
--------

### Using rb

In this example, we provide an annotation for the original character equivalent of "Kanji":

```html
<ruby>
  <rb>漢</rb><rb>字 </rb><rp>(</rp><rt>kan</rt><rt>ji</rt><rp>)</rp>
</ruby>
```

Note how we've included two `<rb>` elements, to delimit the two separate parts of the ruby base text. The annotation on the other hand is delimited by two `<rt>` elements.

#### Result

### Separate annotations

Note that we could also write this example with the two base text parts annotated completely separately. In this case we don't need to include `<rb>` elements:

```html
<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
```

#### Result

See the article about the `<ruby>` element for further examples.

Technical summary
-----------------

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | As a child of a `<ruby>` element. |
| Tag omission |
 The end tag can be omitted if the element is immediately followed by an
 `<rt>`, `<rtc>`, or
 `<rp>` element or another
 `<rb>` element, or if there is no more content in the
 parent element.
  |
| Permitted parents | A `<ruby>` element. |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` |

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

| Specification |
| --- |
| HTML Standard # rb |

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

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

See also
--------

* `<ruby>`
* `<rt>`
* `<rp>`
* `<rtc>`


<b>: The Bring Attention To element - HTML: HyperText Markup Language

<b>: The Bring Attention To element
===================================

The **`<b>`** HTML element is 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.

Try it
------

Attributes
----------

This element only includes the global attributes.

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

* Use the `<b>` for cases like keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced (but not including any special importance).
* Do not confuse the `<b>` element with the `<strong>`, `<em>`, or `<mark>` elements. The `<strong>` element represents text of certain *importance*, `<em>` puts some emphasis on the text and the `<mark>` element represents text of certain *relevance*. The `<b>` element doesn't convey such special semantic information; use it only when no others fit.
* Similarly, do not mark titles and headings using the `<b>` element. For this purpose, use the h1 to h6 tags. Further, stylesheets can change the default style of these elements, with the result that they are not *necessarily* displayed in bold.
* It is a good practice to use the `class` attribute on the `<b>` element in order to convey additional semantic information as needed (for example `<b class="lead">` for the first sentence in a paragraph). This makes it easier to manage multiple use cases of `<b>` if your stylistic needs change, without the need to change all of its uses in the HTML.
* Historically, the `<b>` element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of the `<b>` element has been changed.
* If there is no semantic purpose to using the `<b>` element, you should use the CSS `font-weight` property with the value `"bold"` instead in order to make text bold.
Examples
--------

```html
<p>
  This article describes several <b class="keywords">text-level</b> elements. It
  explains their usage in an <b class="keywords">HTML</b> document.
</p>
Keywords are displayed with the default style of the
<b>element, likely in bold.</b>
```

### Result

Technical summary
-----------------

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

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

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

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

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

See also
--------

* Other elements conveying text-level semantics: `<a>`, `<em>`, `<strong>`, `<small>`, `<cite>`, `<q>`, `<dfn>`, `<abbr>`, `<time>`, `<code>`, `<var>`, `<samp>`, `<kbd>`, `<sub>`, `<sup>`, `<i>`, `<mark>`, `<ruby>`, `<rp>`, `<rt>`, `<bdo>`, `<span>`, `<br>`, `<wbr>`.
* Using <b> and <i> elements (W3C)


<area>: The Image Map Area element - HTML: HyperText Markup Language

<area>: The Image Map Area element
==================================

The **`<area>`** HTML element 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 hypertext links.

This element is used only within a `<map>` element.

Try it
------

Attributes
----------

This element's attributes include the global attributes.

`alt`

 A text string alternative to display on browsers that do not display images.
 The text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text.
 This attribute is required only if the `href` attribute is used.

`coords`

 The `coords` attribute details the coordinates of the `shape` attribute in size, shape, and placement of an `<area>`.
 This attribute must not be used if `shape` is set to `default`.

* `rect`: the value is `x1,y1,x2,y2`.
 The value specifies the coordinates of the top-left and bottom-right corner of the rectangle.
 For example, in `<area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla">` the coordinates are `0,0` and `253,27`, indicating the top-left and bottom-right corners of the rectangle, respectively.
* `circle`: the value is `x,y,radius`. Value specifies the coordinates of the circle center and the radius.
 For example: `<area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">`
* `poly`: the value is `x1,y1,x2,y2,..,xn,yn`. Value specifies the coordinates of the edges of the polygon.
 If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon

The values are numbers of CSS pixels.

`download`

 This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource.
 See `<a>` for a full description of the `download` attribute.

`href`

 The hyperlink target for the area.
 Its value is a valid URL.
 This attribute may be omitted; if so, the `<area>` element does not represent a hyperlink.

`ping`

 Contains a space-separated list of URLs to which, when the hyperlink is followed, `POST` requests with the body `PING` will be sent by the browser (in the background).
 Typically used for tracking.

`referrerpolicy`

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

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

`rel`

 For anchors containing the `href` attribute, this attribute specifies the relationship of the target object to the link object.
 The value is a space-separated list of link types.
 The values and their semantics will be registered by some authority that might have meaning to the document author.
 The default relationship, if no other is given, is void. Use this attribute only if the `href` attribute is present.

`shape`

The shape of the associated hot spot. The specifications for HTML defines the values `rect`, which defines a rectangular region; `circle`, which defines a circular region; `poly`, which defines a polygon; and `default`, which indicates the entire region beyond any defined shapes.

`target`

 A keyword or author-defined name of the browsing context to display the linked resource.
 The following keywords have special meanings:

* `_self` (default): Show the resource in the current browsing context.
* `_blank`: Show the resource in a new, unnamed browsing context.
* `_parent`: Show the resource in the parent browsing context of the current one, if the current page is inside a frame.
 If there is no parent, acts the same as `_self`.
* `_top`: Show the resource in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent).
 If there is no parent, acts the same as `_self`.

Use this attribute only if the `href` attribute is present.

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

Examples
--------

```html
<map name="primary">
  <area
 shape="circle"
 coords="75,75,75"
 href="left.html"
 alt="Click to go Left" />
  <area
 shape="circle"
 coords="275,75,75"
 href="right.html"
 alt="Click to go Right" />
</map>
<img
 usemap="#primary"
 src="https://via.placeholder.com/350x150"
 alt="350 x 150 pic" />
```

### Result

Technical summary
-----------------

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content.
  |
| Permitted content | None; it is a void element. |
| Tag omission | Must have a start tag and must not have an end tag. |
| Permitted parents | Any element that accepts phrasing content. The `<area>` element must have an ancestor `<map>`, but it need not be a direct parent. |
| Implicit ARIA role | `link` when `href` attribute is present, otherwise
 `generic` |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLAreaElement` |

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

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

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

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