<section>: The Generic Section element - HTML: HyperText Markup Language

<section>: The Generic Section element
======================================

The **`<section>`** HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.

Try it
------

Attributes
----------

This element only includes the global attributes.

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

As mentioned above, `<section>` is a generic sectioning element, and should only be used if there isn't a more specific element to represent it. As an example, a navigation menu should be wrapped in a `<nav>` element, but a list of search results or a map display and its controls don't have specific elements, and could be put inside a `<section>`.

Also consider these cases:

* If the contents of the element represent a standalone, atomic unit of content that makes sense syndicated as a standalone piece (e.g. a blog post or blog comment, or a newspaper article), the `<article>` element would be a better choice.
* If the contents represent useful tangential information that works alongside the main content, but is not directly part of it (like related links, or an author bio), use an `<aside>`.
* If the contents represent the main content area of a document, use `<main>`.
* If you are only using the element as a styling wrapper, use a `<div>` instead.

To reiterate, each `<section>` should be identified, typically by including a heading (h1 - h6 element) as a child of the `<section>` element, wherever possible. See below for examples of where you might see a `<section>` without a heading.

Examples
--------

### Simple usage example

#### Before

```html
<div>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</div>
```

##### Result

#### After

```html
<section>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</section>
```

##### Result

### Using a section without a heading

Circumstances where you might see `<section>` used without a heading are typically found in web application/UI sections rather than in traditional document structures. In a document, it doesn't really make any sense to have a separate section of content without a heading to describe its contents. Such headings are useful for all readers, but particularly useful for users of assistive technologies like screen readers, and they are also good for SEO.

Consider however a secondary navigation mechanism. If the global navigation is already wrapped in a `<nav>` element, you could conceivably wrap a previous/next menu in a `<section>`:

```html
<section>
  <a href="#">Previous article</a>
  <a href="#">Next article</a>
</section>
```

Or what about some kind of button bar for controlling your app? This might not necessarily want a heading, but it is still a distinct section of the document:

```html
<section>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>
</section>
```

#### Result

Depending on the content, including a heading could also be good for SEO, so it is an option to consider.

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 Sectioning content, palpable content.
  |
| Permitted content | Flow content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 flow content. Note that a `<section>` element must not be a
 descendant of an `<address>` element.
  |
| Implicit ARIA role | `region`
 if the element has an
 accessible name, otherwise
 `generic` |
| Permitted ARIA roles | `alert`, `alertdialog`,
 `application`, `banner`,
 `complementary`,
 `contentinfo`, `dialog`,
 `document`, `feed`,
 `log`, `main`,
 `marquee`, `navigation`,
 `none`, `note`,
 `presentation`, `search`,
 `status`, `tabpanel` |
| DOM interface | `HTMLElement` |

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

| Specification |
| --- |
| HTML Standard # the-section-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, `<hgroup>`, `<header>`, `<footer>`, `<address>`
* Using HTML sections and outlines
* ARIA: Region role
* Why You Should Choose HTML5 article Over section, by Bruce Lawson


<dd>: The Description Details element - HTML: HyperText Markup Language

<dd>: The Description Details element
=====================================

The **`<dd>`** HTML element provides the description, definition, or value for the preceding term (`<dt>`) in a description list (`<dl>`).

Try it
------

Attributes
----------

This element's attributes include the global attributes.

`nowrap`
Non-standard

Deprecated

If the value of this attribute is set to `yes`, the definition text will not wrap. The default value is `no`.

Examples
--------

For examples, see the examples provided for the `<dl>` element.

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

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | Flow content. |
| Tag omission |
 The start tag is required. The end tag may be omitted if this element is
 immediately followed by another `<dd>` element or a
 `<dt>` element, or if there is no more content in
 the parent element.
  |
| Permitted parents |
 A `<dl>` or a
 `<div>` that is a child of a
 `<dl>`.This element can be used after a
 `<dt>` or another `<dd>`
 element.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLElement` |

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

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

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

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

See also
--------

* `<dl>`
* `<dt>`


<strong>: The Strong Importance element - HTML: HyperText Markup Language

: The Strong Importance element
=======================================

The **`<strong>`** HTML element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.

Try it
------

Attributes
----------

This element only includes the global attributes.

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

The `<strong>` element is for content that is of "strong importance," including things of great seriousness or urgency (such as warnings). This could be a sentence that is of great importance to the whole page, or you could merely try to point out that some words are of greater importance compared to nearby content.

Typically this element is rendered by default using a bold font weight. However, it should *not* be used to apply bold styling; use the CSS `font-weight` property for that purpose. Use the `<b>` element to draw attention to certain text without indicating a higher level of importance. Use the `<em>` element to mark text that has stress emphasis.

Another accepted use for `<strong>` is to denote the labels of paragraphs which represent notes or warnings within the text of a page.

###  vs.

It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. `<b>` and `<strong>` are perhaps one of the most common sources of confusion, causing developers to ask "Should I use `<b>` or `<strong>`? Don't they both do the same thing?"

Not exactly. The `<strong>` element is for content that is of greater importance, while the `<b>` element is used to draw attention to text without indicating that it's more important.

It may help to realize that both are valid and semantic elements in HTML and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline `<strong>`). Each element is meant to be used in certain types of scenarios, and if you want to bold text for decoration, you should instead actually use the CSS `font-weight` property.

The intended meaning or purpose of the enclosed text should be what determines which element you use. Communicating meaning is what semantics are all about.

###  vs.

Adding to the confusion is the fact that while HTML 4 defined `<strong>` as indicating a stronger emphasis, HTML 5 defines `<strong>` as representing "strong importance for its contents." This is an important distinction to make.

While `<em>` is used to change the meaning of a sentence as spoken emphasis does ("I *love* carrots" vs. "I love *carrots*"), `<strong>` is used to give portions of a sentence added importance (e.g., "**Warning!** This is **very dangerous.**") Both `<strong>` and `<em>` can be nested to increase the relative degree of importance or stress emphasis, respectively.

Examples
--------

### Basic example

```html
<p>
  Before proceeding, <strong>make sure you put on your safety goggles</strong>.
</p>
```

#### Result

### Labeling warnings

```html
<p>
  <strong>Important:</strong> Before proceeding, make sure you add plenty of
  butter.
</p>
```

#### Result

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content, palpable content.
  |
| Permitted content | Phrasing content. |
| Tag omission | None; must have both a start tag and an end tag. |
| Permitted parents |
 Any element that accepts
 phrasing content, or any element that accepts
 flow content.
  |
| Implicit ARIA role | `strong` |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` |

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

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

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

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

See also
--------

* The `<b>` element
* The `<em>` element
* The `font-weight` property


<strike> - HTML: HyperText Markup Language

<strike>
========

**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 **`<strike>`** HTML element places a strikethrough (horizontal line) over text.

**Warning:** This element is deprecated in HTML 4 and XHTML 1, and obsoleted in the HTML Living Standard. If semantically appropriate, i.e., if it represents *deleted* content, use `<del>` instead. In all other cases use `<s>`.

Attributes
----------

This element includes the global attributes.

Examples
--------

```html
<strike>: <strike>Today's Special: Salmon</strike> SOLD OUT<br />
<s>: <s>Today's Special: Salmon</s> SOLD OUT
```

### Result

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

|  |  |
| --- | --- |
| DOM interface | `HTMLElement` |

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

| Specification |
| --- |
| HTML Standard # strike |

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

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

See also
--------

* The `<s>` element.
* The `<del>` element should be used if the data has been *deleted*.
* The CSS `text-decoration` property can be used to style text with a strikethrough.


