<summary>: The Disclosure Summary element - HTML: HyperText Markup Language

<summary>: The Disclosure Summary element
=========================================

The **`<summary>`** HTML element specifies a summary, caption, or legend for a `<details>` element's disclosure box. Clicking the `<summary>` element toggles the state of the parent `<details>` element open and closed.

Try it
------

Attributes
----------

This element only includes the global attributes.

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

The `<summary>` element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.

A `<summary>` element may *only* be used as the first child of a `<details>` element. When the user clicks on the summary, the parent `<details>` element is toggled open or closed, and then a `toggle` event is sent to the `<details>` element, which can be used to let you know when this state change occurs.

The content of the `<details>` provides the accessible description for the `<summary>`.

### Default label text

If a `<details>` element's first child is not a `<summary>` element, the user agent will use a default string (typically "Details") as the label for the disclosure box.

### Default style

Per the HTML specification, the default style for `<summary>` elements includes `display: list-item`. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.

You can also change the style to `display: block` to remove the disclosure triangle.

See the Browser compatibility section for details, as not all browsers support full functionality of this element yet.

For Webkit-based browsers, such as Safari, it is possible to control the icon display through the non-standard CSS pseudo-element `::-webkit-details-marker`. To remove the disclosure triangle, use `summary::-webkit-details-marker { display: none }`.

Examples
--------

Below are some examples showing `<summary>` in use. You can find more examples in the documentation for the `<details>` element.

### Basic example

A simple example showing the use of `<summary>` in a `<details>` element:

```html
<details open>
  <summary>Overview</summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>
```

#### Result

### Summaries as headings

You can use heading elements in `<summary>`, like this:

```html
<details open>
  <summary><h4>Overview</h4></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>
```

#### Result

This currently has some spacing issues that could be addressed using CSS.

**Warning:** Because the `<summary>` element has a default role of button (which strips all roles from child elements), this example will not work for users of assistive technologies such as screen readers. The `<h4>` will have its role removed and thus will not be treated as a heading for these users.

### HTML in summaries

This example adds some semantics to the `<summary>` element to indicate the label as important:

```html
<details open>
  <summary><strong>Overview</strong></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>
```

#### Result

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

|  |  |
| --- | --- |
| Permitted content | Phrasing content
 or one element of
 Heading content |
| Tag omission | None; both the start tag and the end tag are mandatory. |
| Permitted parents | The `<details>` element. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLElement` |

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

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

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

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

See also
--------

* `<details>`


<embed>: The Embed External Content element - HTML: HyperText Markup Language

<embed>: The Embed External Content element
===========================================

The **`<embed>`** HTML element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.

Try it
------

**Note:** This topic documents only the element that is defined as part of the HTML Living Standard. It does not address earlier, non-standardized implementation of the element.

Keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so relying upon `<embed>` is generally not wise if you want your site to be operable on the average user's browser.

Attributes
----------

This element's attributes include the global attributes.

`height`

The displayed height of the resource, in CSS pixels. This must be an absolute value; percentages are *not* allowed.

`src`

The URL of the resource being embedded.

`type`

The MIME type to use to select the plug-in to instantiate.

`width`

The displayed width of the resource, in CSS pixels. This must be an absolute value; percentages are *not* allowed.

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

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

Examples
--------

```html
<embed
 type="video/quicktime"
 src="movie.mov"
 width="640"
 height="480"
 title="Title of my video" />
```

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

Use the `title` attribute on an `embed` element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains. The title's value should concisely describe the embedded content. Without a title, they may not be able to determine what its embedded content is. This context shift can be confusing and time-consuming, especially if the `embed` element contains interactive content like video or audio.

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content, embedded content, interactive content,
 palpable content.
  |
| Permitted content | None; it is a void element. |
| Tag omission | Must have a start tag, and must not have an end tag. |
| Permitted parents | Any element that accepts embedded content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | `application`, `document`,
 `img`, `none`,
 `presentation` |
| DOM interface | `HTMLEmbedElement` |

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

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

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

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

See also
--------

* Other elements that are used for embedding content of various types include `<audio>`, `<canvas>`, `<iframe>`, `<img>`, `<math>`, `<object>`, `<svg>`, and `<video>`.
* Positioning and sizing the embedded content within its frame: `object-position` and `object-fit`


<title>: The Document Title element - HTML: HyperText Markup Language

<title>: The Document Title element
===================================

The **`<title>`** HTML element defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored.

```html
<title>Grandma's Heavy Metal Festival Journal</title>
```

|  |  |
| --- | --- |
| Content categories | Metadata content. |
| Permitted content | Text that is not inter-element whitespace. |
| Tag omission |
 Both opening and closing tags are required. Note that leaving off
 `</title>` should cause the browser to ignore the rest
 of the page.
  |
| Permitted parents |
 A `<head>` element that contains no other
 `<title>` element.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted. |
| DOM interface | `HTMLTitleElement` |

Attributes
----------

This element only includes the global attributes.

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

The `<title>` element is always used within a page's `<head>` block.

### Page titles and SEO

The contents of a page title can have significant implications for search engine optimization (SEO). In general, a longer, descriptive title performs better than short or generic titles. The content of the title is one of the components used by search engine algorithms to decide the order in which to list pages in search results. Also, the title is the initial "hook" by which you grab the attention of readers glancing at the search results page.

A few guidelines and tips for composing good titles:

* Avoid one- or two-word titles. Use a descriptive phrase, or a term-definition pairing for glossary or reference-style pages.
* Search engines typically display about the first 55–60 characters of a page title. Text beyond that may be lost, so try not to have titles longer than that. If you must use a longer title, make sure the important parts come earlier and that nothing critical is in the part of the title that is likely to be dropped.
* Don't use "keyword blobs." If your title is just a list of words, algorithms often reduce your page's position in the search results.
* Try to make sure your titles are as unique as possible within your own site. Duplicate—or near-duplicate—titles can contribute to inaccurate search results.
Examples
--------

```html
<title>Awesome interesting stuff</title>
```

This example establishes a page whose title (as displayed at the top of the window or in the window's tab) as "Awesome interesting stuff".

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

It is important to provide an accurate and concise title to describe the page's purpose.

A common navigation technique for users of assistive technology is to read the page title and infer the content the page contains. This is because navigating into a page to determine its content can be a time-consuming and potentially confusing process. Titles should be unique to every page of a website, ideally surfacing the primary purpose of the page first, followed by the name of the website. Following this pattern will help ensure that the primary purpose of the page is announced by a screen reader first. This provides a far better experience than having to listen to the name of a website before the unique page title, for every page a user navigates to in the same website.

### Examples

```html
<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>
```

If a form submission contains errors and the submission re-renders the current page, the title can be used to help make users aware of any errors with their submission. For instance, update the page `title` value to reflect significant page state changes (such as form validation problems).

```html
<title>
  2 errors - Your order - Sea Food Store - Food: Online takeout today!
