recursal/MDN huggingface dataset:
<hr>: The Thematic Break (Horizontal Rule) element
==================================================

The **`<hr>`** HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

Try it
------

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

Attributes
----------

This element's attributes include the global attributes.

`align` 
Deprecated

Non-standard

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

`color` 
Deprecated

Non-standard

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

`noshade` 
Deprecated

Non-standard

Sets the rule to have no shading.

`size` 
Deprecated

Non-standard

Sets the height, in pixels, of the rule.

`width` 
Deprecated

Non-standard

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

Example
-------

### HTML


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

<hr />

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

### Result

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

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

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

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

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

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

See also
--------

* `<p>`
* `<hr>` in `<select>`
<bdo>: The Bidirectional Text Override element
==============================================

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

Try it
------

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

Attributes
----------

This element's attributes include the global attributes.

`dir`

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

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

Examples
--------


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

### Result

Notes
-----

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

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

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

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

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

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

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

See also
--------

* Related HTML element: `<bdi>`
<big>: The Bigger Text element
==============================

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

The **`<big>`** HTML deprecated element renders the enclosed text at a font size one level larger than the surrounding text (`medium` becomes `large`, for example). The size is capped at the browser's maximum permitted font size.

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

Attributes
----------

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

Examples
--------

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

### Using big

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

#### HTML


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


#### Result

### Using CSS `font-size`

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

#### CSS


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


#### HTML


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


#### Result

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

This element implements the `HTMLElement` interface.

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

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

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

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

See also
--------

* CSS: `font-size`, `font`
* HTML: `<small>`, `<font>`, `<style>`
* HTML 4.01 Specification: Font Styles
<rb>: The Ruby Base element
===========================

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

The **`<rb>`** HTML element is used to delimit the base text component of a `<ruby>` annotation, i.e. the text that is being annotated. One `<rb>` element should wrap each separate atomic segment of the base text.

Attributes
----------

This element only includes the global attributes.

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

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

### Using rb

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


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


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

#### Result

### Separate annotations

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


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


#### Result

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

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

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

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

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

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

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

See also
--------

* `<ruby>`
* `<rt>`
* `<rp>`
* `<rtc>`
<legend>: The Field Set Legend element
======================================

The **`<legend>`** HTML element represents a caption for the content of its parent `<fieldset>`.

Try it
------

Attributes
----------

This element only includes the global attributes.

Examples
--------

See `<form>` for examples on `<legend>`.

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

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | Phrasing content
 and
 headings
 (h1–h6 elements).
  |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | 
 A `<fieldset>` whose first child is this
 `<legend>` element
  |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLLegendElement` |

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

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

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

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

See also
--------

* ARIA: Form role
<center>: The Centered Text element
===================================

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

The **`<center>`** HTML element is a block-level element that displays its block-level or inline contents centered horizontally within its containing element. The container is usually, but isn't required to be, `<body>`.

This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the CSS `text-align` property, which can be applied to the `<div>` element or to an individual `<p>`. For centering blocks, use other CSS properties like `margin-left` and `margin-right` and set them to `auto` (or set `margin` to `0 auto`).

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

This element implements the `HTMLElement` interface.

Example 1
---------


```html
<center>
  This text will be centered.
  <p>So will this paragraph.</p>
</center>
```

### Result

Example 2 (CSS alternative)
---------------------------


```html
<div style="text-align:center">
  This text will be centered.
  <p>So will this paragraph.</p>
</div>
```

### Result

Example 3 (CSS alternative)
---------------------------


```html
<p style="text-align:center">
  This line will be centered.<br />
  And so will this line.
</p>
```

### Result

**Note:** Applying `text-align``:center` to a `<div>` or `<p>` element centers the *contents* of those elements while leaving their overall dimensions unchanged.

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

| Specification |
| --- |
| HTML Standard # center |

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

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

See also
--------

* `text-align`
* `display`
<optgroup>: The Option Group element
====================================

The **`<optgroup>`** HTML element creates a grouping of options within a `<select>` element.

Try it
------

**Note:** Optgroup elements may not be nested.

Attributes
----------

This element includes the global attributes.

`disabled`

If this Boolean attribute is set, none of the items in this option group is selectable. Often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones.

`label`

The name of the group of options, which the browser can use when labeling the options in the user interface. This attribute is mandatory if this element is used.

Examples
--------


```html
<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>
```

### Result

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

|  |  |
| --- | --- |
| Content categories | None. |
| Permitted content | Zero or more `<option>` elements. |
| Tag omission | 
 The start tag is mandatory. The end tag is optional if this element is
 immediately followed by another `<optgroup>` element, or
 if the parent element has no more content.
  |
| Permitted parents | A `<select>` element. |
| Implicit ARIA role | `group` |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLOptGroupElement` |

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

| Specification |
| --- |
| HTML Standard # the-optgroup-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>`, `<option>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>` and `<meter>`.
<nobr>: The Non-Breaking Text element
=====================================

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