<head>: The Document Metadata (Header) element - HTML: HyperText Markup Language

<head>: The Document Metadata (Header) element
==============================================

The **`<head>`** HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.

**Note:** `<head>` primarily holds information for machine processing, not human-readability. For human-visible information, like top-level headings and listed authors, see the `<header>` element.

Attributes
----------

This element includes the global attributes.

`profile`
Deprecated

Non-standard

The URIs of one or more metadata profiles, separated by white space.

Examples
--------

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Document title</title>
  </head>
</html>
```

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

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content |
 If the document is an `<iframe>`
`srcdoc` document, or if title
 information is available from a higher level protocol (like the
 subject line in HTML email), zero or more elements of metadata
 content.

 Otherwise, one or more elements of metadata content where exactly one
 is a `<title>` element.
  |
| Tag omission |
 The start tag may be omitted if the first thing inside the
 `<head>` element is an element.The end tag may be
 omitted if the first thing following the
 `<head>` element is not a space character or a comment.
  |
| Permitted parents | An `<html>` element, as its first child. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLHeadElement` |

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

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

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

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

See also
--------

* Elements that can be used inside the `<head>`:
    + `<title>`
    + `<base>`
    + `<link>`
    + `<style>`
    + `<meta>`
    + `<script>`
    + `<noscript>`
    + `<template>`


<tr>: The Table Row element - HTML: HyperText Markup Language

<tr>: The Table Row element
===========================

The **`<tr>`** HTML element defines a row of cells in a table. The row's cells can then be established using a mix of `<td>` (data cell) and `<th>` (header cell) elements.

Try it
------

To provide additional control over how cells fit into (or span across) columns, both `<th>` and `<td>` support the `colspan` attribute, which lets you specify how many columns wide the cell should be, with the default being 1. Similarly, you can use the `rowspan` attribute on cells to indicate they should span more than one table row.

This can take a little practice to get right when building your tables. We have some examples below, but for more examples and an in-depth tutorial, see the HTML tables series in our Learn web development area, where you'll learn how to use the table elements and their attributes to get just the right layout and formatting for your tabular data.

Attributes
----------

This element includes the global attributes. There are also several deprecated attributes, which you should avoid but may need to know when reading older code.

### Deprecated attributes

The following attributes may still be implemented in browsers but are no longer part of the HTML specification and may be missing or may not work as expected. They should be avoided.

`align`
Deprecated

A string which specifies how the cell's context should be aligned horizontally within the cells in the row; this is shorthand for using `align` on every cell in the row individually. Possible values are:

`left`

Align the content of each cell at its left edge.

`center`

Center the contents of each cell between their left and right edges.

`right`

Align the content of each cell at its right edge.

`justify`

Widen whitespaces within the text of each cell so that the text fills the full width of each cell (full justification).

`char`

Align each cell in the row on a specific character (such that each row in the column that is configured this way will horizontally align its cells on that character). This uses the `char` and `charoff` to establish the alignment character (typically "." or "," when aligning numerical data) and the number of characters that should follow the alignment character. This alignment type was never widely supported.

If no value is expressly set for `align`, the parent node's value is inherited.

**Note:** Instead of using the obsolete `align` attribute, you should instead use the CSS `text-align` property to establish `left`, `center`, `right`, or `justify` alignment for the row's cells. To apply character-based alignment, set the CSS `text-align` property to the alignment character (such as `"."` or `","`).

`bgcolor`
Deprecated

A string specifying a color to apply to the backgrounds of each of the row's cells. This can be either a hexadecimal `#RRGGBB` or `#RGB` value or a color keyword. Omitting the attribute or setting it to `null` in JavaScript causes the row's cells to inherit the row's parent element's background color.

**Note:** The `<tr>` element should be styled using CSS. To give a similar effect as the `bgcolor` attribute, use the CSS property `background-color`.

`char`
Deprecated

A string that sets the character to align the cells in each row's columns (each row's centering that uses the same character gets aligned with others using the same character. Typical values for this include a period (`"."`) or comma (`","`) when attempting to align numbers or monetary values. If `align` is not set to `char`, this attribute is ignored.

**Note:** This attribute is obsolete and rarely implemented anyway. To achieve the same effect as the `char` attribute, set the CSS `text-align` property to the same string you would specify for the `char` property, such as `text-align: "."`.

`charoff`
Deprecated

A string indicating the number of characters on the tail end of the column's data should be displayed after the alignment character specified by the `char` attribute. For example, when displaying money values for currencies that use hundredths of a unit (such as the dollar, which is divided into 100 cents), you would typically specify a value of 2, so that in tandem with `char` being set to `"."`, the values in a column would be cleanly aligned on the decimal points, with the number of cents properly displayed to the right of the decimal point.

**Note:** This attribute is obsolete, and was never widely supported anyway.

`valign`
Deprecated

A string specifying the vertical alignment of the text within each cell in the row. Possible values for this attribute are:

`baseline`

Aligns each cell's content text as closely as possible to the bottom of the cell, handling alignment of different fonts and font sizes by aligning the characters along the baseline of the font(s) used in the row. If all the characters in the row are the same size, the effect is the same as `bottom`.

`bottom`,

Draws the text in each of the row's cells as closely as possible to the bottom edge of those cells.

`middle`

Each cell's text is vertically centered.

`top`

Each cell's text is drawn as closely as possible to the top edge of the containing cell.

**Note:** Don't use the obsolete `valign` attribute. Instead, add the CSS `vertical-align` property to the row.

Examples
--------

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

### Basic example

This simple example shows a table listing people's names along with various information about membership in a club or service.

#### HTML

This HTML demonstrates the most basic structure of a table. There are no groups, no cells that span multiple rows or columns, no captions, and only the most basic styling to create lines around the components of the table for something resembling clarity.

There are just four rows (including one header row), each with four columns (including one header column). Not even the table section elements are used; instead, the browser is allowed to determine this automatically. We'll add `<thead>`, `<tbody>`, and `<tfoot>` in the next example.

```html
<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <td>Margaret Nguyen</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <td>Edvard Galinski</td>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <td>Hoshi Nakamura</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>
```

#### CSS

This simple CSS just adds a solid black border around the table and around each of its cells, including those specified using both `<th>` and `<td>`. That way, both header and data cells are easily demarcated.

```css
table {
  border: 1px solid black;
}

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

#### Result

### Row and column spanning

Now, let's introduce another column that shows the date the user's membership ended, along with a super-heading above the "joined" and "canceled" dates called "Membership Dates". This involves adding both row and column spans to the table, so that the heading cells can wind up in the right places.

#### Result

Let's actually look at the output first this time:

Notice how the heading area here is actually two rows, one with "Name", "ID", "Membership Dates", and "Balance" headings, and the other with "Joined" and "Canceled", which are subheadings below "Membership Dates". This is accomplished by:

* Having the first row's "Name", "ID", and "Balance" heading cells span two rows using the `rowspan` attribute, making them each two rows tall.
* Having the first row's "Membership Dates" heading cell span two columns using the `colspan` attribute, which causes this heading actually to be two columns wide.
* Having a second row of `<th>` elements that contains only the "Joined" and "Canceled" headings. Because the other columns are already occupied by first-row cells that span into the second row, these wind up correctly positioned under the "Membership Dates" heading.

#### HTML

The HTML is similar to the previous example's, except for the addition of the new column in each data row, and the changes to the header. Those changes make the HTML look like this:

```html
<table>
  <tr>
    <th rowspan="2">Name</th>
    <th rowspan="2">ID</th>
    <th colspan="2">Membership Dates</th>
    <th rowspan="2">Balance</th>
  </tr>
  <tr>
    <th>Joined</th>
    <th>Canceled</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>n/a</td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td><time datetime="2017-04-08">April 8, 2017</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>n/a</td>
    <td>15.00</td>
  </tr>