</title>
```

**Note:** Presently, dynamically updating a page's title will not be automatically announced by screen readers. If you are going to update the page title to reflect significant changes to a page's state, then the use of ARIA Live Regions may be necessary, as well.

* MDN Understanding WCAG, Guideline 2.4 explanations
* Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.1
Specifications
--------------

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

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

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

See also
--------

* SVG `<title>` element


<source>: The Media or Image Source element - HTML: HyperText Markup Language

<source>: The Media or Image Source element
===========================================

The **`<source>`** HTML element specifies one or more media resources for the `<picture>`, `<audio>`, and `<video>` elements. It is a void element, which means that it has no content and does not require a closing tag. This element is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.

Try it
------

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | None; it is a void element. |
| Tag omission | It must have a start tag, but must not have an end tag. |
| Permitted parents |
 A media element—`<audio>` or
 `<video>`—and it must be placed before any
 flow content
 or `<track>` element.

 A `<picture>` element, and it must be placed
 before the `<img>` element.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLSourceElement` |

Attributes
----------

This element supports all global attributes. In addition, the following attributes can be used with it:

`type`

Specifies the MIME media type of the image or other media type, optionally including a `codecs` parameter.

`src`

Specifies the URL of the media resource. Required if the parent of `<source>` is `<audio>` or `<video>`. Not allowed if the parent is `<picture>`.

`srcset`

Specifies a comma-separated list of one or more image URLs and their descriptors. Required if the parent of `<source>` is `<picture>`. Not allowed if the parent is `<audio>` or `<video>`.

The list consists of strings separated by commas, indicating a set of possible images for the browser to use. Each string is composed of:

* A URL specifying an image location.
* An optional width descriptor—a positive integer directly followed by `"w"`, such as `300w`.
* An optional pixel density descriptor—a positive floating number directly followed by `"x"`, such as `2x`.

Each string in the list must have either a width descriptor or a pixel density descriptor to be valid. These two descriptors should not be used together; only one should be used consistently throughout the list. The value of each descriptor in the list must be unique. The browser chooses the most adequate image to display at a given point of time based on these descriptors. If the descriptors are not specified, the default value used is `1x`. If the `sizes` attribute is also present, then each string must include a width descriptor. If the browser does not support `srcset`, then `src` will be used for the default image source.

`sizes`

Specifies a list of source sizes that describe the final rendered width of the image. Allowed if the parent of `<source>` is `<picture>`. Not allowed if the parent is `<audio>` or `<video>`.

The list consists of source sizes separated by commas. Each source size is media condition-length pair. Before laying the page out, the browser uses this information to determine which image defined in `srcset` to display. Note that `sizes` will take effect only if width descriptors are provided with `srcset`, not pixel density descriptors (i.e., `200w` should be used instead of `2x`).

`media`

Specifies the media query for the resource's intended media.

`height`

Specifies the intrinsic height of the image in pixels. Allowed if the parent of `<source>` is a `<picture>`. Not allowed if the parent is `<audio>` or `<video>`.

The height value must be an integer without any units.

`width`

Specifies the intrinsic width of the image in pixels. Allowed if the parent of `<source>` is a `<picture>`. Not allowed if the parent is `<audio>` or `<video>`.

The width value must be an integer without any units.

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

The `<source>` element is a **void element**, which means that it not only has no content but also has no closing tag. That is, you *never* use "`</source>`" in your HTML.

The browser goes through a list of `<source>` elements to find a format it supports. It uses the first one it can display. For each `<source>` element:

* If the `type` attribute isn't specified, the browser retrieves the media's type from the server and determines if it can be displayed. If the media can't be rendered, the browser checks the next `<source>` in the list.
* If the `type` attribute is specified, the browser immediately compares it with the media types it can display. If the type is not supported, the browser skips querying the server and directly checks the next `<source>` element.

If none of the `<source>` elements provide a usable source:

* In the case of a `<picture>` element, the browser will fall back to using the image specified in the `<picture>` element's `<img>` child.
* In the case of an `<audio>` or `<video>` element, the browser will fall back to displaying the content included between the element's opening and closing tags.

For information about image formats supported by web browsers and guidance on selecting appropriate formats to use, see our Image file type and format guide. For details on the video and audio media types you can use, see the Media type and format guide.

Examples
--------

### Using the `type` attribute with `<video>`

This example demonstrates how to offer a video in different formats: WebM for browsers that support it, Ogg for those that support Ogg, and QuickTime for browsers that support QuickTime. If the `<audio>` or `<video>` element is not supported by the browser, a notice is displayed instead. If the browser supports the element but does not support any of the specified formats, an `error` event is raised and the default media controls (if enabled) will indicate an error. For more details on which media file formats to use and their browser support, refer to our Media type and format guide.

```html
<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  I'm sorry; your browser doesn't support HTML video.
</video>
```

### Using the `media` attribute with `<video>`

This example demonstrates how to offer an alternate source file for viewports above a certain width. When a user's browsing environment meets the specified `media` condition, the associated `<source>` element is chosen. The contents of its `src` attribute are then requested and rendered. If the `media` condition does not match, the browser will move on to the next `<source>` in the list. The second `<source>` option in the code below has no `media` condition, so it will be selected for all other browsing contexts.

```html
<video controls>
  <source src="foo-large.webm" media="(min-width: 800px)" />
  <source src="foo.webm" />
  I'm sorry; your browser doesn't support HTML video.
</video>
```

For more examples, the Video and audio content article in the Learn area is a great resource.

### Using the `media` attribute with `<picture>`

In this example, two `<source>` elements are included within `<picture>`, providing versions of an image to use when the available space exceeds certain widths. If the available width is less than the smallest of these widths, the browser will fall back to the image specified in the `<img>` element.

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

With the `<picture>` element, you must always include an `<img>` with a fallback image. Also, make sure to add an `alt` attribute for accessibility, unless the image is purely decorative and irrelevant to the content.

### Using `height` and `width` attributes with `<picture>`

 In this example, three `<source>` elements with `height` and `width` attributes are included in a `<picture>` element.
 A media query allows the browser to select an image to display with the `height` and `width` attributes based on the viewport size.

```html
<picture>
  <source
 srcset="landscape.png"
 media="(min-width: 1000px)"
 width="1000"
 height="400" />
  <source
 srcset="square.png"
 media="(min-width: 800px)"
 width="800"
 height="800" />
  <source
 srcset="portrait.png"
 media="(min-width: 600px)"
 width="600"
 height="800" />
  <img
 src="fallback.png"
 alt="Image used when the browser does not support the sources"
 width="500"
 height="400" />
</picture>
```

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

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

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

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

See also
--------

* `<audio>` element
* `<picture>` element
* `<video>` element
* Image file type and format guide
* Media type and format guide
* Web performance


<figure>: The Figure with Optional Caption element - HTML: HyperText Markup Language

<figure>: The Figure with Optional Caption element
==================================================

The **`<figure>`** HTML element represents self-contained content, potentially with an optional caption, which is specified using the `<figcaption>` element. The figure, its caption, and its contents are referenced as a single unit.

Try it
------

Attributes
----------

This element only includes the global attributes.

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

* Usually a `<figure>` is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.
* A caption can be associated with the `<figure>` element by inserting a `<figcaption>` inside it (as the first or the last child). The first `<figcaption>` element found in the figure is presented as the figure's caption.
* The `<figcaption>` provides the accessible description for the parent `<figure>`.
Examples
--------

### Images

```html
<!-- Just an image -->
<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
</figure>

<!-- Image with a caption -->
<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
  <figcaption>MDN Logo</figcaption>
</figure>
```

#### Result

### Code snippets

```html
<figure>
  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>
```

#### Result

### Quotations

```html
<figure>
  <figcaption><b>Edsger Dijkstra:</b></figcaption>
  <blockquote>
    If debugging is the process of removing software bugs, then programming must
    be the process of putting them in.
  </blockquote>
</figure>
```

#### Result

### Poems

```html
<figure>
  <p style="white-space:pre">
    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
    green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and
    yet no footing seen: Love is a spirit all compact of fire, Not gross to
    sink, but light, and will aspire.
  </p>
  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
</figure>
```

#### Result

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 palpable content.
  |
| Permitted content |
 A `<figcaption>` element, followed by
 flow content; or flow content followed by a
 `<figcaption>` element; or flow content.
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
 Any element that accepts
 Flow content.
  |
| Implicit ARIA role | figure |
| Permitted ARIA roles |
 With no
 figcaption descendant:
 any,
 otherwise no permitted roles
  |
| DOM interface | `HTMLElement` |

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

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

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

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

See also
--------

* The `<figcaption>` element.


<em>: The Emphasis element - HTML: HyperText Markup Language

<em>: The Emphasis element
==========================

The **`<em>`** HTML element marks text that has stress emphasis. The `<em>` element can be nested, with each level of nesting indicating a greater degree of emphasis.

