<hgroup>: The Heading Group element - HTML: HyperText Markup Language

<hgroup>: The Heading Group element
===================================

The **`<hgroup>`** HTML element represents a heading and related content. It groups a single `<h1>–<h6>` element with one or more `<p>`.

Try it
------

**Note:** The `<hgroup>` element is not recommended as it does not work properly with assistive technologies. It was removed from the W3C HTML specification but is still part of the WHATWG specification and is at least partially supported by most browsers.

Attributes
----------

This element only includes the global attributes.

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

The `<hgroup>` element allows the grouping of a heading with any secondary content, such as subheadings, an alternative title, or tagline. Each of these types of content represented as a `<p>` element within the `<hgroup>`.

The `<hgroup>` itself has no impact on the document outline of a web page. Rather, the single allowed heading within the `<hgroup>` contributes to the document outline.

Examples
--------

```html
<!doctype html>
<title>HTML Standard</title>
<body>
  <hgroup id="document-title">
    <h1>HTML: Living Standard</h1>
    <p>Last Updated 12 July 2022</p>
  </hgroup>
  <p>Some intro to the document.</p>
  <h2>Table of contents</h2>
  <ol id="toc">
    …
  </ol>
  <h2>First section</h2>
  <p>Some intro to the first section.</p>
</body>
```

### Result

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

The `<hgroup>` presently has no strong accessibility semantics. The content of the element (a heading and optional paragraphs) is what is exposed by browser accessibility APIs.

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

|  |  |
| --- | --- |
| Content categories | Flow content, heading content, palpable content. |
| Permitted content |
 Zero or more `<p>` elements, followed by one
 h1, h2,
 h3, h4,
 h5, or h6 element,
 followed by zero or more `<p>` elements.
  |
| 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 | `HTMLElement` |

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

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

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

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

See also
--------

* Others section-related elements: `<body>`, `<article>`, `<section>`, `<aside>`, h1, h2, h3, h4, h5, h6, `<nav>`, `<header>`, `<footer>`, `<address>`;
* Sections and outlines of an HTML document.


<marquee>: The Marquee element - HTML: HyperText Markup Language

<marquee>: The Marquee 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 **`<marquee>`** HTML element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.

Attributes
----------

`behavior`
Deprecated

Sets how the text is scrolled within the marquee. Possible values are `scroll`, `slide` and `alternate`. If no value is specified, the default value is `scroll`.

`bgcolor`
Deprecated

Sets the background color through color name or hexadecimal value.

`direction`
Deprecated

Sets the direction of the scrolling within the marquee. Possible values are `left`, `right`, `up` and `down`. If no value is specified, the default value is `left`.

`height`
Deprecated

Sets the height in pixels or percentage value.

`hspace`
Deprecated

Sets the horizontal margin

`loop`
Deprecated

Sets the number of times the marquee will scroll. If no value is specified, the default value is −1, which means the marquee will scroll continuously.

`scrollamount`
Deprecated

Sets the amount of scrolling at each interval in pixels. The default value is 6.

`scrolldelay`
Deprecated

Sets the interval between each scroll movement in milliseconds. The default value is 85. Note that any value smaller than 60 is ignored and the value 60 is used instead unless `truespeed` is specified.

`truespeed`
Deprecated

By default, `scrolldelay` values lower than 60 are ignored. If `truespeed` is present, those values are not ignored.

`vspace`
Deprecated

Sets the vertical margin in pixels or percentage value.

`width`
Deprecated

Sets the width in pixels or percentage value.

Event handlers
--------------

`onbounce`

Fires when the marquee has reached the end of its scroll position. It can only fire when the behavior attribute is set to `alternate`.

`onfinish`

Fires when the marquee has finished the amount of scrolling that is set by the loop attribute. It can only fire when the loop attribute is set to some number that is greater than 0.

`onstart`

Fires when the marquee starts scrolling.

Methods
-------

`start()`

Starts scrolling of the marquee.

`stop()`

Stops scrolling of the marquee.

Examples
--------

```html
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee
 direction="down"
 width="250"
 height="200"
 behavior="alternate"
 style="border:solid">
  <marquee behavior="alternate">This text will bounce</marquee>
</marquee>
```

### Result

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

|  |  |
| --- | --- |
| DOM interface | `HTMLMarqueeElement` |

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

| Specification |
| --- |
| HTML Standard # the-marquee-element-2 |

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

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

See also
--------

* `HTMLMarqueeElement`


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

<map>: The Image Map element
============================

The **`<map>`** HTML element is used with `<area>` elements to define an image map (a clickable link area).

Try it
------

Attributes
----------

This element includes the global attributes.

`name`

The `name` attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the `name` attribute must not be equal to the value of the `name` attribute of another `<map>` element in the same document. If the `id` attribute is also specified, both attributes must have the same value.

Examples
--------

### Image map with two areas

Click the left-hand parrot for JavaScript, or the right-hand parrot for CSS.

#### HTML

```html
<!-- Photo by Juliana e Mariana Amorim on Unsplash -->
<map name="primary">
  <area
 shape="circle"
 coords="75,75,75"
 href="https://developer.mozilla.org/docs/Web/JavaScript"
 target="\_blank"
 alt="JavaScript" />
  <area
 shape="circle"
 coords="275,75,75"
 href="https://developer.mozilla.org/docs/Web/CSS"
 target="\_blank"
 alt="CSS" />
</map>
<img
 usemap="#primary"
 src="parrots.jpg"
 alt="350 x 150 picture of two parrots" />
```

#### Result

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content, palpable content.
  |
| Permitted content |
 Any
 transparent
 element.
  |
| 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 | No `role` permitted |
| DOM interface | `HTMLMapElement` |

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

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

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

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

See also
--------

* `<a>`
* `<area>`


<dir>: The Directory element - HTML: HyperText Markup Language

<dir>: The Directory 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 **`<dir>`** HTML element is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the user agent. Do not use this obsolete element; instead, you should use the `<ul>` element for lists, including lists of files.

**Warning:** Do not use this element. Though present in early HTML specifications, it has been deprecated in HTML 4, and has since been removed entirely. **No major browsers support this element.**

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

This element implements the `HTMLDirectoryElement` interface.

Attributes
----------

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

`compact`
Deprecated

This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent and it doesn't work in all browsers.

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

Not part of any current specifications.

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

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

See also
--------

* Other list-related HTML Elements: `<ol>`, `<ul>`, `<li>`, and `<menu>`;
* CSS properties that may be specially useful to style the `<dir>` element:
    + The `list-style` property, useful to choose the way the ordinal is displayed.
    + CSS counters, useful to handle complex nested lists.
    + The `line-height` property, useful to simulate the deprecated `compact` attribute.
    + The `margin` property, useful to control the indent of the list.


<datalist>: The HTML Data List element - HTML: HyperText Markup Language

<datalist>: The HTML Data List element
======================================

The **`<datalist>`** HTML element contains a set of `<option>` elements that represent the permissible or recommended options available to choose from within other controls.

Try it
------

 To bind the `<datalist>` element to the control, we give it a unique identifier in the `id` attribute, and then add the `list` attribute to the `<input>` element with the same identifier as value.
 Only certain types of `<input>` support this behavior, and it can also vary from browser to browser.

**Note:** The `<option>` element can store a value as internal content and in the `value` and `label` attributes. Which one will be visible in the drop-down menu depends on the browser, but when clicked, content entered into control field will always come from the `value` attribute.

Attributes
----------

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

Examples
--------

### Textual types

 Recommended values in types text, search, url, tel, email and number, are displayed in a drop-down menu when user clicks or double-clicks on the control.
 Typically the right side of a control will also have an arrow pointing to the presence of predefined values.

```html
<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>
```

### Date and Time types

 The types month, week, date, time and datetime-local can show an interface that allows a convenient selection of a date and time.
 Predefined values can be shown there, allowing the user to quickly fill the control value.

**Note:** When type is not supported, `text` type creating simple text field will be used instead. That field will correctly recognize recommended values and display them to the user in a drop-down menu.

```html
<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>
```