</table>
```

The differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. Note the use of `rowspan` on to make the "Name", "ID", and "Balance" headers occupy two rows instead of just one, and the use of `colspan` to make the "Membership Dates" header cell span across two columns.

The CSS is unchanged from before.
```

table {
  border: 1px solid black;
}

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

### Explicitly specifying table content groups

Before really getting into styling this table, let's take a moment to add row and column groups to help make our CSS easier.

#### HTML

The HTML is where the action is here, and the action is pretty simple.

```html
<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Membership Dates</th>
      <th rowspan="2">Balance</th>
    </tr>
    <tr>
      <th>Joined</th>
      <th>Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>
```

The differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. Note the use of `rowspan` on to make the "Name", "ID", and "Balance" headers occupy two rows instead of just one, and the use of `colspan` to make the "Membership Dates" header cell span across two columns.

Once again, we haven't touched the CSS.
```

table {
  border: 1px solid black;
}

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

#### Result

The output is entirely unchanged, despite the addition of useful contextual information under the hood:

### Basic styling

As is the case with all parts of a table, you can change the appearance of a table row and its contents using CSS. Any styles applied to the `<tr>` element will affect the cells within the row unless overridden by styles applied to those cells.

Let's apply a basic style to the table to adjust the typeface being used, and add a background color to the header row.

#### Result

Again, let's take a look at the result first.
```

<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Membership Dates</th>
      <th rowspan="2">Balance</th>
    </tr>
    <tr>
      <th>Joined</th>
      <th>Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>
```

#### CSS

This time, the HTML is unchanged, so let's dive right into the CSS.

```css
table {
  border: 1px solid black;
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
}

thead > tr {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}
```

While we add a `font` property to the `<table>` element here to set a more visually-appealing typeface (or an abominable sans-serif typeface, depending on your personal opinion), the interesting part is the second style here, where we style `<tr>` elements located within the `<thead>` so they have a light blue background color. This is a way to quickly apply a background color to all the cells in the heading area at once.

This does *not* affect the style of the `<th>` elements in the first column, though, where we treat the member names as a row heading.

### Advanced styling

Now we'll go all-out, with styles on rows in the header and body areas both, including alternating row colors, cells with different colors depending on position within a row, and so forth.

#### Result

Here's what the final table will look like:

There is no change to the HTML again. See what proper preparation of your HTML can do for you?
```

<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Membership Dates</th>
      <th rowspan="2">Balance</th>
    </tr>
    <tr>
      <th>Joined</th>
      <th>Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>
```

#### CSS

The CSS is much more involved this time. It's not complicated, but there's a lot going on. Let's break it down.

##### The table and base styles

```css
table {
  border: 1px solid black;
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}
```

Here we've added the `border-spacing` and `border-collapse` properties to eliminate spacing between cells and collapse borders that touch one another to be a single border instead of winding up with double borders.

```css
th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}

th {
  vertical-align: bottom;
}
```

And here are the default styles for all table cells. Now let's customize!

##### The top header: overall

We're going to look at the top header in two pieces. First, the overall styling of the header:

```css
thead > tr {
  background-color: rgb(228 240 245);
}

thead > tr:nth-of-type(2) {
  border-bottom: 2px solid black;
}
```

This sets the background color of all `<tr>` elements in the table's heading (as specified using `<thead>`). Then we set the bottom border of the top header to be a two-pixel wide line. Notice, however, that we're using the `:nth-of-type` selector to apply `border-bottom` to the *second* row in the heading. Why? Because the heading is made of two rows that are spanned by some of the cells. That means there are actually two rows there; applying the style to the first row would not give us the expected result.

##### The "Joined" and "Canceled" headers

Let's style these two header cells with green and red hues to represent the "good" of a new member and the "bummer" of a canceled membership.

```css
thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225 255 225);
}

thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255 225 225);
}
```

Here we dig into the last row of the table's header block and give the first header cell in it (the "Joined" header) a greenish color, and the second header cell in it (the "Canceled" header) a reddish hue.

##### Color every body other row differently

It's common to help improve readability of table data by alternating row colors. Let's add a bit of color to every even row:

```css
tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}
```

##### Give the left-side header some style

Since we want the first column to stand out as well, we'll add some custom styling here, too.

```css
tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225 229 244);
}
```

This styles the first header cell in each row of the table's body with `text-align` to left-justify the member names, and with a somewhat different background color.

##### Justify the balances

Finally, since it's standard practice to right-justify currency values in tables, let's do that here.

```css
tbody > tr > td:last-of-type {
  text-align: right;
}
```

This just sets the CSS `text-align` property for the last `<td>` in each body row to `"right"`.

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

|  |  |
| --- | --- |
| Content categories | None |
| Permitted content |
 Zero or more `<td>` and/or
 `<th>` elements;
 script-supporting elements
 (`<script>` and
 `<template>`) are also allowed
  |
| Tag omission |
 Start tag is mandatory. End tag may be omitted if the
 `<tr>` element is immediately followed by a
 `<tr>` element, or if the row is the last element
 in its parent table group (`<thead>`,
 `<tbody>` or `<tfoot>`)
 element
  |
| Permitted parents | `<table>` (only if the table has no child
 `<tbody>` element, and even then only after any
 `<caption>`,
 `<colgroup>`, and
 `<thead>` elements); otherwise, the parent must
 be `<thead>`, `<tbody>` or
 `<tfoot>` |
| Implicit ARIA role | `row` |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLTableRowElement` |

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

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

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

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

See also
--------

* Learning area: HTML tables: An introduction to using tables, including `<tr>`.
* `HTMLTableRowElement`: the interface on which `<tr>` is based.
* Other table-related elements:
    + `<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<td>`, `<th>`, `<caption>`, `<col>`, and `<colgroup>`


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

<col>: The Table Column element
===============================

The **`<col>`** HTML element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a `<colgroup>` element.

Try it
------

`<col>` allows styling columns using CSS, but only a few properties will have an effect on the column (see the CSS 2.1 specification for a list).

Attributes
----------

This element includes the global attributes.

`span`

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

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

If this attribute is not set, its value is inherited from the `align` of the `<colgroup>` element this `<col>` element belongs too. If there are none, the `left` value is assumed.

**Note:** To achieve the same effect as the `left`, `center`, `right` or `justify` values, do not try to set the `text-align` property on a selector giving a `<col>` element. Because `<td>` elements are not descendant of the `<col>` element, they won't inherit it.

If the table doesn't use a `colspan` attribute, use the `td:nth-child(an+b)` CSS selector. Set `a` to zero and `b` to the position of the column in the table, e.g. `td:nth-child(2) { text-align: right; }` to right-align the second column.

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 sets the character to align the cells in a column on. 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.

`charoff`
Deprecated

This attribute is used to indicate the number of characters to offset the column data from the alignment characters 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 `<col>` element. Because `<td>` elements are not descendant of the `<col>` element, they won't inherit it.

If the table doesn't use a `colspan` attribute, use the `td:nth-child(an+b)` CSS selector 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.

`width`
Deprecated

This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form `0*`, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as `5*` also can be used.