Try it
------

Attributes
----------

This element only includes the global attributes.

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

The `<em>` element is for words that have a stressed emphasis compared to surrounding text, which is often limited to a word or words of a sentence and affects the meaning of the sentence itself.

Typically this element is displayed in italic type. However, it should not be used to apply italic styling; use the CSS `font-style` property for that purpose. Use the `<cite>` element to mark the title of a work (book, play, song, etc.). Use the `<i>` element to mark text that is in an alternate tone or mood, which covers many common situations for italics such as scientific names or words in other languages. Use the `<strong>` element to mark text that has greater importance than surrounding text.

### <i> vs. <em>

Some developers may be confused by how multiple elements seemingly produce similar visual results. `<em>` and `<i>` are a common example, since they both italicize text. What's the difference? Which should you use?

By default, the visual result is the same. However, the semantic meaning is different. The `<em>` element represents stress emphasis of its contents, while the `<i>` element represents text that is set off from the normal prose, such as a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (The title of a work, such as the name of a book or movie, should use `<cite>`.)

This means the right one to use depends on the situation. Neither is for purely decorative purposes, that's what CSS styling is for.

An example for `<em>` could be: "Just *do* it already!", or: "We *had* to do something about it". A person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress.

An example for `<i>` could be: "The *Queen Mary* sailed last night". Here, there is no added emphasis or importance on the word "Queen Mary". It is merely indicated that the object in question is not a queen named Mary, but a ship named *Queen Mary*. Another example for `<i>` could be: "The word *the* is an article".

Examples
--------

In this example, the `<em>` element is used to highlight an implicit or explicit contrast between two ingredient lists:

```html
<p>
  Ice cream is made with milk, sweetener, and cream. Frozen custard, on the
  other hand, is made of milk, cream, sweetener, and <em>egg yolks</em>.
</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 | `emphasis` |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` Up to Gecko 1.9.2 (Firefox 4)
 inclusive, Firefox implements the
 `HTMLSpanElement` interface for this element.
  |

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

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

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

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

See also
--------

* `<i>`


<u>: The Unarticulated Annotation (Underline) element - HTML: HyperText Markup Language

<u>: The Unarticulated Annotation (Underline) element
=====================================================

The **`<u>`** HTML element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS.

**Warning:** This element used to be called the "Underline" element in older versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS `text-decoration` property set to `underline`.

Try it
------

See the Usage notes section for further details on when it's appropriate to use `<u>` and when it isn't.

Attributes
----------

This element only includes the global attributes.

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

Along with other pure styling elements, the original HTML Underline (`<u>`) element was deprecated in HTML 4; however, `<u>` was restored in HTML 5 with a new, semantic, meaning: to mark text as having some form of non-textual annotation applied.

**Note:** Avoid using the `<u>` element with its default styling (of underlined text) in such a way as to be confused with a hyperlink, which is also underlined by default.

### Use cases

Valid use cases for the `<u>` element include annotating spelling errors, applying a proper name mark to denote proper names in Chinese text, and other forms of annotation.

You should *not* use `<u>` to underline text for presentation purposes, or to denote titles of books.

### Other elements to consider using

In most cases, you should use an element other than `<u>`, such as:

* `<em>` to denote stress emphasis
* `<b>` to draw attention to text
* `<mark>` to mark key words or phrases
* `<strong>` to indicate that text has strong importance
* `<cite>` to mark the titles of books or other publications
* `<i>` to denote technical terms, transliterations, thoughts, or names of vessels in Western texts

To provide textual annotations (as opposed to the non-textual annotations created with `<u>`), use the `<ruby>` element.

To apply an underlined appearance without any semantic meaning, use the `text-decoration` property's value `underline`.

Examples
--------

### Indicating a spelling error

This example uses the `<u>` element and some CSS to display a paragraph which includes a misspelled error, with the error indicated in the red wavy underline style which is fairly commonly used for this purpose.

#### HTML

```html
<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>
```

In the HTML, we see the use of `<u>` with a class, `spelling`, which is used to indicate the misspelling of the word "wrongly".

#### CSS

```css
u.spelling {
  text-decoration: red wavy underline;
}
```

This CSS indicates that when the `<u>` element is styled with the class `spelling`, it should have a red wavy underline underneath its text. This is a common styling for spelling errors. Another common style can be presented using `red dashed underline`.

#### Result

The result should be familiar to anyone who has used any of the more popular word processors available today.

### Avoiding <u>

Most of the time, you actually don't want to use `<u>`. Here are some examples that show what you should do instead in several cases.

#### Non-semantic underlines

To underline text without implying any semantic meaning, use a `<span>` element with the `text-decoration` property set to `"underline"`, as shown below.

##### HTML

```html
<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots
```

##### CSS

```css
.underline {
  text-decoration: underline;
}
```

##### Result

#### Presenting a book title

Book titles should be presented using the `<cite>` element instead of `<u>` or even `<i>`.

##### Using the cite element

```html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
```

##### Styling the cite element

The default styling for the `<cite>` element renders the text in italics. You can override that using CSS:

```html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
```

```css
cite {
  font-style: normal;
  text-decoration: underline;
}
```

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

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

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

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

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

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

See also
--------