### Range type

The recommended values in the range type will be shown as series of hash marks that the user can easily select.

```html
<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>
```

### Color type

The color type can show predefined colors in a browser-provided interface.

```html
<label for="colors">Pick a color (preferably a red tone):</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>
```

### Password type

The specification allows linking `<datalist>` with a password type, but no browser supports it for security reasons.

```html
<label for="pwd">Enter a password:</label>
<input type="password" list="randomPassword" id="pwd" />
<datalist id="randomPassword">
  <option value="5Mg[\_3DnkgSu@!q#"></option>
</datalist>
```

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content.
  |
| Permitted content |
 Either
 phrasing content
 or zero or more `<option>` elements.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content.
  |
| Implicit ARIA role | listbox |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLDataListElement` |

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

When deciding to use the `<datalist>` element, here are some accessibility issues to be mindful of:

* The font size of the data list's options does not zoom, always remaining the same size. The contents of the autosuggest do not grow or shrink when the rest of the contents are zoomed in or out.
* As targeting the list of options with CSS is very limited to non-existent, rendering can not be styled for high-contrast mode.
* Some screen reader/browser combinations, including NVDA and Firefox, do not announce the contents of the autosuggest popup.
Specifications
--------------

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

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

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

See also
--------

* The `<input>` element, and more specifically its `list` attribute;
* The `<option>` element.


<dfn>: The Definition element - HTML: HyperText Markup Language

<dfn>: The Definition element
=============================

The **`<dfn>`** HTML element is used to indicate the term being defined within the context of a definition phrase or sentence. The ancestor `<p>` element, the `<dt>`/`<dd>` pairing, or the nearest `<section>` ancestor of the `<dfn>` element, is considered to be the definition of the term.

Try it
------

Attributes
----------

This element's attributes include the global attributes.

The `title` attribute has special meaning, as noted below.

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

There are some not-entirely-obvious aspects to using the `<dfn>` element. We examine those here.

### Specifying the term being defined

The term being defined is identified following these rules:

1. If the `<dfn>` element has a `title` attribute, the value of the `title` attribute is considered to be the term being defined. The element must still have text within it, but that text may be an abbreviation (perhaps using `<abbr>`) or another form of the term.
2. If the `<dfn>` contains a single child element and does not have any text content of its own, and the child element is an `<abbr>` element with a `title` attribute itself, then the exact value of the `<abbr>` element's `title` is the term being defined.
3. Otherwise, the text content of the `<dfn>` element is the term being defined. This is shown in the first example below.

**Note:** If the `<dfn>` element has a `title` attribute, it *must* contain the term being defined and no other text.

### Links to `<dfn>` elements

If you include an `id` attribute on the `<dfn>` element, you can then link to it using `<a>` elements. Such links should be uses of the term, with the intent being that the reader can quickly navigate to the term's definition if they're not already aware of it, by clicking on the term's link.

This is shown in the example under Links to definitions below.

Examples
--------

Let's take a look at some examples of various usage scenarios.

### Basic identification of a term

This example uses a plain `<dfn>` element to identify the location of a term within the definition.

#### HTML

```html
<p>
  The <strong>HTML Definition element (<dfn><dfn></dfn>)</strong> is used
  to indicate the term being defined within the context of a definition phrase
  or sentence.
</p>
```

Since the `<dfn>` element has no `title`, the text contents of the `<dfn>` element itself are used as the term being defined.

#### Result

### Links to definitions

To add links to the definitions, you create the link the same way you always do, with the `<a>` element.

#### HTML

```html
<p>
  The
  <strong>HTML Definition element (<dfn id="definition-dfn"><dfn></dfn>)</strong>
  is used to indicate the term being defined within the context of a definition
  phrase or sentence.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine
  voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete.
  Scrupulum, inquam, abeunti;
</p>

<p>
  Because of all of that, we decided to use the
  <code><a href="#definition-dfn"><dfn></a></code> element for this
  project.
</p>
```

Here we see the definition — now with an `id` attribute, `"definition-dfn"`, which can be used as the target of a link. Later on, a link is created using `<a>` with the `href` attribute set to `"#definition-dfn"` to set up the link back to the definition.

#### Result

### Using abbreviations and definitions together

In some cases, you may wish to use an abbreviation for a term when defining it. This can be done by using the `<dfn>` and `<abbr>` elements in tandem, like this:

#### HTML

```html
<p>
  The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> is among the
  most productive scientific instruments ever constructed. It has been in orbit
  for over 20 years, scanning the sky and returning data and photographs of
  unprecedented quality and detail.
</p>

<p>
  Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has arguably done
  more to advance science than any device ever built.
</p>
```

Note the `<abbr>` element nested inside the `<dfn>`. The former establishes that the term is an abbreviation ("HST") and specifies the full term ("Hubble Space Telescope") in its `title` attribute. The latter indicates that the abbreviated term represents a term being defined.

#### Result

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content, palpable content.
  |
| Permitted content | Phrasing content,
 but no `<dfn>` element must be a descendant.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content.
  |
| Implicit ARIA role | `term` |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` |

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

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

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

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

See also
--------

* Elements related to definition lists: `<dl>`, `<dt>`, `<dd>`
* `<abbr>`


<header>: The Header element - HTML: HyperText Markup Language

<header>: The Header element
============================

The **`<header>`** HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

Try it
------

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

The `<header>` element has an identical meaning to the site-wide `banner` landmark role, unless nested within sectioning content. Then, the `<header>` element is not a landmark.

The `<header>` element can define a global site header, described as a `banner` in the accessibility tree. It usually includes a logo, company name, search feature, and possibly the global navigation or a slogan. It is generally located at the top of the page.

Otherwise, it is a `section` in the accessibility tree, and usually contains the surrounding section's heading (an `h1` – `h6` element) and optional subheading, but this is **not** required.

### Historical Usage

The `<header>` element originally existed at the very beginning of HTML for headings. It is seen in the very first website. At some point, headings became `<h1>` through `<h6>`, allowing `<header>` to be free to fill a different role.

Attributes
----------

This element only includes the global attributes.

Examples
--------

### Page Header

```html
<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>
```

#### Result

### Article Header

```html
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>
```

#### Result

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

The `<header>` element defines a `banner` landmark when its context is the `<body>` element. The HTML header element is not considered a banner landmark when it is descendant of an `<article>`, `<aside>`, `<main>`, `<nav>`, or `<section>` element.

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 palpable content.
  |
| Permitted content | Flow content, but with no `<header>` or
 `<footer>` descendant.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 flow content. Note that a `<header>` element must not be a
 descendant of an `<address>`,
 `<footer>` or another
 `<header>` element.
  |
| Implicit ARIA role | banner, or
 generic
 if a descendant of an
 `article`, `aside`, `main`, `nav` or
 `section`
 element, or an element with
 `role=article`,
 `complementary`,
 `main`,
 `navigation`
 or
 `region` |
| Permitted ARIA roles | `group`, `presentation` or
 `none` |
| DOM interface | `HTMLElement` |

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

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

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

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

See also
--------

* Other section-related elements: `<body>`, `<nav>`, `<article>`, `<aside>`, h1, h2, h3, h4, h5, h6, `<footer>`, `<section>`, `<address>`.


<ol>: The Ordered List element - HTML: HyperText Markup Language

<ol>: The Ordered List element
==============================

The **`<ol>`** HTML element represents an ordered list of items — typically rendered as a numbered list.

Try it
------

Attributes
----------

This element also accepts the global attributes.

`reversed`

This Boolean attribute specifies that the list's items are in reverse order. Items will be numbered from high to low.

`start`

An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering `type` is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use `start="4"`.

`type`

Sets the numbering type:

* `a` for lowercase letters
* `A` for uppercase letters
* `i` for lowercase Roman numerals
* `I` for uppercase Roman numerals
* `1` for numbers (default)

The specified type is used for the entire list unless a different `type` attribute is used on an enclosed `<li>` element.

**Note:** Unless the type of the list number matters (like legal or technical documents where items are referenced by their number/letter), use the CSS `list-style-type` property instead.

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