Examples
--------

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

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

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | None; it is a void element. |
| Tag omission | It must have start tag, but must not have an end tag. |
| Permitted parents | `<colgroup>` only, though it can be implicitly
 defined as its start tag is not mandatory. The
 `<colgroup>` must not have a
 `span` attribute.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLTableColElement` |

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

| Specification |
| --- |
| HTML Standard # the-col-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 '.'.


<template>: The Content Template element - HTML: HyperText Markup Language

<template>: The Content Template element
========================================

The **`<template>`** HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the **`<template>`** element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.

Attributes
----------

The only standard attributes that the `<template>` element supports are the global attributes.

In Chromium-based browsers, the `<template>` element also supports a non-standard `shadowrootmode` attribute, as part of an experimental "Declarative Shadow DOM" proposal. In supporting browsers, a `<template>` element with the `shadowrootmode` attribute is detected by the HTML parser and immediately applied as the shadow root of its parent element. `shadowrootmode` can take a value of `open` or `closed`; these are equivalent to the `open` and `closed` values of the `Element.attachShadow()` `mode` option.

Also, the corresponding `HTMLTemplateElement` interface includes a standard `content` property (without an equivalent content/markup attribute). This `content` property is read-only and holds a `DocumentFragment` that contains the DOM subtree represented by the template. Be careful when using the `content` property because the returned `DocumentFragment` can exhibit unexpected behavior. For more details, see the Avoiding DocumentFragment pitfalls section below.

Examples
--------

First we start with the HTML portion of the example.

```html
<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>
```

First, we have a table into which we will later insert content using JavaScript code. Then comes the template, which describes the structure of an HTML fragment representing a single table row.

Now that the table has been created and the template defined, we use JavaScript to insert rows into the table, with each row being constructed using the template as its basis.

```js
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ("content" in document.createElement("template")) {
  // Instantiate the table with the existing HTML tbody
  // and the row with the template
  const tbody = document.querySelector("tbody");
  const template = document.querySelector("#productrow");

  // Clone the new row and insert it into the table
  const clone = template.content.cloneNode(true);
  let td = clone.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  tbody.appendChild(clone);

  // Clone the new row and insert it into the table
  const clone2 = template.content.cloneNode(true);
  td = clone2.querySelectorAll("td");
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans 2";

  tbody.appendChild(clone2);
} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}
```

The result is the original HTML table, with two new rows appended to it via JavaScript:
```

table {
  background: #000;
}
table td {
  background: #fff;
}
```

Avoiding DocumentFragment pitfalls
----------------------------------

When a `DocumentFragment` value is passed, `Node.appendChild` and similar methods move only the *child nodes* of that value into the target node. Therefore, it is usually preferable to attach event handlers to the children of a `DocumentFragment`, rather than to the `DocumentFragment` itself.

Consider the following HTML and JavaScript:

### HTML

```html
<div id="container"></div>

<template id="template">
  <div>Click me</div>
</template>
```

### JavaScript

```js
const container = document.getElementById("container");
const template = document.getElementById("template");

function clickHandler(event) {
  event.target.append(" — Clicked this div");
}

const firstClone = template.content.cloneNode(true);
firstClone.addEventListener("click", clickHandler);
container.appendChild(firstClone);

const secondClone = template.content.cloneNode(true);
secondClone.children[0].addEventListener("click", clickHandler);
container.appendChild(secondClone);
```

### Result

Since `firstClone` is a `DocumentFragment`, only its children are added to `container` when `appendChild` is called; the event handlers of `firstClone` are not copied. In contrast, because an event handler is added to the first *child node* of `secondClone`, the event handler is copied when `appendChild` is called, and clicking on it works as one would expect.

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

|  |  |
| --- | --- |
| Content categories | Metadata content,
 flow content,
 phrasing content,
 script-supporting element |
| Permitted content | No restrictions |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 metadata content,
 phrasing content, or
 script-supporting elements. Also allowed as a child of a `<colgroup>`
 element that does *not* have a
 `span` attribute.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLTemplateElement` |

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

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

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

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

See also
--------

* `part` and `exportparts` HTML attributes
* `<slot>` HTML element
* `:host`, `:host()`, and `:host-context()` CSS pseudo-classes
* `::part` and `::slotted` CSS pseudo-elements
* `ShadowRoot` interface
* Using templates and slots
* CSS scoping module


<noscript>: The Noscript element - HTML: HyperText Markup Language

<noscript>: The Noscript element
================================

The **`<noscript>`** HTML element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

|  |  |
| --- | --- |
| Content categories | Metadata content,
 flow content,
 phrasing content.
  |
| Permitted content |
 When scripting is disabled and when it is a descendant of the
 `<head>` element: in any order, zero or more
 `<link>` elements, zero or more
 `<style>` elements, and zero or more
 `<meta>` elements.When scripting is
 disabled and when it isn't a descendant of the
 `<head>` element: any
 transparent content, but no `<noscript>` element must be among its
 descendants.Otherwise: flow content or phrasing content.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content, if there are no ancestor `<noscript>` element, or in
 a `<head>` element (but only for an HTML
 document), here again if there are no ancestor
 `<noscript>` element.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLElement` |

Attributes
----------

This element only includes the global attributes.

Examples
--------

```html
<noscript>
  <!-- anchor linking to external file -->
  <a href="https://www.mozilla.org/">External Link</a>
</noscript>
<p>Rocks!</p>
```

### Result with scripting enabled

Rocks!

### Result with scripting disabled

External Link

Rocks!

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

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

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

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


<sub>: The Subscript element - HTML: HyperText Markup Language

<sub>: The Subscript element
============================

The **`<sub>`** HTML element specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.

Try it
------

Attributes
----------

This element only includes the global attributes.

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

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

For example, using `<sub>` to style the name of a company which uses altered baselines in their wordmark would not be appropriate; instead, CSS should be used. For example, you could use the `vertical-align` property with a declaration like `vertical-align: sub` or, to more precisely control the baseline shift, `vertical-align: -25%`.

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

* Marking up footnote numbers. See Footnote numbers for an example.
* Marking up the subscript in mathematical variable numbers (although you may also consider using a MathML formula for this). See Variable subscripts.
* Denoting the number of atoms of a given element within a chemical formula (such as every developer's best friend, C
 8
 H
 10
 N
 4
 O
 2
 , otherwise known as "caffeine"). See Chemical formulas.
Examples
--------

### Footnote numbers

Traditional footnotes are denoted using numbers which are rendered in subscript. This is a common use case for `<sub>`:

```html
<p>
  According to the computations by Nakamura, Johnson, and Mason<sub>1</sub> this
  will result in the complete annihilation of both particles.
</p>
```

#### Result

### Variable subscripts

In mathematics, families of variables related to the same concept (such as distances along the same axis) are represented using the same variable name with a subscript following. For example:

```html
<p>
  The horizontal coordinates' positions along the X-axis are represented as
  <var>x<sub>1</sub></var> … <var>x<sub>n</sub></var>.
</p>
```

#### Result

### Chemical formulas

When writing a chemical formula, such as H20, the number of atoms of a given element within the described molecule is represented using a subscripted number; in the case of water, the subscripted "2" indicates that there are two atoms of hydrogen in the molecule.

Another example:

```html
<p>
  Almost every developer's favorite molecule is
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, which is commonly known
  as "caffeine."
</p>
```

#### Result

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

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

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

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

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

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

See also
--------

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


<progress>: The Progress Indicator element - HTML: HyperText Markup Language

<progress>: The Progress Indicator element
==========================================

The **`<progress>`** HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Try it
------

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content, labelable content,
 palpable content.
  |
| Permitted content | Phrasing content, but there must be no `<progress>` element among its
 descendants.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content.
  |
| Implicit ARIA role | `progressbar` |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLProgressElement` |