* The `<span>`, `<i>`, `<em>`, `<b>`, and `<cite>` elements should usually be used instead.
* The CSS `text-decoration` property should be used for non-semantic underlining.


<iframe>: The Inline Frame element - HTML: HyperText Markup Language

<iframe>: The Inline Frame element
==================================

The **`<iframe>`** HTML element represents a nested browsing context, embedding another HTML page into the current one.

Try it
------

Each embedded browsing context has its own document and allows URL navigations. The navigations of each embedded browsing context are linearized into the session history of the *topmost* browsing context. The browsing context that embeds the others is called the *parent browsing context*. The *topmost* browsing context — the one with no parent — is usually the browser window, represented by the `Window` object.

**Warning:** Because each browsing context is a complete document environment, every `<iframe>` in a page requires increased memory and other computing resources. While theoretically you can use as many `<iframe>`s as you like, check for performance problems.

Attributes
----------

This element includes the global attributes.

`allow`

Specifies a Permissions Policy for the `<iframe>`. The policy defines what features are available to the `<iframe>` (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.

**Note:** A Permissions Policy specified by the `allow` attribute implements a further restriction on top of the policy specified in the `Permissions-Policy` header. It doesn't replace it.

`allowfullscreen`

Set to `true` if the `<iframe>` can activate fullscreen mode by calling the `requestFullscreen()` method.

**Note:** This attribute is considered a legacy attribute and redefined as `allow="fullscreen"`.

`allowpaymentrequest`
Deprecated

Non-standard

Set to `true` if a cross-origin `<iframe>` should be allowed to invoke the Payment Request API.

**Note:** This attribute is considered a legacy attribute and redefined as `allow="payment"`.

`credentialless`
Experimental

Non-standard

Set to `true` to make the `<iframe>` credentialless, meaning that its content will be loaded in a new, ephemeral context. It doesn't have access to the network, cookies, and storage data associated with its origin. It uses a new context local to the top-level document lifetime. In return, the `Cross-Origin-Embedder-Policy` (COEP) embedding rules can be lifted, so documents with COEP set can embed third-party documents that do not. See IFrame credentialless for more details.

`csp`
Experimental

A Content Security Policy enforced for the embedded resource. See `HTMLIFrameElement.csp` for details.

`height`

The height of the frame in CSS pixels. Default is `150`.

`loading`

Indicates when the browser should load the iframe:

`eager`

Load the iframe immediately on page load (this is the default value).

`lazy`

 Defer loading of the iframe until it reaches a calculated distance from the visual viewport, as defined by the browser.
 The intent is to avoid using the network and storage bandwidth required to fetch the frame until the browser is reasonably certain that it will be needed.
 This improves the performance and cost in most typical use cases, in particular by reducing initial page load times.

**Note:** Loading is only deferred when JavaScript is enabled.
 This is an anti-tracking measure.

`name`

A targetable name for the embedded browsing context. This can be used in the `target` attribute of the `<a>`, `<form>`, or `<base>` elements; the `formtarget` attribute of the `<input>` or `<button>` elements; or the `windowName` parameter in the `window.open()` method.

`referrerpolicy`

Indicates which referrer to send when fetching the frame's resource:

`no-referrer`

The `Referer` header will not be sent.

`no-referrer-when-downgrade`

The `Referer` header will not be sent to origins without TLS (HTTPS).

`origin`

The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.

`origin-when-cross-origin`

The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.

`same-origin`

A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.

`strict-origin`

Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).

`strict-origin-when-cross-origin` (default)

Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).

`unsafe-url`

The referrer will include the origin *and* the path (but not the fragment, password, or username). **This value is unsafe**, because it leaks origins and paths from TLS-protected resources to insecure origins.

`sandbox`

Controls the restrictions applied to the content embedded in the `<iframe>`. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:

`allow-downloads`

Allows downloading files through an `<a>` or `<area>` element with the download attribute, as well as through the navigation that leads to a download of a file. This works regardless of whether the user clicked on the link, or JS code initiated it without user interaction.

`allow-downloads-without-user-activation`
Experimental

Allows for downloads to occur without a gesture from the user.

`allow-forms`

Allows the page to submit forms. If this keyword is not used, form will be displayed as normal, but submitting it will not trigger input validation, sending data to a web server or closing a dialog.

`allow-modals`

Allows the page to open modal windows by `Window.alert()`, `Window.confirm()`, `Window.print()` and `Window.prompt()`, while opening a `<dialog>` is allowed regardless of this keyword. It also allows the page to receive `BeforeUnloadEvent` event.

`allow-orientation-lock`

Lets the resource lock the screen orientation.

`allow-pointer-lock`

Allows the page to use the Pointer Lock API.

`allow-popups`

Allows popups (like from `Window.open()`, `target="_blank"`, `Window.showModalDialog()`). If this keyword is not used, that functionality will silently fail.

`allow-popups-to-escape-sandbox`

Allows a sandboxed document to open a new browsing context without forcing the sandboxing flags upon it. This will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon the page the ad links to. If this flag is not included, a redirected page, popup window, or new tab will be subject to the same sandbox restrictions as the originating `<iframe>`.

`allow-presentation`

Allows embedders to have control over whether an iframe can start a presentation session.

`allow-same-origin`

If this token is not used, the resource is treated as being from a special origin that always fails the same-origin policy (potentially preventing access to data storage/cookies and some JavaScript APIs).