Typically, ordered list items display with a preceding marker, such as a number or letter.

The `<ol>` and `<ul>` elements may nest as deeply as desired, alternating between `<ol>` and `<ul>` however you like.

The `<ol>` and `<ul>` elements both represent a list of items. The difference is with the `<ol>` element, the order is meaningful. For example:

* Steps in a recipe
* Turn-by-turn directions
* The list of ingredients in decreasing proportion on nutrition information labels

To determine which list to use, try changing the order of the list items; if the meaning changes, use the `<ol>` element — otherwise you can use `<ul>`.

Examples
--------

### Simple example

```html
<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>
```

#### Result

### Using Roman Numeral type

```html
<ol type="i">
  <li>Introduction</li>
  <li>List of Grievances</li>
  <li>Conclusion</li>
</ol>
```

#### Result

### Using the start attribute

```html
<p>Finishing places of contestants not in the winners' circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin' Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>
```

#### Result

### Nesting lists

```html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag is not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>
```

#### Result

### Unordered list inside ordered list

```html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag is not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>
```

#### Result

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

|  |  |
| --- | --- |
| Content categories | Flow content, and if the `<ol>` element's children include at least
 one `<li>` element,
 palpable content.
  |
| Permitted content |
 Zero or more `<li>`,
 `<script>` and
 `<template>` elements.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 flow content.
  |
| Implicit ARIA role | `list` |
| Permitted ARIA roles | `directory`, `group`,
 `listbox`, `menu`,
 `menubar`, `none`,
 `presentation`,
 `radiogroup`, `tablist`,
 `toolbar`, `tree` |
| DOM interface | `HTMLOListElement` |

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

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

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

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

See also
--------

* Other list-related HTML Elements: `<ul>`, `<li>`, `<menu>`
* CSS properties that may be specially useful to style the `<ol>` element:
    + the `list-style` property, to choose the way the ordinal displays
    + CSS counters, to handle complex nested lists
    + the `line-height` property, to simulate the deprecated `compact` attribute
    + the `margin` property, to control the list indentation


<tt>: The Teletype Text element - HTML: HyperText Markup Language

<tt>: The Teletype 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 **`<tt>`** HTML element creates inline text which is presented using the user agent's default monospace font face. This element was created for the purpose of rendering text as it would be displayed on a fixed-width display such as a teletype, text-only screen, or line printer.

The terms **non-proportional**, **monotype**, and **monospace** are used interchangeably and have the same general meaning: they describe a typeface whose characters are all the same number of pixels wide.

This element is obsolete, however. You should use the more semantically helpful `<code>`, `<kbd>`, `<samp>`, or `<var>` elements for inline text that needs to be presented in monospace type, or the `<pre>` tag for content that should be presented as a separate block.

**Note:** If none of the semantic elements are appropriate for your use case (for example, if you need to show some content in a non-proportional font), you should consider using the `<span>` element, styling it as desired using CSS. The `font-family` property is a good place to start.

Attributes
----------

This element only includes the global attributes

Examples
--------

### Basic example

This example uses `<tt>` to show text entered into, and output by, a terminal application.

```html
<p>
  Enter the following at the telnet command prompt:
  <code>set localecho</code><br />

  The telnet client should display: <tt>Local Echo is on</tt>
</p>
```

#### Result

### Overriding the default font

You can override the browser's default font—if the browser permits you to do so, which it isn't required to do—using CSS:

#### CSS

```css
tt {
  font-family: "Lucida Console", "Menlo", "Monaco", "Courier", monospace;
}
```

#### HTML

```html
<p>
  Enter the following at the telnet command prompt:
  <code>set localecho</code><br />

  The telnet client should display: <tt>Local Echo is on</tt>
</p>
```

#### Result

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

The `<tt>` element is, by default, rendered using the browser's default non-proportional font. You can override this using CSS by creating a rule using the `tt` selector, as seen in the example Overriding the default font above.

**Note:** User-configured changes to the default monospace font setting may take precedence over your CSS.

Although this element wasn't officially deprecated in HTML 4.01, its use was discouraged in favor of the semantic elements and/or CSS. The `<tt>` element is obsolete in HTML 5.

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.
  |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` |

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

| Specification |
| --- |
| HTML Standard # tt |

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

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

See also
--------

* The semantic `<code>`, `<var>`, `<kbd>`, and `<samp>` elements
* The `<pre>` element for displaying preformatted text blocks


<noframes>: The Frame Fallback element - HTML: HyperText Markup Language

<noframes>: The Frame Fallback 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 **`<noframes>`** HTML element provides content to be presented in browsers that don't support (or have disabled support for) the `<frame>` element. Although most commonly-used browsers support frames, there are exceptions, including certain special-use browsers including some mobile browsers, as well as text-mode browsers.

A `<noframes>` element can contain any HTML elements that are allowed within the body of an HTML document, except for the `<frameset>` and `<frame>` elements, since using frames when they aren't supported doesn't make sense.

`<noframes>` can be used to present a message explaining that the user's browser doesn't support frames, but ideally should be used to present an alternate form of the site that doesn't use frames but still offers the same or similar functionality.

**Note:** This element is obsolete and shouldn't be used, since the `<frame>` and `<frameset>` elements are also obsolete. When frames are needed at all, they should be presented using the `<iframe>` element.

Attributes
----------

Like all other HTML elements, this element supports the global attributes. It has no other attributes available.

Example
-------

In this example, we see a frameset with two frames. In addition, `<noframes>` is used to present an explanatory message if the user agent doesn't support frames.

```html
<!doctype html>
<html lang="en-US">
  <head>
    <!-- Document metadata goes here -->
  </head>
  <frameset rows="45%, 55%">
    <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" />
    <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
    <noframes>
      <p>
        It seems your browser does not support frames or is configured to not
        allow them.
      </p>
    </noframes>
  </frameset>
</html>
```

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

| Specification |
| --- |
| HTML Standard # noframes |

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

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

See also
--------

* `<frameset>`
* `<frame>`


<frameset> - HTML: HyperText Markup Language

<frameset>
==========

**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 **`<frameset>`** HTML element is used to contain `<frame>` elements.

**Note:** Because the use of frames is now discouraged in favor of using `<iframe>`, this element is not typically used by modern websites.

Attributes
----------

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

`cols`
Deprecated

This attribute specifies the number and size of horizontal spaces in a frameset.

`rows`
Deprecated

This attribute specifies the number and size of vertical spaces in a frameset.

Example
-------

### A frameset document

A frameset document has a `<frameset>` element instead of a `<body>` element. The `<frame>` elements are placed within the `<frameset>`.

```html
<!doctype html>
<html lang="en-US">
  <head>
    <!-- Document metadata goes here -->
  </head>
  <frameset cols="50%, 50%">
    <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" />
    <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
  </frameset>