Attributes
----------

This element includes the global attributes.

`max`

This attribute describes how much work the task indicated by the `progress` element requires. The `max` attribute, if present, must have a value greater than `0` and be a valid floating point number. The default value is `1`.

`value`

This attribute specifies how much of the task that has been completed. It must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. If there is no `value` attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

**Note:** Unlike the `<meter>` element, the minimum value is always 0, and the `min` attribute is not allowed for the `<progress>` element.

**Note:** The `:indeterminate` pseudo-class can be used to match against indeterminate progress bars. To change the progress bar to indeterminate after giving it a value you must remove the value attribute with `element.removeAttribute('value')`.

Examples
--------

```html
<progress value="70" max="100">70 %</progress>
```

### Result

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

### Labelling

In most cases you should provide an accessible label when using `<progress>`. While you can use the standard ARIA labelling attributes `aria-labelledby` or `aria-label` as you would for any element with `role="progressbar"`, when using `<progress>` you can alternatively use the `<label>` element.

**Note:** Text placed between the element's tags is not an accessible label, it is only recommended as a fallback for old browsers that do not support this element.

#### Examples

```html
<label>
  Uploading Document: <progress value="70" max="100">70 %</progress>
</label>

<!-- OR -->
<br />

<label for="progress-bar">Uploading Document</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>
```

#### Result

### Describing a particular region

If the `<progress>` element is describing the loading progress of a section of a page, use `aria-describedby` to point to the status, and set `aria-busy="true"` on the section that is being updated, removing the `aria-busy` attribute when it has finished loading.

#### Examples

```html
<div aria-busy="true" aria-describedby="progress-bar">
  <!-- content is for this region is loading -->
</div>

<!-- ... -->

<progress id="progress-bar" aria-label="Content loading…"></progress>
```

##### Result

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

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

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

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

See also
--------

* `<meter>`
* `:indeterminate`
* `-moz-orient`
* `::-moz-progress-bar`
* `::-webkit-progress-bar`
* `::-webkit-progress-value`
* `::-webkit-progress-inner-element`


<p>: The Paragraph element - HTML: HyperText Markup Language

<p>: The Paragraph element
==========================

The **`<p>`** HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing `</p>` tag. See "Tag omission" below.

Try it
------

|  |  |
| --- | --- |
| Content categories | Flow content, palpable content. |
| Permitted content | Phrasing content. |
| Tag omission |
 The start tag is required. The end tag may be omitted if the
 `<p>` element is immediately followed by an
 `<address>`,
 `<article>`, `<aside>`,
 `<blockquote>`, `<details>`, `<div>`,
 `<dl>`, `<fieldset>`,
 `<figcaption>`, `<figure>`,
 `<footer>`, `<form>`,
 h1, h2,
 h3, h4,
 h5, h6,
 `<header>`, `<hgroup>`, `<hr>`,
 `<main>`, `<menu>`, `<nav>`,
 `<ol>`, `<pre>`, `<search>`,
 `<section>`, `<table>`,
 `<ul>` or another `<p>`
 element, or if there is no more content in the parent element and the
 parent element is not an `<a>`, `<audio>`,
 `<del>`, `<ins>`, `<map>`,
 `<noscript>` or `<video>` element,
 or an autonomous custom element.
  |
| Permitted parents |
 Any element that accepts
 flow content.
  |
| Implicit ARIA role | paragraph |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLParagraphElement` |

Attributes
----------

This element only includes the global attributes.

**Note:** The `align` attribute on `<p>` tags is obsolete and shouldn't be used.

Examples
--------

### HTML

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

### Result

Styling paragraphs
------------------

By default, browsers separate paragraphs with a single blank line. Alternate separation methods, such as first-line indentation, can be achieved with CSS:

### HTML

```html
<p>
  Separating paragraphs with blank lines is easiest for readers to scan, but
  they can also be separated by indenting their first lines. This is often used
  to take up less space, such as to save paper in print.
</p>

<p>
  Writing that is intended to be edited, such as school papers and rough drafts,
  uses both blank lines and indentation for separation. In finished works,
  combining both is considered redundant and amateurish.
</p>

<p>
  In very old writing, paragraphs were separated with a special character: ¶,
  the <i>pilcrow</i>. Nowadays, this is considered claustrophobic and hard to
  read.
</p>

<p>
  How hard to read? See for yourself:
  <button data-toggle-text="Oh no! Switch back!">
    Use pilcrow for paragraphs
  </button>
</p>
```

### CSS

```css
p {
  margin: 0;
  text-indent: 3ch;
}

p.pilcrow {
  text-indent: 0;
  display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}
```

### JavaScript

```js
document.querySelector("button").addEventListener("click", (event) => {
  document.querySelectorAll("p").forEach((paragraph) => {
    paragraph.classList.toggle("pilcrow");
  });

  [event.target.innerText, event.target.dataset.toggleText] = [
    event.target.dataset.toggleText,
    event.target.innerText,
  ];
});
```

### Result

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

Breaking up content into paragraphs helps make a page more accessible. Screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users skip around.

Using empty `<p>` elements to add space between paragraphs is problematic for people who navigate with screen-reading technology. Screen readers may announce the paragraph's presence, but not any content contained within it — because there is none. This can confuse and frustrate the person using the screen reader.

If extra space is desired, use CSS properties like `margin` to create the effect:

```css
p {
  margin-bottom: 2em; /\* increase white space after a paragraph \*/
}
```

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

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

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

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

See also
--------

* `<hr>`
* `<br>`


<rp>: The Ruby Fallback Parenthesis element - HTML: HyperText Markup Language

<rp>: The Ruby Fallback Parenthesis element
===========================================

The **`<rp>`** HTML element is used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the `<ruby>` element. One `<rp>` element should enclose each of the opening and closing parentheses that wrap the `<rt>` element that contains the annotation's text.

Try it
------

Attributes
----------

This element only includes the global attributes.

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

* Ruby annotations are for showing pronunciation of East Asian characters, like using Japanese furigana or Taiwanese bopomofo characters. The `<rp>` element is used in the case of lack of `<ruby>` element support; the `<rp>` content provides what should be displayed in order to indicate the presence of a ruby annotation, usually parentheses.
Examples
--------

### Using ruby annotations

This example uses ruby annotations to display the Romaji equivalents for each character.

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

```
body {
  font-size: 22px;
}
```

#### Result

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

### Without ruby support

If your browser does not support ruby annotations, the result looks like this instead:
```

漢 (Kan) 字 (ji)
```

```
body {
  font-size: 22px;
}
```

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

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | Text |
| Tag omission |
 The end tag can be omitted if the element is immediately followed by an
 `<rt>` or another `<rp>` element,
 or if there is no more content in the parent element.
  |
| Permitted parents |
 A `<ruby>` element. `<rp>` must
 be positioned immediately before or after an
 `<rt>` element.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` |

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

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

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

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

See also
--------

* `<ruby>`
* `<rt>`
* `<rb>`
* `<rtc>`


<textarea>: The Textarea element - HTML: HyperText Markup Language

<textarea>: The Textarea element
================================

The **`<textarea>`** HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

Try it
------

The above example demonstrates a number of features of `<textarea>`:

* An `id` attribute to allow the `<textarea>` to be associated with a `<label>` element for accessibility purposes
* A `name` attribute to set the name of the associated data point submitted to the server when the form is submitted.
* `rows` and `cols` attributes to allow you to specify an exact size for the `<textarea>` to take. Setting these is a good idea for consistency, as browser defaults can differ.
* Default content entered between the opening and closing tags. `<textarea>` does not support the `value` attribute.