`allow-scripts`

Allows the page to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.

`allow-storage-access-by-user-activation`
Experimental

Allows a document loaded in the `<iframe>` to use the Storage Access API to request access to unpartitioned cookies.

`allow-top-navigation`

Lets the resource navigate the top-level browsing context (the one named `_top`).

`allow-top-navigation-by-user-activation`

Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.

`allow-top-navigation-to-custom-protocols`

Allows navigations to non-`http` protocols built into browser or registered by a website. This feature is also activated by `allow-popups` or `allow-top-navigation` keyword.

**Note:**

* When the embedded document has the same origin as the embedding page, it is **strongly discouraged** to use both `allow-scripts` and `allow-same-origin`, as that lets the embedded document remove the `sandbox` attribute — making it no more secure than not using the `sandbox` attribute at all.
* Sandboxing is useless if the attacker can display content outside a sandboxed `iframe` — such as if the viewer opens the frame in a new tab. Such content should be also served from a *separate origin* to limit potential damage.

**Note:** When redirecting the user, opening a popup window, or opening a new tab from an embedded page within an `<iframe>` with the `sandbox` attribute, the new browsing context is subject to the same `sandbox` restrictions. This can create issues — for example, if a page embedded within an `<iframe>` without a `sandbox="allow-forms"` or `sandbox="allow-popups-to-escape-sandbox"` attribute set on it opens a new site in a separate tab, form submission in that new browsing context will silently fail.

`src`

The URL of the page to embed. Use a value of `about:blank` to embed an empty page that conforms to the same-origin policy. Also note that programmatically removing an `<iframe>`'s src attribute (e.g. via `Element.removeAttribute()`) causes `about:blank` to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.

`srcdoc`

Inline HTML to embed, overriding the `src` attribute. If a browser does not support the `srcdoc` attribute, it will fall back to the URL in the `src` attribute.

`width`

The width of the frame in CSS pixels. Default is `300`.

### Deprecated attributes

These attributes are deprecated and may no longer be supported by all user agents. You should not use them in new content, and try to remove them from existing content.

`align`
Deprecated

The alignment of this element with respect to the surrounding context.

`frameborder`
Deprecated

The value `1` (the default) draws a border around this frame. The value `0` removes the border around this frame, but you should instead use the CSS property `border` to control `<iframe>` borders.

`longdesc`
Deprecated

A URL of a long description of the frame's content. Due to widespread misuse, this is not helpful for non-visual browsers.

`marginheight`
Deprecated

The amount of space in pixels between the frame's content and its top and bottom borders.

`marginwidth`
Deprecated

The amount of space in pixels between the frame's content and its left and right borders.

`scrolling`
Deprecated

Indicates when the browser should provide a scrollbar for the frame:

`auto`

Only when the frame's content is larger than its dimensions.

`yes`

Always show a scrollbar.

`no`

Never show a scrollbar.

Scripting
---------

Inline frames, like `<frame>` elements, are included in the `window.frames` pseudo-array.

With the DOM `HTMLIFrameElement` object, scripts can access the `window` object of the framed resource via the `contentWindow` property. The `contentDocument` property refers to the `document` inside the `<iframe>`, same as `contentWindow.document`.

From the inside of a frame, a script can get a reference to its parent window with `window.parent`.

Script access to a frame's content is subject to the same-origin policy. Scripts cannot access most properties in other `window` objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved using `Window.postMessage()`.

Positioning and scaling
-----------------------

As a replaced element, the position, alignment, and scaling of the embedded document within the `<iframe>` element's box, can be adjusted with the `object-position` and `object-fit` properties.

`error` and `load` event behavior
---------------------------------

The `error` and `load` events fired on `<iframe>`s could be used to probe the URL space of the local network's HTTP servers. Therefore, as a security precaution user agents do not fire the error event on `<iframe>`s, and the load event is always triggered even if the `<iframe>` content fails to load.

Examples
--------

### A simple <iframe>

This example embeds the page at https://example.org in an iframe.

#### HTML

```html
<iframe
 src="https://example.org"
 title="iframe Example 1"
 width="400"
 height="300">
</iframe>
```

#### Result

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

People navigating with assistive technology such as a screen reader can use the `title` attribute on an `<iframe>` to label its content. The title's value should concisely describe the embedded content:

```html
<iframe
 title="Wikipedia page for Avocados"
 src="https://en.wikipedia.org/wiki/Avocado"></iframe>
```

Without this title, they have to navigate into the `<iframe>` to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple `<iframe>`s and/or if embeds contain interactive content like video or audio.

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content, embedded content, interactive content, palpable content.
  |
| Permitted content | None. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts embedded content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | `application`, `document`,
 `img`, `none`,
 `presentation` |
| DOM interface | `HTMLIFrameElement` |

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

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

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

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

See also
--------

* CSP: frame-ancestors
* Privacy, permissions, and information security


<output>: The Output element - HTML: HyperText Markup Language

<output>: The Output element
============================

The **`<output>`** HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.

Attributes
----------

This element includes the global attributes.

`for`

A space-separated list of other elements' `id`s, indicating that those elements contributed input values to (or otherwise affected) the calculation.

`form`

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

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

`name`

The element's name. Used in the `form.elements` API.