</html>
```

If you want to embed another HTML page into the `<body>` of a document, use an `<iframe>` element.

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

| Specification |
| --- |
| HTML Standard # frameset |

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

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

See also
--------

* `<frame>`
* `<iframe>`


<form>: The Form element - HTML: HyperText Markup Language

<form>: The Form element
========================

The **`<form>`** HTML element represents a document section containing interactive controls for submitting information.

Try it
------

It is possible to use the `:valid` and `:invalid` CSS pseudo-classes to style a `<form>` element based on whether the `elements` inside the form are valid.

Attributes
----------

This element includes the global attributes.

`accept`
Deprecated

Comma-separated content types the server accepts.

**Note:** **This attribute has been deprecated and should not be used.** Instead, use the `accept` attribute on `<input type=file>` elements.

`accept-charset`

 Space-separated character encodings the server accepts. The browser uses them in the order in which they are listed. The default value means the same encoding as the page.
 (In previous versions of HTML, character encodings could also be delimited by commas.)

`autocapitalize`

Controls whether inputted text is automatically capitalized and, if so, in what manner. See the `autocapitalize` global attribute page for more information.

`autocomplete`

Indicates whether input elements can by default have their values automatically completed by the browser. `autocomplete` attributes on form elements override it on `<form>`. Possible values:

* `off`: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see The autocomplete attribute and login fields.)
* `on`: The browser may automatically complete entries.

`name`

The name of the form. The value must not be the empty string, and must be unique among the `form` elements in the forms collection that it is in, if any.

`rel`

Controls the annotations and what kinds of links the form creates. Annotations include `external`, `nofollow`, `opener`, `noopener`, and `noreferrer`. Link types include `help`, `prev`, `next`, `search`, and `license`. The `rel` value is a space-separated list of these enumerated values.

### Attributes for form submission

The following attributes control behavior during form submission.

`action`

The URL that processes the form submission. This value can be overridden by a `formaction` attribute on a `<button>`, `<input type="submit">`, or `<input type="image">` element. This attribute is ignored when `method="dialog"` is set.

`enctype`

If the value of the `method` attribute is `post`, `enctype` is the MIME type of the form submission. Possible values:

* `application/x-www-form-urlencoded`: The default value.
* `multipart/form-data`: Use this if the form contains `<input>` elements with `type=file`.
* `text/plain`: Useful for debugging purposes.

This value can be overridden by `formenctype` attributes on `<button>`, `<input type="submit">`, or `<input type="image">` elements.

`method`

 The HTTP method to submit the form with.
 The only allowed methods/values are (case insensitive):

* `post`: The `POST` method; form data sent as the request body.
* `get` (default): The `GET`; form data appended to the `action` URL with a `?` separator. Use this method when the form has no side effects.
* `dialog`: When the form is inside a `<dialog>`, closes the dialog and causes a `submit` event to be fired on submission, without submitting data or clearing the form.

This value is overridden by `formmethod` attributes on `<button>`, `<input type="submit">`, or `<input type="image">` elements.

`novalidate`

This Boolean attribute indicates that the form shouldn't be validated when submitted. If this attribute is not set (and therefore the form ***is*** validated), it can be overridden by a `formnovalidate` attribute on a `<button>`, `<input type="submit">`, or `<input type="image">` element belonging to the form.

`target`

Indicates where to display the response after submitting the form. It is a name/keyword for a *browsing context* (for example, tab, window, or iframe). The following keywords have special meanings:

* `_self` (default): Load into the same browsing context as the current one.
* `_blank`: Load into a new unnamed browsing context. This provides the same behavior as setting `rel="noopener"` which does not set `window.opener`.
* `_parent`: Load into the parent browsing context of the current one. If no parent, behaves the same as `_self`.
* `_top`: Load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). If no parent, behaves the same as `_self`.

This value can be overridden by a `formtarget` attribute on a `<button>`, `<input type="submit">`, or `<input type="image">` element.

Examples
--------

```html
<!-- Form which will send a GET request to the current URL -->
<form method="get">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>
```

### Result

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 palpable content |
| Permitted content | Flow content, but not containing `<form>` elements |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 flow content |
| Implicit ARIA role | `form` |
| Permitted ARIA roles | `search`,
 `none`
 or `presentation` |
| DOM interface | `HTMLFormElement` |

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

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

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

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

See also
--------

* HTML forms guide
* Other elements that are used when creating forms: `<button>`, `<datalist>`, `<fieldset>`, `<input>`, `<label>`, `<legend>`, `<meter>`, `<optgroup>`, `<option>`, `<output>`, `<progress>`, `<select>`, `<textarea>`.
* Getting a list of the elements in the form: `HTMLFormElement.elements`
* ARIA: Form role
* ARIA: Search role


<var>: The Variable element - HTML: HyperText Markup Language

<var>: The Variable element
===========================

The **`<var>`** HTML element represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent.

Try it
------

Attributes
----------

This element only includes the global attributes.

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

### Related elements

Other elements that are used in contexts in which `<var>` is commonly used include:

* `<code>`: The HTML Code element
* `<kbd>`: The HTML Keyboard input element
* `<samp>`: The HTML Sample Output element

If you encounter code that is mistakenly using `<var>` for style purposes rather than semantic purposes, you should either use a `<span>` with appropriate CSS or, an appropriate semantic element among the following:

* `<em>`
* `<i>`
* `<q>`
### Default style

Most browsers apply `font-style` to `"italic"` when rendering `<var>`. This can be overridden in CSS, like this:

```css
var {
  font-style: normal;
}
```

Examples
--------

### Basic example

Here's a simple example, using `<var>` to denote variable names in a mathematical equation.

```html
<p>A simple equation: <var>x</var> = <var>y</var> + 2</p>
```

#### Result

### Overriding the default style

Using CSS, you can override the default style for the `<var>` element. In this example, variable names are rendered using bold Courier if it's available, otherwise it falls back to the default monospace font.

#### CSS

```css
var {
  font:
    bold 15px "Courier",
    "Courier New",
    monospace;
}
```

#### HTML

```html
<p>
  The variables <var>minSpeed</var> and <var>maxSpeed</var> control the minimum
  and maximum speed of the apparatus in revolutions per minute (RPM).
</p>
```

This HTML uses `<var>` to enclose the names of two variables.

#### 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-var-element |

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

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


<param>: The Object Parameter element - HTML: HyperText Markup Language

<param>: The Object Parameter 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 **`<param>`** HTML element defines parameters for an `<object>` element.

Attributes
----------

This element includes the global attributes.

`name`
Deprecated

Name of the parameter.

`value`
Deprecated

Specifies the value of the parameter.

`type`
Deprecated

Only used if the `valuetype` is set to `ref`. Specifies the MIME type of values found at the URI specified by value.

`valuetype`
Deprecated

Specifies the type of the `value` attribute. Possible values are:

* `data`: Default value. The value is passed to the object's implementation as a string.
* `ref`: The value is a URI to a resource where run-time values are stored.
* `object`: An ID of another `<object>` in the same document.

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

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | None; it is a void element. |
| Tag omission |
 As it is a void element, the start tag must be present and the end tag
 must not be present.
  |
| Permitted parents |
 An `<object>` before any
 flow content.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLParamElement` |

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

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

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

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

See also
--------

* `<object>`


<code>: The Inline Code element - HTML: HyperText Markup Language

<code>: The Inline Code element
===============================

The **`<code>`** HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.

Try it
------

Attributes
----------

This element only includes the global attributes.

Examples
--------

A paragraph of text that includes `<code>`:

```html
<p>
  The function <code>selectAll()</code> highlights all the text in the input
  field so the user can, for example, copy or delete the text.
</p>
```

### Result

Notes
-----

To represent multiple lines of code, wrap the `<code>` element within a `<pre>` element. The `<code>` element by itself only represents a single phrase of code or line of code.

A CSS rule can be defined for the `code` selector to override the browser's default font face. Preferences set by the user might take precedence over the specified CSS.

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 | `code` |
| 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-code-element |

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

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

See also
--------

* `<samp>`
* `<kbd>`
* `<var>`
* `<pre>`


<li>: The List Item element - HTML: HyperText Markup Language

<li>: The List Item element
===========================

The **`<li>`** HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (`<ol>`), an unordered list (`<ul>`), or a menu (`<menu>`). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.

Try it
------

Attributes
----------

This element includes the global attributes.

`value`

This integer attribute indicates the current ordinal value of the list item as defined by the `<ol>` element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The **value** attribute has no meaning for unordered lists (`<ul>`) or for menus (`<menu>`).

`type`
Deprecated

Non-standard

This character attribute indicates the numbering type:

* `a`: lowercase letters
* `A`: uppercase letters
* `i`: lowercase Roman numerals
* `I`: uppercase Roman numerals
* `1`: numbers

This type overrides the one used by its parent `<ol>` element, if any.

**Note:** This attribute has been deprecated; use the CSS `list-style-type` property instead.

Examples
--------

For more detailed examples, see the `<ol>` and `<ul>` pages.

### Ordered list

```html
<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>
```

#### Result

### Ordered list with a custom value

```html
<ol type="I">
  <li value="3">third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
</ol>
```

#### Result

### Unordered list

```html
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>
```