The **`<nobr>`** HTML element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text.

**Warning:** Although this element is widely supported, it was *never* standard HTML, so you shouldn't use it. Instead, use the CSS property `white-space` like this:


```html
<span style="white-space: nowrap;">Long line with no breaks</span>
```

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

| Specification |
| --- |
| HTML Standard # nobr |

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

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

See also
--------

* `white-space`
* `overflow`
theme-color
===========

The **`theme-color`** value for the `name` attribute of the `<meta>` element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. If specified, the `content` attribute must contain a valid CSS `<color>`.

Example
-------


```html
<meta name="theme-color" content="#4285f4" />
```


The following image shows the effect that the `<meta>` element above will have on a document displayed in Chrome running on an Android mobile device.

![Image showing the effect of using theme-color](/en-US/docs/Web/HTML/Element/meta/name/theme-color/theme-color.png)

*Image credit: from Icons & Browser Colors, created and shared by Google and used according to terms described in the Creative Commons 4.0 Attribution License.*

You can provide a media type or query inside the `media` attribute; the color will then only be set if the media condition is true. For example:


```html
<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
```

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

| Specification |
| --- |
| HTML Standard # meta-theme-color |

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

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

See also
--------

* `color-scheme` CSS property
* `prefers-color-scheme` media query
manifest
========

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**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 **`manifest`** attribute of the `<html>` element specifies a URL of an application cache manifest that is downloaded in the early stages of page load.

**Note:** manifest-based caching mechanism has been deprecated. Use service workers instead.

The `manifest` attribute only had an effect during early stages of page load, thus changing it via regular DOM interfaces had no effect. The deprecated `Window.applicationCache` interface was used instead. The attribute functionality has been superceded by the web app manifest, an external JSON file associated with the HTML file through a `<link>` with `rel="manifest"`.

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

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

See also
--------

* Service Worker API
* `manifest.json`
* Web app manifests
* Making PWAs installable
<script>: type attribute
========================

The **`type`** attribute of the `<script>` element indicates the *type* of script represented by the element: a classic script, an import map, a JavaScript module, speculation rules, or a data block.

Value
-----

The value of this attribute indicates the type of data represented by the script, and will be one of the following:

**Attribute is not set (default), an empty string, or a JavaScript MIME type**

 Indicates that the script is a "classic script", containing JavaScript code.
 Authors are encouraged to omit the attribute if the script refers to JavaScript code rather than specify a MIME type.
 JavaScript MIME types are listed in the IANA media types specification.


`importmap`

 This value indicates that the body of the element contains an import map.
 The import map is a JSON object that developers can use to control how the browser resolves module specifiers when importing JavaScript modules.


`module`

 This value causes the code to be treated as a JavaScript module.
 The processing of the script contents is deferred.
 The `charset` and `defer` attributes have no effect.
 For information on using `module`, see our JavaScript modules guide.
 Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching.


`speculationrules` 
Experimental

 This value indicates that the body of the element contains speculation rules.
 Speculation rules take the form of a JSON object that determine what resources should be prefetched or prerendered by the browser. This is part of the Speculation Rules API.


**Any other value**

 The embedded content is treated as a data block, and won't be processed by the browser.
 Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks.
 All of the other attributes will be ignored, including the `src` attribute.



**Note:** In earlier browsers, the type identified the scripting language of the embedded or imported (via the `src` attribute) code.

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

#### No specification found

No specification data found for `html.elements.script.type`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

How-to guides explain in detail how to accomplish a specific task related to PWAs.

* Associate files with your PWA
* Create a standalone app
* Customize your app's theme and background colors
* Define your app icons
* Display a badge on the app icon
* Expose common app actions as shortcuts
* Share data between apps
* Trigger installation from your PWA
Tutorials
=========

This page lists tutorials to help learn how to develop PWAs. Tutorials walk through the steps of creating an app, from start to finish, explaining how the different features of the app are implemented.

Creating your first PWA

This novice-level tutorial walks through the creation of a PWA to track menstrual cycles. Lessons include a walk through of the HTML, CSS, and JavaScript required to create a fully functional web app, setting up a testing environment, and complete explanations guiding the learner through upgrading the web app into a PWA; including developing and inspecting a manifest, adding a service worker, and using the service worker to delete stale caches.

Deep dive into PWA

This intermediate-level tutorial walks through the creation of a PWA that lists information about games submitted to the A-Frame category in the js13kGames 2017 competition. This tutorial includes all the basics for creating a PWA, with additional features, including notifications, push, and app performance.
Guides
======

This page lists guides to PWA technology. Guides give conceptual explanations of different aspects of PWAs. They're intended to help you understand what kinds of things are possible with PWAs, and to provide enough pointers to help you understand how to achieve them.

* Best practices for PWAs
* Caching
* Installing and uninstalling web apps
* Making PWAs installable
* Offline and background operation
* What is a progressive web app?