The `<output>` value, name, and contents are NOT submitted during form submission.

Examples
--------

In the following example, the form provides a slider whose value can range between `0` and `100`, and an `<input>` element into which you can enter a second number. The two numbers are added together, and the result is displayed in the `<output>` element each time the value of any of the controls changes.

```html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>
```

### Result

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

Many browsers implement this element as an `aria-live` region. Assistive technology will thereby announce the results of UI interactions posted inside it without requiring that focus is switched away from the controls that produce those results.

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content,
 listed,
 labelable,
 resettable
form-associated element, 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 | `status` |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLOutputElement` |

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

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

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

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


<caption>: The Table Caption element - HTML: HyperText Markup Language

<caption>: The Table Caption element
====================================

The **`<caption>`** HTML element specifies the caption (or title) of a table, providing the table an accessible description.

Try it
------

Attributes
----------

This element includes the global attributes.

### 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 indicates how the caption must be aligned with respect to the table. It may have one of the following values:

`left`

The caption is displayed to the left of the table.

`top`

The caption is displayed above the table.

`right`

The caption is displayed to the right of the table.

`bottom`

The caption is displayed below the table.

**Warning:** Do not use this attribute, as it has been deprecated. The `<caption>` element should be styled using the CSS properties `caption-side` and `text-align`.

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

If used, the `<caption>` element must be the first child of its parent `<table>` element.

When the `<table>` element that contains the `<caption>` is the only descendant of a `<figure>` element, you should use the `<figcaption>` element instead of `<caption>`.

A `background-color` on the table will not include the caption. Add a `background-color` to the `<caption>` element as well if you want the same color to be behind both.

Example
-------

This simple example presents a table that includes a caption.

```html
<table>
  <caption>
    Example Caption
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@sample.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@sample.com</td>
  </tr>
</table>
```

```
caption {
  caption-side: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  border: 1px solid black;
}
```

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

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | Flow content. |
| Tag omission |
 The end tag can be omitted if the element is not immediately followed by
 ASCII whitespace or a comment.
  |
| Permitted parents | A `<table>` element, as its first descendant. |
| Implicit ARIA role | `caption` |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLTableCaptionElement` |

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

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

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

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

See also
--------

* CSS properties that may be specially useful to style the `<caption>` element:
    + `text-align`, `caption-side`.


<track>: The Embed Text Track element - HTML: HyperText Markup Language

<track>: The Embed Text Track element
=====================================

The **`<track>`** HTML element is used as a child of the media elements, `<audio>` and `<video>`. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (`.vtt` files) — Web Video Text Tracks.

Try it
------

|  |  |
| --- | --- |
| Content categories | None |
| Permitted content | None; it is a void element. |
| Tag omission |
 As it is a void element, the start tag must be present and the end tag
 must not be present.
  |
| Permitted parents |
 A media element, `<audio>` or
 `<video>`.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLTrackElement` |

Attributes
----------

This element includes the global attributes.

`default`

This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. This may only be used on one `track` element per media element.

`kind`

How the text track is meant to be used. If omitted the default kind is `subtitles`. If the attribute contains an invalid value, it will use `metadata` (Versions of Chrome earlier than 52 treated an invalid value as `subtitles`). The following keywords are allowed:

* `subtitles`
    + Subtitles provide translation of content that cannot be understood by the viewer. For example speech or text that is not English in an English language film.
    + Subtitles may contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene.
* `captions`
    + Closed captions provide a transcription and possibly a translation of audio.
    + It may include important non-verbal information such as music cues or sound effects. It may indicate the cue's source (e.g. music, text, character).
    + Suitable for users who are deaf or when the sound is muted.
* `descriptions`
    + Textual description of the video content.
    + Suitable for users who are blind or where the video cannot be seen.
* `chapters`
    + Chapter titles are intended to be used when the user is navigating the media resource.
* `metadata`
    + Tracks used by scripts. Not visible to the user.

`label`

A user-readable title of the text track which is used by the browser when listing available text tracks.

`src`

Address of the track (`.vtt` file). Must be a valid URL. This attribute must be specified and its URL value must have the same origin as the document — unless the `<audio>` or `<video>` parent element of the `track` element has a `crossorigin` attribute.

`srclang`

Language of the track text data. It must be a valid BCP 47 language tag. If the `kind` attribute is set to `subtitles`, then `srclang` must be defined.

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

### Track data types

The type of data that `track` adds to the media is set in the `kind` attribute, which can take values of `subtitles`, `captions`, `descriptions`, `chapters` or `metadata`. The element points to a source file containing timed text that the browser exposes when the user requests additional data.

A media element cannot have more than one `track` with the same `kind`, `srclang`, and `label`.

### Detecting cue changes

The underlying `TextTrack`, indicated by the `track` property, receives a `cuechange` event every time the currently-presented cue is changed. This happens even if the track isn't associated with a media element.

If the track *is* associated with a media element, using the `<track>` element as a child of the `<audio>` or `<video>` element, the `cuechange` event is also sent to the `HTMLTrackElement`.

```js
let textTrackElem = document.getElementById("texttrack");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});
```

Examples
--------

```html
<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en" />
  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_de.vtt" srclang="de" />
  <track kind="subtitles" src="sampleSubtitles\_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_ja.vtt" srclang="ja" />
  <track kind="subtitles" src="sampleSubtitles\_oz.vtt" srclang="oz" />
  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
  <!-- Fallback -->
  …