#### Result

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

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | Flow content. |
| Tag omission |
 The end tag can be omitted if the list item is immediately followed by
 another `<li>` element, or if there is no more
 content in its parent element.
  |
| Permitted parents |
 An `<ul>`, `<ol>`, or
 `<menu>` element. Though not a conforming usage,
 the obsolete `<dir>` can also be a parent.
  |
| Implicit ARIA role | `listitem`
 when child of an
 `ol`, `ul` or
 `menu` |
| Permitted ARIA roles | `menuitem`,
 `menuitemcheckbox`,
 `menuitemradio`, `option`,
 `none`, `presentation`,
 `radio`, `separator`,
 `tab`, `treeitem` |
| DOM interface | `HTMLLIElement` |

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

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

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

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

See also
--------

* Other list-related HTML Elements: `<ul>`, `<ol>`, `<menu>`, and the obsolete `<dir>`;
* CSS properties that may be specially useful to style the `<li>` element:
    + the `list-style` property, to choose the way the ordinal is displayed,
    + CSS counters, to handle complex nested lists,
    + the `margin` property, to control the indent of the list item.


<div>: The Content Division element - HTML: HyperText Markup Language

<div>: The Content Division element
===================================

The **`<div>`** HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).

Try it
------

As a "pure" container, the `<div>` element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the `class` or `id` attributes, marking a section of a document as being written in a different language (using the `lang` attribute), and so on.

Attributes
----------

This element includes the global attributes.

**Note:** The `align` attribute is obsolete; do not use it anymore. Instead, you should use CSS properties or techniques such as CSS Grid or CSS Flexbox to align and position `<div>` elements on the page.

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

* The `<div>` element should be used only when no other semantic element (such as `<article>` or `<nav>`) is appropriate.
Accessibility concerns
----------------------

The `<div>` element has an implicit role of `generic`, and not none. This may affect certain ARIA combination declarations that expect a direct descendant element with a certain role to function properly.

Examples
--------

### A simple example

```html
<div>
  <p>
    Any kind of content here. Such as <p>, <table>. You name it!
  </p>
</div>
```

#### Result

### A styled example

This example creates a shadowed box by applying a style to the `<div>` using CSS. Note the use of the `class` attribute on the `<div>` to apply the style named `"shadowbox"` to the element.

#### HTML

```html
<div class="shadowbox">
  <p>Here's a very interesting note displayed in a lovely shadowed box.</p>
</div>
```

#### CSS

```css
.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
```

#### Result

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

|  |  |
| --- | --- |
| Content categories | Flow content, palpable content. |
| Permitted content | Flow content.Or (in WHATWG HTML): If the parent is a
 `<dl>` element: one or more
 `<dt>` elements followed by one or more
 `<dd>` elements, optionally intermixed with
 `<script>` and
 `<template>` elements.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 flow content.Or (in WHATWG HTML):
 `<dl>` element.
  |
| Implicit ARIA role | `generic` |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLDivElement` |

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

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

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

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

See also
--------

* Semantic sectioning elements: `<section>`, `<article>`, `<nav>`, `<header>`, `<footer>`
* `<span>` element for styling of phrasing content


<colgroup>: The Table Column Group element - HTML: HyperText Markup Language

<colgroup>: The Table Column Group element
==========================================

The **`<colgroup>`** HTML element defines a group of columns within a table.

Try it
------

Attributes
----------

This element's attributes include the global attributes.

`span`

This attribute contains a positive integer indicating the number of consecutive columns the `<colgroup>` element spans. If not present, its default value is `1`.

The `span` attribute is not permitted if there are one or more `<col>` elements within the `<colgroup>`.

### Deprecated attributes

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

`align`
Deprecated

This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are:

* `left`, aligning the content to the left of the cell
* `center`, centering the content in the cell
* `right`, aligning the content to the right of the cell
* `justify`, inserting spaces into the textual content so that the content is justified in the cell
* `char`, aligning the textual content on a special character with a minimal offset, defined by the `char` and `charoff` attributes.

If this attribute is not set, the `left` value is assumed. The descendant `<col>` elements may override this value using their own `align` attribute.

**Note:** Do not try to set the `text-align` property on a selector giving a `<colgroup>` element. Because `<td>` elements are not descendant of the `<colgroup>` element, they won't inherit it.

If the table doesn't use a `colspan` attribute, use one `td:nth-child(an+b)` CSS selector per column, where 'a' is the total number of the columns in the table and 'b' is the ordinal position of this column in the table. Only after this selector the `text-align` property can be used.

If the table does use a `colspan` attribute, the effect can be achieved by combining adequate CSS attribute selectors like `[colspan=n]`, though this is not trivial.

`bgcolor`
Deprecated

The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed by a '`#`'. One of the predefined color keywords can also be used.

To achieve a similar effect, use the CSS `background-color` property.

`char`
Deprecated

This attribute specifies the alignment of the content in a column group to a character. Typical values for this include a period (.) when attempting to align numbers or monetary values. If `align` is not set to `char`, this attribute is ignored, though it will still be used as the default value for the `align` of the `<col>` which are members of this column group.

`charoff`
Deprecated

This attribute is used to indicate the number of characters to offset the column data from the alignment character specified by the `char` attribute.

`valign`
Deprecated

This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are:

* `baseline`, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as `bottom`.
* `bottom`, which will put the text as close to the bottom of the cell as it is possible;
* `middle`, which will center the text in the cell;
* and `top`, which will put the text as close to the top of the cell as it is possible.

**Note:** Do not try to set the `vertical-align` property on a selector giving a `<colgroup>` element. Because `<td>` elements are not descendant of the `<colgroup>` element, they won't inherit it.

If the table doesn't use a `colspan` attribute, use the `td:nth-child(an+b)` CSS selector per column, where 'a' is the total number of the columns in the table and 'b' is the ordinal position of the column in the table. Only after this selector the `vertical-align` property can be used.

If the table does use a `colspan` attribute, the effect can be achieved by combining adequate CSS attribute selectors like `[colspan=n]`, though this is not trivial.

Examples
--------

Please see the `<table>` page for examples on `<colgroup>`.

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

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content |
 If the `span` attribute is
 present: none.If
 the attribute is not present: zero or more `<col>`
 element
  |
| Tag omission |
 The start tag may be omitted, if it has a `<col>`
 element as its first child and if it is not preceded by a
 `<colgroup>` whose end tag has been omitted.The
 end tag may be omitted, if it is not followed by a space or a comment.
  |
| Permitted parents |
 A `<table>` element. The
 `<colgroup>` must appear after any optional
 `<caption>` element but before any
 `<thead>`, `<th>`,
 `<tbody>`, `<tfoot>` and
 `<tr>` element.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLTableColElement` |

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

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

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

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

See also
--------

* CSS properties and pseudo-classes that may be specially useful to style the `<col>` element:
    + the `width` property to control the width of the column;
    + the `:nth-child` pseudo-class to set the alignment on the cells of the column;
    + the `text-align` property to align all cells content on the same character, like '.'.


<body>: The Document Body element - HTML: HyperText Markup Language

<body>: The Document Body element
=================================

The **`<body>`** HTML element represents the content of an HTML document. There can be only one `<body>` element in a document.

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | Flow content. |
| Tag omission |
 The start tag may be omitted if the first thing inside it is not a space
 character, comment, `<script>` element or
 `<style>` element. The end tag may be omitted if
 the `<body>` element has contents or has a start tag,
 and is not immediately followed by a comment.
  |
| Permitted parents |
 It must be the second element of an `<html>`
 element.
  |
| Implicit ARIA role | `generic` |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLBodyElement`* The `<body>` element exposes the
 `HTMLBodyElement` interface.
* You can access the `<body>` element through the
 `document.body` property.
 |

Attributes
----------

This element includes the global attributes.

`alink`
Deprecated

 Color of text for hyperlinks when selected.
 **Do not use this attribute! Use the CSS `color` property in conjunction with the `:active` pseudo-class instead.**

`background`
Deprecated

 URI of an image to use as a background.
 **Do not use this attribute! Use the CSS `background` property on the element instead.**