The `<textarea>` element also accepts several attributes common to form `<input>`s, such as `autocapitalize`, `autocomplete`, `autofocus`, `disabled`, `placeholder`, `readonly`, and `required`.

Attributes
----------

This element includes the global attributes.

`autocapitalize`

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

`autocomplete`

This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are:

* `off`: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.
* `on`: The browser can automatically complete the value based on values that the user has entered during previous uses.

If the `autocomplete` attribute is not specified on a `<textarea>` element, then the browser uses the `autocomplete` attribute value of the `<textarea>` element's form owner. The form owner is either the `<form>` element that this `<textarea>` element is a descendant of or the form element whose `id` is specified by the `form` attribute of the input element. For more information, see the `autocomplete` attribute in `<form>`.

`autocorrect`
Non-standard

A string which indicates whether to activate automatic spelling correction and processing of text substitutions (if any are configured) while the user is editing this `textarea`. Permitted values are:

`on`

Enable automatic spelling correction and text substitutions.

`off`

Disable automatic spelling correction and text substitutions.

`autofocus`

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

`cols`

The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is `20`.

`dirname`

 This attribute is used to indicate the text directionality of the element contents similar to the `dirname` attribute of the `<input>` element.
 For more information, see the `dirname` attribute.

`disabled`

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

`form`

The form element that the `<textarea>` element is associated with (its "form owner"). The value of the attribute must be the `id` of a form element in the same document. If this attribute is not specified, the `<textarea>` element must be a descendant of a form element. This attribute enables you to place `<textarea>` elements anywhere within a document, not just as descendants of form elements.

`maxlength`

The maximum string length (measured in UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.

`minlength`

The minimum string length (measured in UTF-16 code units) required that the user should enter.

`name`

The name of the control.

`placeholder`

A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.

**Note:** Placeholders should only be used to show an example of the type of data that should be entered into a form; they are *not* a substitute for a proper `<label>` element tied to the input. See `<input>` labels for a full explanation.

`readonly`

This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the `disabled` attribute, the `readonly` attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form.

`required`

This attribute specifies that the user must fill in a value before submitting a form.

`rows`

The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.

`spellcheck`

Specifies whether the `<textarea>` is subject to spell checking by the underlying browser/OS. The value can be:

* `true`: Indicates that the element needs to have its spelling and grammar checked.
* `default` : Indicates that the element is to act according to a default behavior, possibly based on the parent element's own `spellcheck` value.
* `false` : Indicates that the element should not be spell checked.

`wrap`

Indicates how the control should wrap the value for form submission. Possible values are:

* `hard`: The browser automatically inserts line breaks (CR+LF) so that each line is no longer than the width of the control; the `cols` attribute must be specified for this to take effect
* `soft`: The browser ensures that all line breaks in the entered value are a `CR+LF` pair, but no additional line breaks are added to the value.
* `off`
Non-standard
: Like `soft` but changes appearance to `white-space: pre` so line segments exceeding `cols` are not wrapped and the `<textarea>` becomes horizontally scrollable.

If this attribute is not specified, `soft` is its default value.

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

`<textarea>` is a replaced element — it has intrinsic dimensions, like a raster image. By default, its `display` value is `inline-block`. Compared to other form elements it is relatively easy to style, with its box model, fonts, color scheme, etc. being easily manipulable using regular CSS.

Styling HTML forms provides some useful tips on styling `<textarea>`s.

### Baseline inconsistency

The HTML specification doesn't define where the baseline of a `<textarea>` is, so different browsers set it to different positions. For Gecko, the `<textarea>` baseline is set on the baseline of the first line of the textarea, on another browser it may be set on the bottom of the `<textarea>` box. Don't use `vertical-align``: baseline` on it; the behavior is unpredictable.

### Controlling whether a textarea is resizable

In most browsers, `<textarea>`s are resizable — you'll notice the drag handle in the right-hand corner, which can be used to alter the size of the element on the page. This is controlled by the `resize` CSS property — resizing is enabled by default, but you can explicitly disable it using a `resize` value of `none`:

```css
textarea {
  resize: none;
}
```

### Styling valid and invalid values

Valid and invalid values of a `<textarea>` element (e.g. those within, and outside the bounds set by `minlength`, `maxlength`, or `required`) can be highlighted using the `:valid` and `:invalid` pseudo-classes. For example, to give your textarea a different border depending on whether it is valid or invalid:

```css
textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}
```

Examples
--------

### Basic example

The following example shows a very simple textarea, with a set numbers of rows and columns and some default content.

```html
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
```

#### Result

### Example using "minlength" and "maxlength"

This example has a minimum and maximum number of characters — of 10 and 20 respectively. Try it and see.

```html
<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">
Write something here…
</textarea>
```

#### Result

Note that `minlength` doesn't stop the user from removing characters so that the number entered goes past the minimum, but it does make the value entered into the `<textarea>` invalid. Also note that even if you have a `minlength` value set (3, for example), an empty `<textarea>` is still considered valid unless you also have the `required` attribute set.

### Example using "placeholder"

This example has a placeholder set. Notice how it disappears when you start typing into the box.

```html
<textarea
 name="textarea"
 rows="5"
 cols="30"
 placeholder="Comment text."></textarea>
```

#### Result

**Note:** Placeholders should only be used to show an example of the type of data that should be entered into a form; they are *not* a substitute for a proper `<label>` element tied to the input. See `<input>` labels for a full explanation.

### Disabled and readonly

This example shows two `<textarea>`s — one of which is `disabled`, and one of which is `readonly`. Have a play with both and you'll see the difference in behavior — the `disabled` element is not selectable in any way (and its value is not submitted), whereas the `readonly` element is selectable and its contents copyable (and its value is submitted); you just can't edit the contents.

**Note:** In browsers other than Firefox, such as chrome, the `disabled` textarea content may be selectable and copyable.

```html
<textarea name="textarea" rows="5" cols="30" disabled>
I am a disabled textarea.
</textarea>
<textarea name="textarea" rows="5" cols="30" readonly>
I am a read-only textarea.
</textarea>
```

#### Result

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content,
 Interactive content,
 listed,
 labelable,
 resettable, and
 submittable
form-associated
 element.
  |
| Permitted content | Text |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 phrasing content.
  |
| Implicit ARIA role | `textbox` |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLTextAreaElement` |

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

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

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

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

See also
--------

Other form-related elements:

* `<form>`
* `<button>`
* `<datalist>`
* `<legend>`
* `<label>`
* `<select>`
* `<optgroup>`
* `<option>`
* `<input>`
* `<fieldset>`
* `<output>`
* `<progress>`
* `<meter>`


<option>: The HTML Option element - HTML: HyperText Markup Language

<option>: The HTML Option element
=================================

The **`<option>`** HTML element is used to define an item contained in a `<select>`, an `<optgroup>`, or a `<datalist>` element. As such, `<option>` can represent menu items in popups and other lists of items in an HTML document.

Try it
------

Attributes
----------

This element includes the global attributes.

`disabled`

If this Boolean attribute is set, this option is not checkable. Often browsers grey out such control and it won't receive any browsing event, like mouse clicks or focus-related ones. If this attribute is not set, the element can still be disabled if one of its ancestors is a disabled `<optgroup>` element.

`label`

This attribute is text for the label indicating the meaning of the option. If the `label` attribute isn't defined, its value is that of the element text content.

`selected`

If present, this Boolean attribute indicates that the option is initially selected. If the `<option>` element is the descendant of a `<select>` element whose `multiple` attribute is not set, only one single `<option>` of this `<select>` element may have the `selected` attribute.

`value`

The content of this attribute represents the value to be submitted with the form, should this option be selected. If this attribute is omitted, the value is taken from the text content of the option element.

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

Styling the **`<option>`** element is highly limited. Options don't inherit the font set on the parent. In Firefox, only `color` and `background-color` can be set, however in Chrome and Safari it's not possible to set any properties. You can find more details about styling in our guide to advanced form styling.

Examples
--------

See `<select>` for examples.

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

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content |
 Text, possibly with escaped characters (like
 `é`).
  |
| Tag omission |
 The start tag is mandatory. The end tag is optional if this element is
 immediately followed by another `<option>` element or an
 `<optgroup>`, or if the parent element has no
 more content.
  |
| Permitted parents |
 A `<select>`, an
 `<optgroup>` or a
 `<datalist>` element.
  |
| Implicit ARIA role | `option` |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLOptionElement` |

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

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

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

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

See also
--------

* Other form-related elements: `<form>`, `<legend>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<optgroup>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>` and `<meter>`.


<tbody>: The Table Body element - HTML: HyperText Markup Language

<tbody>: The Table Body element
===============================

The **`<tbody>`** HTML element encapsulates a set of table rows (`<tr>` elements), indicating that they comprise the body of the table (`<table>`).

Try it
------

The `<tbody>` element, along with its related `<thead>` and `<tfoot>` elements, provide useful semantic information that can be used when rendering for either screen or printer.

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | Zero or more `<tr>` elements. |
| Tag omission |
 A `<tbody>` element's start tag can be omitted if the first thing inside the `<tbody>` element is a `<tr>` element, and if the element is not immediately preceded by a `<tbody>`, `<thead>`, or `<tfoot>` element whose end tag has been omitted. (It can't be omitted if the element is empty.)
 A `<tbody>` element's end tag can be omitted if the `<tbody>` element is immediately followed by a `<tbody>` or `<tfoot>` element, or if there is no more content in the parent element.
  |