</video>
```

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

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

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

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

See also
--------

* WebVTT text track format
* `HTMLMediaElement.textTracks`


<wbr>: The Line Break Opportunity element - HTML: HyperText Markup Language

<wbr>: The Line Break Opportunity element
=========================================

The **`<wbr>`** HTML element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

Try it
------

Attributes
----------

This element only includes the global attributes.

Notes
-----

On UTF-8 encoded pages, `<wbr>` behaves like the `U+200B ZERO-WIDTH SPACE` code point. In particular, it behaves like a Unicode bidi BN code point, meaning it has no effect on bidi-ordering: `<div dir=rtl>123,<wbr>456</div>` displays, when not broken on two lines, `123,456` and not `456,123`.

For the same reason, the `<wbr>` element does not introduce a hyphen at the line break point. To make a hyphen appear only at the end of a line, use the soft hyphen character entity (``) instead.

Examples
--------

*The Yahoo Style Guide* recommends breaking a URL *before* punctuation, to avoid leaving a punctuation mark at the end of the line, which the reader might mistake for the end of the URL.

```html
<p>
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>
```

### Result

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

|  |  |
| --- | --- |
| Content categories | Flow content,
 phrasing content.
  |
| Permitted content | Empty |
| Tag omission |
 It is a void element; it must have a start
 tag, but must not have an end tag.
  |
| Permitted parents |
 Any element that accepts
 phrasing content.
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLElement` |

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

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

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

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

See also
--------

* `overflow-wrap`
* `word-break`
* `hyphens`
* The `<br>` element


<acronym> - HTML: HyperText Markup Language

<acronym>
=========

**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 **`<acronym>`** HTML element allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word.

**Warning:** Don't use this element. Use the `<abbr>` element instead.

Attributes
----------

This element only has global attributes, which are common to all elements.

DOM Interface
-------------

This element implements the `HTMLElement` interface.

Examples
--------

```html
<p>
  The <acronym title="World Wide Web">WWW</acronym> is only a component of the
  Internet.
</p>
```

### Result

Default styling
---------------

Though the purpose of this tag is purely for the convenience of the author, its default styling varies from one browser to another:

* Opera, Firefox, Chrome, and some others add a dotted underline to the content of the element.
* A few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like `font-variant``: none` in the CSS takes care of this case.

It is therefore recommended that web authors either explicitly style this element, or accept some cross-browser variation.

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

| Specification |
| --- |
| HTML Standard # acronym |

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

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

See also
--------

* The `<abbr>` HTML element


<span>: The Content Span element - HTML: HyperText Markup Language

<span>: The Content Span element
================================

The **`<span>`** HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the `class` or `id` attributes), or because they share attribute values, such as `lang`. It should be used only when no other semantic element is appropriate. `<span>` is very much like a `<div>` element, but `<div>` is a block-level element whereas a `<span>` is an inline-level element.

Try it
------

Attributes
----------

This element only includes the global attributes.

Example
-------

### Example 1

#### HTML

```html
<p><span>Some text</span></p>
```

#### Result

### Example 2

#### HTML

```html
<li>
  <span>
    <a href="portfolio.html" target="\_blank">See my portfolio</a>
  </span>
</li>
```

#### CSS

```css
li span {
  background: gold;
}
```

#### Result

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

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

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

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

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

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

See also
--------

* HTML `<div>` element


<plaintext>: The Plain Text element (Deprecated) - HTML: HyperText Markup Language

<plaintext>: The Plain Text element (Deprecated)
================================================

**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 **`<plaintext>`** HTML element renders everything following the start tag as raw text, ignoring any following HTML. There is no closing tag, since everything after it is considered raw text.

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

* `<plaintext>` is deprecated since HTML 2, and not all browsers implemented it. Browsers that did implement it didn't do so consistently.
* `<plaintext>` is obsolete; browsers that accept it may instead treat it as a `<pre>` element that still interprets HTML within.
* If `<plaintext>` is the first element on the page (other than any non-displayed elements, like `<head>`), do not use HTML at all. Instead serve a text file with the `text/plain` MIME-type.
* Instead of `<plaintext>`, use the `<pre>` element or, if semantically accurate (such as for inline text), the `<code>` element. Escape any `<`, `>` and `&` characters, to prevent browsers inadvertently parsing content the element content as HTML.
* A monospaced font can be applied to any HTML element via a CSS `font-family` style with the `monospace` generic value.

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

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

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

See also
--------

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


<q>: The Inline Quotation element - HTML: HyperText Markup Language

<q>: The Inline Quotation element
=================================

The **`<q>`** HTML element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the `<blockquote>` element.

Try it
------

Attributes
----------

This element includes the global attributes.

`cite`

The value of this attribute is a URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.

Examples
--------

```html
<p>
  According to Mozilla's website,
  <q cite="https://www.mozilla.org/en-US/about/history/details/">
    Firefox 1.0 was released in 2004 and became a big success.
  </q>
</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 | `generic` |
| Permitted ARIA roles | Any |
| DOM interface | `HTMLQuoteElement` |

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

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

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

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

See also
--------

* The `<blockquote>` element for long quotations.
* The `<cite>` element for source citations.