`bgcolor`
Deprecated

 Background color for the document.
 **Do not use this attribute! Use the CSS `background-color` property on the element instead.**

`bottommargin`
Deprecated

 The margin of the bottom of the body.
 **Do not use this attribute! Use the CSS `margin-bottom` property on the element instead.**

`leftmargin`
Deprecated

 The margin of the left of the body.
 **Do not use this attribute! Use the CSS `margin-left` property on the element instead.**

`link`
Deprecated

 Color of text for unvisited hypertext links.
 **Do not use this attribute! Use the CSS `color` property in conjunction with the `:link` pseudo-class instead.**

`onafterprint`

Function to call after the user has printed the document.

`onbeforeprint`

Function to call when the user requests printing of the document.

`onbeforeunload`

Function to call when the document is about to be unloaded.

`onblur`

Function to call when the document loses focus.

`onerror`

Function to call when the document fails to load properly.

`onfocus`

Function to call when the document receives focus.

`onhashchange`

Function to call when the fragment identifier part (starting with the hash (`'#'`) character) of the document's current address has changed.

`onlanguagechange`

Function to call when the preferred languages changed.

`onload`

Function to call when the document has finished loading.

`onmessage`

Function to call when the document has received a message.

`onoffline`

Function to call when network communication has failed.

`ononline`

Function to call when network communication has been restored.

`onpopstate`

Function to call when the user has navigated session history.

`onredo`

Function to call when the user has moved forward in undo transaction history.

`onresize`

Function to call when the document has been resized.

`onstorage`

Function to call when the storage area has changed.

`onundo`

Function to call when the user has moved backward in undo transaction history.

`onunload`

Function to call when the document is going away.

`rightmargin`
Deprecated

 The margin of the right of the body.
 **Do not use this attribute! Use the CSS `margin-right` property on the element instead.**

`text`
Deprecated

 Foreground color of text.
 **Do not use this attribute! Use CSS `color` property on the element instead.**

`topmargin`
Deprecated

 The margin of the top of the body.
 **Do not use this attribute! Use the CSS `margin-top` property on the element instead.**

`vlink`
Deprecated

 Color of text for visited hypertext links.
 **Do not use this attribute! Use the CSS `color` property in conjunction with the `:visited` pseudo-class instead.**

Examples
--------

```html
<html lang="en">
  <head>
    <title>Document title</title>
  </head>
  <body>
    <p>
      The <code><body></code> HTML element represents the content of an
      HTML document. There can be only one <code><body></code> element in
      a document.
    </p>
  </body>
</html>
```

### Result

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

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

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

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

See also
--------

* `<html>`
* `<head>`


<button>: The Button element - HTML: HyperText Markup Language

<button>: The Button element
============================

The **`<button>`** HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.

By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons' appearance with CSS.

Try it
------

Attributes
----------

This element's attributes include the global attributes.

`autofocus`

This Boolean attribute specifies that the button should have input focus when the page loads. **Only one element in a document can have this attribute.**

`disabled`

This Boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused.

Firefox, unlike other browsers, persists the dynamic disabled state of a `<button>` across page loads. To control this feature, use the `autocomplete` attribute.

`form`

The `<form>` element to associate the button 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 `<button>` is associated with its ancestor `<form>` element, if any.)

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

`formaction`

The URL that processes the information submitted by the button. Overrides the `action` attribute of the button's form owner. Does nothing if there is no form owner.

`formenctype`

If the button is a submit button (it's inside/associated with a `<form>` and doesn't have `type="button"`), specifies how to encode the form data that is submitted. Possible values:

* `application/x-www-form-urlencoded`: The default if the attribute is not used.
* `multipart/form-data`: Used to submit `<input>` elements with their `type` attributes set to `file`.
* `text/plain`: Specified as a debugging aid; shouldn't be used for real form submission.

If this attribute is specified, it overrides the `enctype` attribute of the button's form owner.

`formmethod`

If the button is a submit button (it's inside/associated with a `<form>` and doesn't have `type="button"`), this attribute specifies the HTTP method used to submit the form. Possible values:

* `post`: The data from the form are included in the body of the HTTP request when sent to the server. Use when the form contains information that shouldn't be public, like login credentials.
* `get`: The form data are appended to the form's `action` URL, with a `?` as a separator, and the resulting URL is sent to the server. Use this method when the form has no side effects, like search forms.
* `dialog`: This method is used to indicate that the button closes the dialog with which it is associated, and does not transmit the form data at all.

If specified, this attribute overrides the `method` attribute of the button's form owner.

`formnovalidate`

If the button is a submit button, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the `novalidate` attribute of the button's form owner.

This attribute is also available on `<input type="image">` and `<input type="submit">` elements.

`formtarget`

If the button is a submit button, this attribute is an author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. This is the `name` of, or keyword for, a *browsing context* (a tab, window, or `<iframe>`). If this attribute is specified, it overrides the `target` attribute of the button's form owner. The following keywords have special meanings:

* `_self`: Load the response into the same browsing context as the current one. This is the default if the attribute is not specified.
* `_blank`: Load the response into a new unnamed browsing context — usually a new tab or window, depending on the user's browser settings.
* `_parent`: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`.
* `_top`: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`.

`name`

The name of the button, submitted as a pair with the button's `value` as part of the form data, when that button is used to submit the form.

`popovertarget`

Turns a `<button>` element into a popover control button; takes the ID of the popover element to control as its value. See the Popover API landing page for more details.

`popovertargetaction`

Specifies the action to be performed on a popover element being controlled by a control `<button>`. Possible values are:

`"hide"`

The button will hide a shown popover. If you try to hide an already hidden popover, no action will be taken.

`"show"`

The button will show a hidden popover. If you try to show an already showing popover, no action will be taken.

`"toggle"`

The button will toggle a popover between showing and hidden. If the popover is hidden, it will be shown; if the popover is showing, it will be hidden. If `popovertargetaction` is omitted, `"toggle"` is the default action that will be performed by the control button.

`type`

The default behavior of the button. Possible values are:

* `submit`: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a `<form>`, or if the attribute is an empty or invalid value.
* `reset`: The button resets all the controls to their initial values, like <input type="reset">. (This behavior tends to annoy users.)
* `button`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.

`value`

Defines the value associated with the button's `name` when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.

Notes
-----

A submit button with the attribute `formaction` set, but without an associated form does nothing. You have to set a form owner, either by wrapping it in a `<form>` or set the attribute `form` to the id of the form.

`<button>` elements are much easier to style than `<input>` elements. You can add inner HTML content (think `<i>`, `<br>`, or even `<img>`), and use `::after` and `::before` pseudo-elements for complex rendering.

If your buttons are not for submitting form data to a server, be sure to set their `type` attribute to `button`. Otherwise they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document.

While `<button type="button">` has no default behavior, event handlers can be scripted to trigger behaviors. An activated button can perform programmable actions using JavaScript, such as removing an item from a list.

Examples
--------

```html
<button name="button">Press me</button>
```

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

### Icon buttons

Buttons that only show an icon to represent do not have an *accessible name*. Accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate an accessibility tree. Assistive technology then uses the accessibility tree to navigate and manipulate page content.

To give an icon button an accessible name, put text in the `<button>` element that concisely describes the button's functionality.

#### Examples

```html
<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  </svg>
  Add to favorites
</button>
```

##### Result

If you want to visually hide the button's text, an accessible way to do so is to use a combination of CSS properties to remove it visually from the screen, but keep it parsable by assistive technology.

However, it is worth noting that leaving the button text visually apparent can aid people who may not be familiar with the icon's meaning or understand the button's purpose. This is especially relevant for people who are not technologically sophisticated, or who may have different cultural interpretations for the icon the button uses.

* What is an accessible name? | The Paciello Group
* MDN Understanding WCAG, Guideline 4.1 explanations
* Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0
### Size and Proximity

#### Size

Interactive elements such as buttons should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 CSS pixels is recommended.

* Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
* Target Size and 2.5.5 | Adrian Roselli
* Quick test: Large touch targets - The A11Y Project