| Permitted parents |
 Within the required parent `<table>` element,
 the `<tbody>` element can be added after a
 `<caption>`,
 `<colgroup>`, and a
 `<thead>` element.
  |
| Implicit ARIA role | `rowgroup` |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLTableSectionElement` |

Attributes
----------

This element includes the global attributes.

### Deprecated attributes

`align`
Deprecated

This enumerated attribute specifies how horizontal alignment of each 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.

As this attribute is deprecated, use the CSS `text-align` property instead.

**Note:** The equivalent `text-align` property for the `align="char"` is not implemented in any browsers yet. See the `text-align`'s browser compatibility section for the `<string>` value.

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

As this attribute is deprecated, use the CSS `background-color` property instead.

`char`
Deprecated

This attribute is used to set the character to align the cells in a column on. 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.

`charoff`
Deprecated

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

`valign`
Deprecated

This attribute specifies the vertical alignment of the text within each row of cells of the table header. 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.

As this attribute is deprecated, use the CSS `vertical-align` property instead.

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

* If the table includes a `<thead>` block (to semantically identify a row of column headers), the `<tbody>` block *must* come after it.
* If `<tr>` elements are specified outside an existing `<tbody>` element, as direct children of the `<table>`, these elements will be encapsulated by a separate `<tbody>` element generated by the browser.
* When printing a document, the `<thead>` and `<tfoot>` elements specify information that may be the same—or at least very similar—on every page of a multipage table, while the `<tbody>` element's contents generally will differ from page to page.
* When a table is presented in a screen context (such as a window) which is not large enough to display the entire table, the user agent may let the user scroll the contents of the `<thead>`, `<tbody>`, `<tfoot>`, and `<caption>` blocks separately from one another for the same parent table.
* You *may* use more than one `<tbody>` per table as long as they are all consecutive. This lets you divide the rows in large tables into sections, each of which may be separately formatted if so desired. If not marked up to be consecutive elements, browsers will correct this author error, ensuring any `<thead>` and `<tfoot>` elements are rendered as the first and last elements of the table, respectively.
Examples
--------

Below are some examples showing the use of the `<tbody>` element. For more examples of this element, see the examples for `<table>`.

### Basic example

In this relatively simple example, we create a table containing information about a group of students with a `<thead>` and a `<tbody>`, with a number of rows in the body.

#### HTML

The table's HTML is shown here. Note that all the body cells including information about students are contained within a single `<tbody>` element.

```html
<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
    </tr>
  </tbody>
</table>
```

#### CSS

The CSS to style our table is shown next.

```css
table {
  border: 2px solid #555;
  border-collapse: collapse;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    sans-serif;
}
```

First, the table's overall style attributes are set, configuring the thickness, style, and color of the table's exterior borders and using `border-collapse` to ensure that the border lines are shared among adjacent cells rather than each having its own borders with space in between. `font` is used to establish an initial font for the table.

```css
th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}
```

Then the style is set for the majority of the cells in the table, including all data cells but also those styles shared between our `<td>` and `<th>` cells. The cells are given a light gray outline which is a single pixel thick, padding is adjusted, and all cells are left-aligned using `text-align`

```css
thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}
```

Finally, header cells contained within the `<thead>` element are given additional styling. They use a darker `background-color`, a larger font size, and a thicker, darker bottom border than the other cell borders.

#### Result

The resulting table looks like this:

### Multiple bodies

You can create row groupings within a table by using multiple `<tbody>` elements. Each may potentially have its own header row or rows; however, *there can be only one `<thead>` per table!* Because of that, you need to use a `<tr>` filled with `<th>` elements to create headers within each `<tbody>`. Let's see how that's done.

Let's take the previous example, add some more students to the list, and update the table so that instead of listing each student's major on every row, the students are grouped by major, with heading rows for each major.

#### Result

First, the resulting table, so you know what we're building:

#### HTML

The revised HTML looks like this:

```html
<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2">Computer Science</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Pierce, Benjamin</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>Kirk, James</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">Russian Literature</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">Astrophysics</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Toyota, Hiroko</td>
    </tr>
  </tbody>
</table>
```

Notice that each major is placed in a separate `<tbody>` block, the first row of which contains a single `<th>` element with a `colspan` attribute that spans the entire width of the table. That heading lists the name of the major contained within the `<tbody>`.

Then each remaining row in each major's `<tbody>` consists of two cells: the first for the student's ID and the second for their name.

#### CSS
```

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    sans-serif;
}

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}
```

Most of the CSS is unchanged. We do, however, add a slightly more subtle style for header cells contained directly within a `<tbody>` (as opposed to those which reside in a `<thead>`). This is used for the headers indicating each table section's corresponding major.

```css
tbody > tr > th {
  background-color: #dde;
  border-bottom: 1.5px solid #bbb;
  font-weight: normal;
}
```

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

| Specification |
| --- |
| HTML Standard # the-tbody-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 `<tbody>` element:
    + 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 '.'.


<nav>: The Navigation Section element - HTML: HyperText Markup Language

<nav>: The Navigation Section element
=====================================

The **`<nav>`** HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.

Try it
------

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

Attributes
----------

This element only includes the global attributes.

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

* It's not necessary for all links to be contained in a `<nav>` element. `<nav>` is intended only for a major block of navigation links; typically the `<footer>` element often has a list of links that don't need to be in a `<nav>` element.
* A document may have several `<nav>` elements, for example, one for site navigation and one for intra-page navigation. `aria-labelledby` can be used in such case to promote accessibility, see example.
* User agents, such as screen readers targeting disabled users, can use this element to determine whether to omit the initial rendering of navigation-only content.
Examples
--------

In this example, a `<nav>` block is used to contain an unordered list (`<ul>`) of links. With appropriate CSS, this can be presented as a sidebar, navigation bar, or drop-down menu.

```html
<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
```

The semantics of the `nav` element is that of providing links. However a `nav` element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:

```html
<nav>
  <h2>Navigation</h2>
  <p>
    You are on my home page. To the north lies <a href="/blog">my blog</a>, from
    whence the sounds of battle can be heard. To the east you can see a large
    mountain, upon which many <a href="/school">school papers</a> are littered.
    Far up this mountain you can spy a little figure who appears to be me,
    desperately scribbling a <a href="/school/thesis">thesis</a>.
  </p>
  <p>
    To the west are several exits. One fun-looking exit is labeled
    <a href="https://games.example.com/">"games"</a>. Another more
    boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>.
  </p>
  <p>
    To the south lies a dark and dank <a href="/about">contacts page</a>.
    Cobwebs cover its disused entrance, and at one point you see a rat run
    quickly out of the page.
  </p>