#### Proximity

Large amounts of interactive content — including buttons — placed in close visual proximity to each other should have space separating them. This spacing is beneficial for people who are experiencing motor control issues, who may accidentally activate the wrong interactive content.

Spacing may be created using CSS properties such as `margin`.

* Hand tremors and the giant-button-problem - Axess Lab
### ARIA state information

To describe the state of a button the correct ARIA attribute to use is `aria-pressed` and not `aria-checked` or `aria-selected`. To find out more read the information about the ARIA button role.

### Firefox

Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using `button::-moz-focus-inner { }`.

If overridden, it is important to **ensure that the state change when focus is moved to the button is high enough** that people experiencing low vision conditions will be able to perceive it.

Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and `bold` or larger, or 24px or larger.)

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
### Clicking and focus

Whether clicking on a `<button>` or `<input>` button types causes it to (by default) become focused varies by browser and OS. Most browsers do give focus to a button being clicked, but Safari does not, by design.

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content,
 Interactive content,
 listed,
 labelable, and
 submittable
form-associated
 element, palpable content.
  |
| Permitted content | Phrasing content
 but there must be no
 Interactive content |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content.
  |
| Implicit ARIA role | `button` |
| Permitted ARIA roles | `checkbox`, `combobox`,
 `link`, `menuitem`,
 `menuitemcheckbox`,
 `menuitemradio`, `option`,
 `radio`, `switch`,
 `tab` |
| DOM interface | `HTMLButtonElement` |

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

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

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

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


<table>: The Table element - HTML: HyperText Markup Language

<table>: The Table element
==========================

The **`<table>`** HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

Try it
------

|  |  |
| --- | --- |
| Content categories | Flow content |
| Permitted content | In this order:
 1. an optional `<caption>` element,
2. zero or more `<colgroup>` elements,
3. an optional `<thead>` element,
4. either one of the following:
    * zero or more `<tbody>` elements
    * one or more `<tr>` elements
5. an optional `<tfoot>` element
 |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts flow content |
| Implicit ARIA role | `table` |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLTableElement` |

Attributes
----------

This element includes the global attributes.

### Deprecated attributes

`align`
Deprecated

This enumerated attribute indicates how the table must be aligned inside the containing document. It may have the following values:

* `left`: the table is displayed on the left side of the document;
* `center`: the table is displayed in the center of the document;
* `right`: the table is displayed on the right side of the document.

Set `margin-left` and `margin-right` to achieve an effect that is similar to the align attribute:

* `left`: `margin-right: auto; margin-left: 0;`
* `center`: `margin-right: auto; margin-left: auto;`
* `right`: `margin-right: 0; margin-left: auto;`

`bgcolor`
Deprecated

The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed by a '`#`'. One of the predefined color keywords can also be used.

To achieve a similar effect, use the CSS `background-color` property.

`border`
Deprecated

This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the `frame` attribute is set to void.

To achieve a similar effect, use the CSS `border` shorthand property.

`cellpadding`
Deprecated

This attribute defines the space between the content of a cell and its border, displayed or not. If the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. If the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. The same is true for the total horizontal space (left and right).

To achieve a similar effect, apply the `border-collapse` property to the `<table>` element, with its value set to collapse, and the `padding` property to the `<td>` elements.

`cellspacing`
Deprecated

This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.

To achieve a similar effect, apply the `border-spacing` property to the `<table>` element. `border-spacing` does not have any effect if `border-collapse` is set to collapse.

`frame`
Deprecated

This enumerated attribute defines which side of the frame surrounding the table must be displayed.

To achieve a similar effect, use the `border-style` and `border-width` properties.

`rules`
Deprecated

This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:

* `none`, which indicates that no rules will be displayed; it is the default value;
* `groups`, which will cause the rules to be displayed between row groups (defined by the `<thead>`, `<tbody>` and `<tfoot>` elements) and between column groups (defined by the `<col>` and `<colgroup>` elements) only;
* `rows`, which will cause the rules to be displayed between rows;
* `cols`, which will cause the rules to be displayed between columns;
* `all`, which will cause the rules to be displayed between rows and columns.

To achieve a similar effect, apply the `border` property to the appropriate `<thead>`, `<tbody>`, `<tfoot>`, `<col>`, or `<colgroup>` elements.

`summary`
Deprecated

This attribute defines an alternative text that summarizes the content of the table. Use the `<caption>` element instead.

`width`
Deprecated

This attribute defines the width of the table. Use the CSS `width` property instead.

**Note:** While no HTML specification includes `height` as a `<table>` attribute, some browsers support a non-standard interpretation of `height`. The unitless value sets a minimum absolute height in pixels. If set as a percent value, the minimum table height will be relative to the height of the parent container.

Visual layout of table contents
-------------------------------

Following elements are part of the table structure:

* `<caption>`
* `<thead>`
* `<colgroup>`
* `<col>`
* `<th>`
* `<tbody>`
* `<tr>`
* `<td>`
* `<tfoot>`

The `<table>` box establishes a table formatting context. Elements inside the `<table>` generate rectangular boxes. Each box occupies a number of table cells according to the following rules:

1. The row boxes fill the table in the source code order from top to bottom. Each row box occupies one row of cells.
2. A row group box occupies one or more row boxes.
3. Column boxes are placed next to each other in source code order. Depending on the value of the `dir` attribute, the columns are laid in left-to-right or right-to-left direction. A column box occupies one or more columns of table cells.
4. A column group box occupies one or more column boxes.
5. A cell box may span over multiple rows and columns. User agents trim cells to fit in the available number of rows and columns.

Table cells do have padding. Boxes that make up a table do not have margins.

### Table layers and transparency

For styling purpose the table elements may be thought of as being put on six superimposed layers:

![Table element layers](/en-US/docs/Web/HTML/Element/table/table_element_layers.png)

The background set on an element in one layer will be visible only if the layers above it have transparent background. A missing cell is rendered as if an anonymous table-cell box occupied that place.

Examples
--------

### Simple table

```html
<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>
```

#### Result

### Further simple examples

```html
<p>Simple table with header</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

<p>Table with colgroup</p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington, D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

<p>Table with colgroup and col</p>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

<p>Simple table with caption</p>
<table>
  <caption>
    Awesome caption
  </caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>
```

```
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  padding: 5px;
  border: 1px solid black;
}
```

#### Result

### Table sorting

#### Sorting table rows

There are no native methods for sorting the rows (`<tr>` elements) of an HTML table. But using `Array.prototype.slice()`, `Array.prototype.sort()`, `Node.removeChild()`, and `Node.appendChild()`, you can implement your own `sort()` function to sort an `HTMLCollection` of `<tr>` elements.

In the below example, you can see such an example. We are attaching it to the <tbody> element so that it sorts the table cells in order of increasing value, and updates the display to suit.

##### HTML

```html
<table>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>
```

##### JavaScript

```js
HTMLTableSectionElement.prototype.sort = function (cb) {
  Array.from(this.rows)
    .sort(cb)
    .forEach((e) => this.appendChild(this.removeChild(e)));
};

document
  .querySelector("table")
  .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
```

##### Result

#### Sorting rows with a click on the th element

The following example adds an event handler to every `<th>` element of every `<table>` in the `document`; it sorts all the `<tbody>`'s rows, basing the sorting on the `td` cells contained in the rows.

**Note:** This solution assumes that the `<td>` elements are populated by raw text with no descendant elements.

##### HTML

```html
<table>
  <thead>
    <tr>
      <th>Numbers</th>
      <th>Letters</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>A</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
    </tr>
    <tr>
      <td>1</td>
      <td>C</td>
    </tr>
  </tbody>
</table>
```

##### JavaScript

```js
const allTables = document.querySelectorAll("table");

for (const table of allTables) {
  const tBody = table.tBodies[0];
  const rows = Array.from(tBody.rows);
  const headerCells = table.tHead.rows[0].cells;

  for (const th of headerCells) {
    const cellIndex = th.cellIndex;

    th.addEventListener("click", () => {
      rows.sort((tr1, tr2) => {
        const tr1Text = tr1.cells[cellIndex].textContent;
        const tr2Text = tr2.cells[cellIndex].textContent;
        return tr1Text.localeCompare(tr2Text);
      });

      tBody.append(...rows);
    });
  }
}
```

##### Result

### Displaying large tables in small spaces

A common issue with tables on the web is that they don't natively work very well on small screens when the amount of content is large, and the way to make them scrollable isn't obvious, especially when the markup may come from a CMS and cannot be modified to have a wrapper.

This example provides one way to display tables in small spaces. We've hidden the HTML content as it is very large, and there is nothing remarkable about it. The CSS is more useful to inspect in this example.
```

<table>
  <thead>
    <tr>
      <th>1<sup>3</sup> equals:
      <th>2<sup>3</sup> equals:
      <th>3<sup>3</sup> equals:
      <th>4<sup>3</sup> equals:
      <th>5<sup>3</sup> equals:
      <th>6<sup>3</sup> equals:
      <th>7<sup>3</sup> equals:
  <tbody>
    <tr>
      <td>row 1: 1
      <td>row 1: 8
      <td>row 1: 27
      <td>row 1: 64
      <td>row 1: 125
      <td>row 1: 216
      <td>row 1: 343
    <tr>
      <td>row 2: 1
      <td>row 2: 8
      <td>row 2: 27
      <td>row 2: 64
      <td>row 2: 125
      <td>row 2: 216
      <td>row 2: 343
    <tr>
      <td>row 3: 1
      <td>row 3: 8
      <td>row 3: 27
      <td>row 3: 64
      <td>row 3: 125
      <td>row 3: 216
      <td>row 3: 343
    <tr>
      <td>row 4: 1
      <td>row 4: 8
      <td>row 4: 27
      <td>row 4: 64
      <td>row 4: 125
      <td>row 4: 216
      <td>row 4: 343
    <tr>
      <td>row 5: 1
      <td>row 5: 8
      <td>row 5: 27
      <td>row 5: 64
      <td>row 5: 125
      <td>row 5: 216
      <td>row 5: 343
    <tr>
      <td>row 6: 1
      <td>row 6: 8
      <td>row 6: 27
      <td>row 6: 64
      <td>row 6: 125
      <td>row 6: 216
      <td>row 6: 343
    <tr>
      <td>row 7: 1
      <td>row 7: 8
      <td>row 7: 27
      <td>row 7: 64
      <td>row 7: 125
      <td>row 7: 216
      <td>row 7: 343
    <tr>
      <td>row 8: 1
      <td>row 8: 8
      <td>row 8: 27
      <td>row 8: 64
      <td>row 8: 125
      <td>row 8: 216
      <td>row 8: 343
    <tr>
      <td>row 9: 1
      <td>row 9: 8
      <td>row 9: 27
      <td>row 9: 64
      <td>row 9: 125
      <td>row 9: 216
      <td>row 9: 343
    <tr>
      <td>row 10: 1
      <td>row 10: 8
      <td>row 10: 27
      <td>row 10: 64
      <td>row 10: 125
      <td>row 10: 216
      <td>row 10: 343
    <tr>
      <td>row 11: 1
      <td>row 11: 8
      <td>row 11: 27
      <td>row 11: 64
      <td>row 11: 125
      <td>row 11: 216
      <td>row 11: 343
    <tr>
      <td>row 12: 1
      <td>row 12: 8
      <td>row 12: 27
      <td>row 12: 64
      <td>row 12: 125
      <td>row 12: 216
      <td>row 12: 343
    <tr>
      <td>row 13: 1
      <td>row 13: 8
      <td>row 13: 27
      <td>row 13: 64
      <td>row 13: 125
      <td>row 13: 216
      <td>row 13: 343
    <tr>
      <td>row 14: 1
      <td>row 14: 8
      <td>row 14: 27
      <td>row 14: 64
      <td>row 14: 125
      <td>row 14: 216
      <td>row 14: 343
    <tr>
      <td>row 15: 1
      <td>row 15: 8
      <td>row 15: 27
      <td>row 15: 64
      <td>row 15: 125
      <td>row 15: 216
      <td>row 15: 343
    <tr>
      <td>row 16: 1
      <td>row 16: 8
      <td>row 16: 27
      <td>row 16: 64
      <td>row 16: 125
      <td>row 16: 216
      <td>row 16: 343
    <tr>
      <td>row 17: 1
      <td>row 17: 8
      <td>row 17: 27
      <td>row 17: 64
      <td>row 17: 125
      <td>row 17: 216
      <td>row 17: 343
    <tr>
      <td>row 18: 1
      <td>row 18: 8
      <td>row 18: 27
      <td>row 18: 64
      <td>row 18: 125
      <td>row 18: 216
      <td>row 18: 343
    <tr>
      <td>row 19: 1
      <td>row 19: 8
      <td>row 19: 27
      <td>row 19: 64
      <td>row 19: 125
      <td>row 19: 216
      <td>row 19: 343
    <tr>
      <td>row 20: 1
      <td>row 20: 8
      <td>row 20: 27
      <td>row 20: 64
      <td>row 20: 125
      <td>row 20: 216
      <td>row 20: 343
</table>
```

When looking at these styles you'll notice that table's `display` property has been set to `block`. While this allows scrolling, the table loses some of its integrity, and table cells try to become as small as possible. To mitigate this issue we've set `white-space` to `nowrap` on the `<tbody>`. However, we don't do this for the `<thead>` to avoid long titles forcing columns to be wider than they need to be to display the data.

To keep the table headers on the page while scrolling down we've set `position` to sticky on the `<th>` elements. Note that we have **not** set `border-collapse` to `collapse`, as if we do the header cannot be separated correctly from the rest of the table.

```css
table,
th,
td {
  border: 1px solid;
}

table {
  width: 100%;
  max-width: 400px;
  height: 240px;
  margin: 0 auto;
  display: block;
  overflow-x: auto;
  border-spacing: 0;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
  border-top-width: 0;
  border-left-width: 0;
}

th {
  position: sticky;
  top: 0;
  background: #fff;
  vertical-align: bottom;
}

th:last-child,
td:last-child {
  border-right-width: 0;
}

tr:last-child td {
  border-bottom-width: 0;
}
```

#### Result

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

### Captions

By supplying a `<caption>` element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.

This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns.

* MDN Adding a caption to your table with <caption>
* Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials
### Scoping rows and columns

The `scope` attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified to provide necessary information about the cells related to a header.

#### Examples

```html
<table>
  <caption>
    Color names and values
  </caption>
  <tbody>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HEX</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
    <tr>
      <th scope="row">Teal</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsl(180 90% 64% / 100%)</code></td>
      <td><code>rgb(81 246 246 / 100%)</code></td>
    </tr>
    <tr>
      <th scope="row">Goldenrod</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsl(38 90% 65% / 100%)</code></td>
      <td><code>rgb(246 188 87 / 100%)</code></td>
    </tr>
  </tbody>
</table>
```

##### Result

Providing a declaration of `scope="col"` on a `<th>` element will help describe that the cell is at the top of a column. Providing a declaration of `scope="row"` on a `<th>` element will help describe that the cell is the first in a row.

* MDN Tables for visually impaired users
* Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials
* Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials
* H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0
### Complicated tables

Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can't be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the `colspan` and `rowspan` attributes.

Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the `colspan` and `rowspan` attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.

If the table cannot be broken apart, use a combination of the `id` and `headers` attributes to programmatically associate each table cell with the header(s) the cell is associated with.

* MDN Tables for visually impaired users
* Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials
* H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0
Specifications
--------------

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

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

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

See also
--------

* HTML data table tutorial
* CSS properties that may be especially useful to style the `<table>` element:
    + `width` to control the width of the table;
    + `border`, `border-style`, `border-color`, `border-width`, `border-collapse`, `border-spacing` to control the aspect of cell borders, rules, and frame;
    + `margin` and `padding` to style the individual cell content;
    + `text-align` and `vertical-align` to define the alignment of text and cell content.