</nav>
```

### Result

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

| Specification |
| --- |
| HTML Standard # the-nav-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>`, `<article>`, `<section>`, `<aside>`, h1, h2, h3, h4, h5, h6, `<hgroup>`, `<header>`, `<footer>`, `<address>`;
* Sections and outlines of an HTML document.
* ARIA: Navigation role


<menuitem> - HTML: HyperText Markup Language

<menuitem>
==========

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

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`<menuitem>`** HTML element represents a command that a user is able to invoke through a popup menu. This includes context menus, as well as menus that might be attached to a menu button.

A command can either be defined explicitly, with a textual label and optional icon to describe its appearance, or alternatively as an *indirect command* whose behavior is defined by a separate element. Commands can also optionally include a checkbox or be grouped to share radio buttons. (Menu items for indirect commands gain checkboxes or radio buttons when defined against elements `<input type="checkbox">` and `<input type="radio">`.)

Attributes
----------

This element includes the global attributes; in particular `title` can be used to describe the command, or provide usage hints.

`checked`
Deprecated

Non-standard

Boolean attribute which indicates whether the command is selected. May only be used when the `type` attribute is `checkbox` or `radio`.

`command`
Deprecated

Non-standard

Specifies the ID of a separate element, indicating a command to be invoked indirectly. May not be used within a menu item that also includes the attributes `checked`, `disabled`, `icon`, `label`, `radiogroup` or `type`.

`default`
Deprecated

Non-standard

This Boolean attribute indicates use of the same command as the menu's subject element (such as a `button` or `input`).

`disabled`
Deprecated

Non-standard

Boolean attribute which indicates that the command is not available in the current state. Note that `disabled` is distinct from `hidden`; the `disabled` attribute is appropriate in any context where a change in circumstances might render the command relevant.

`icon`
Deprecated

Non-standard

Image URL, used to provide a picture to represent the command.

`label`

The name of the command as shown to the user. Required when a `command` attribute is not present.

`radiogroup`
Deprecated

Non-standard

This attribute specifies the name of a group of commands to be toggled as radio buttons when selected. May only be used where the `type` attribute is `radio`.

`type`
Deprecated

Non-standard

This attribute indicates the kind of command, and can be one of three values.

* `command`: A regular command with an associated action. This is the missing value default.
* `checkbox`: Represents a command that can be toggled between two different states.
* `radio`: Represent one selection from a group of commands that can be toggled as radio buttons.

Examples
--------

### HTML

```html
<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">Right-click to see the adjusted context menu</div>

<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked>Checkbox</menuitem>
  <hr />
  <menuitem
 type="command"
 label="This command does nothing"
 icon="favicon-192x192.png">
    Commands don't render their contents.
  </menuitem>
  <menuitem
 type="command"
 label="This command has javascript"
 onclick="alert('command clicked')">
    Commands don't render their contents.
  </menuitem>
  <hr />
  <menuitem type="radio" radiogroup="group1">Radio Button 1</menuitem>
  <menuitem type="radio" radiogroup="group1">Radio Button 2</menuitem>
</menu>
```

### CSS

```css
div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}
```

### Result

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

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | None; it is a void element. |
| Tag omission | Must have a start tag and must not have an end tag. |
| Permitted parents |
 The `<menu>` element, where that element is in
 the *popup menu* state. (If specified, the
 `type` attribute of the `<menu>`
 element must be `popup`; if missing, the parent element of
 the `<menu>` must itself be a
 `<menu>` in the *popup menu* state.)
  |
| Permitted ARIA roles | None |
| DOM interface | `HTMLMenuItemElement` |

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

Not part of any current specifications.

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

No longer supported in any browser. Firefox, the only browser that supported this element, removed support in 85.

See also
--------

* HTML context menus in Firefox (Screencast and Code)


<xmp> - HTML: HyperText Markup Language

<xmp>
=====

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

Summary
-------

The **`<xmp>`** HTML element renders text between the start and end tags without interpreting the HTML in between and using a monospaced font. The HTML2 specification recommended that it should be rendered wide enough to allow 80 characters per line.

**Note:** Do not use this element.

* It has been deprecated since HTML3.2 and was not implemented in a consistent way. It was completely removed from current HTML.
* Use the `<pre>` element or, if semantically adequate, the `<code>` element instead. Note that you will need to escape the '`<`' character as '`<`' and the '`&`' character as '`&`' to make sure they are not interpreted as markup.
* A monospaced font can also be obtained on any element, by applying an adequate CSS style using `monospace` as the generic-font value for the `font-family` property.

Attributes
----------

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

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

This element implements the `HTMLElement` interface.

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

| Specification |
| --- |
| HTML Standard # xmp |

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

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

See also
--------

* The `<pre>` and `<code>` elements to be used instead.
* The `<plaintext>` element, similar to `<xmp>` but also obsolete.


<slot>: The Web Component Slot element - HTML: HyperText Markup Language

<slot>: The Web Component Slot element
======================================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`<slot>`** HTML element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

Attributes
----------

This element includes the global attributes.

`name`

The slot's name.

A ***named slot*** is a `<slot>` element with a `name` attribute.

Examples
--------

```html
<template id="element-details-template">
  <style>
 details {
 font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 .name {
 font-weight: bold;
 color: #217ac0;
 font-size: 120%;
 }
 h4 {
 margin: 10px 0 -8px 0;
 background: #217ac0;
 color: white;
 padding: 2px 6px;
 border: 1px solid #cee9f9;
 border-radius: 4px;
 }
 .attributes {
 margin-left: 22px;
 font-size: 90%;
 }
 .attributes p {
 margin-left: 16px;
 font-style: italic;
 }
 </style>
  <details>
    <summary>
      <code class="name">
        <<slot name="element-name">NEED NAME</slot>>
      </code>
      <span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>
```

**Note:** You can see this complete example in action at element-details (see it running live). In addition, you can find an explanation at Using templates and slots.

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content |
| Permitted content | Transparent |
| Events | `slotchange` |
| 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 | `HTMLSlotElement` |

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

| Specification |
| --- |
| HTML Standard # the-slot-element |
| DOM Standard # shadow-tree-slots |

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

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

See also
--------

* HTML `<template>` element
* HTML `slot` attribute
* CSS `::slotted` pseudo-element
* CSS scoping module