### selectionStart

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sec-forms.html

Gets or sets the offset to the start of the selection.

```APIDOC
## selectionStart

### Description
Returns the offset to the start of the selection. Can be set to change the start of the selection.

### Property
selectionStart

### Syntax
element.selectionStart

### Parameters
- value (number) - Optional - The new offset for the start of the selection.

### Returns
- offset (number) - The current offset to the start of the selection.

### Example
```js
let start = input.selectionStart;
input.selectionStart = 0;
```
```

--------------------------------

### GET form submission example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sec-forms.html

A simple form using the GET method. When submitted, the user agent loads the action URL with query parameters appended, e.g., /find?t=cats&q=fur.

```html
<form action="/find" method="get">
  <input type="text" name="t">
  <input type="search" name="q">
  <input type="submit">
</form>
```

--------------------------------

### HTML nav element example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sections.html

Example of a nav element with a list of links.

```html
<nav>
  <ul>
    <li><a href="/">Home</a>
    <li><a href="/biog.html">Bio</a>
    <li><a href="/discog.html">Discog</a>
  </ul>
</nav>
```

--------------------------------

### HTML with required tags due to attributes

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/syntax.html

The same example but with attributes on the html and body elements, requiring those start tags to be present.

```html
<!DOCTYPE html><html lang="en"><title>Hello</title><body class="demo"><p>Welcome to this example.

```

--------------------------------

### Image map example with home link

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

An image map example showing a link to the home page.

```html
<a href="home.html" id="home">Home</a>
```

--------------------------------

### HTML document after omitting <html> start tag

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/syntax.html

The same document as the previous example but with the <html> start tag removed. The DOM is identical to the original.

```html
<!DOCTYPE html>

<head>
  <title>Hello</title>
</head>
<body>
  <p>Welcome to this example.</p>
</body>
</html>
```

--------------------------------

### Numeric input control example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sec-forms.html

Example of using a numeric input control with a label, minimum value, and step.

```html
<label>
  How much do you want to charge?
  $<input type="number" min="0" step="0.01" name="price">
</label>
```

--------------------------------

### Rendering of multiple annotations example in non-ruby user agents

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/textlevel-semantics.html

Shows the expected rendering of the previous multiple-annotations example in non-ruby-capable user agents.

```text
♥: Heart, Cœur.
☘: Shamrock, Trèfle.
✶: Star, Étoile.
```

--------------------------------

### URL input with datalist example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sec-forms.html

Markup example showing an input element with type="url" and a datalist providing suggested URLs. The user agent may use the datalist and session history to offer autocomplete suggestions.

```html
<input type="url" name="location" list="urls">
<datalist id="urls">
  <option label="MIME: Format of Internet Message Bodies" value="https://tools.ietf.org/html/rfc2045">
  <option label="HTML 4.01 Specification" value="https://www.w3.org/TR/html4/">
  <option label="Form Controls" value="https://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">
  <option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="https://www.w3.org/TR/SVG/">
  <option label="Feature Sets - SVG 1.1 - 20030114" value="https://www.w3.org/TR/SVG/feature.html">
  <option label="The Single UNIX Specification, Version 3" value="https://www.unix-systems.org/version3/">
</datalist>
```

--------------------------------

### Reentrant upgrade reaction example with custom element constructor

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/dom.html

HTML example showing how defining a custom element can enqueue upgrade reactions for multiple elements, and how a constructor that removes and re-inserts an element can cause a second upgrade reaction. The upgrade algorithm bails out early when the element is already custom.

```html
<!DOCTYPE html>
<x-foo id="a"></x-foo>
<x-foo id="b"></x-foo>

<script>
// Defining enqueues upgrade reactions for both "a" and "b"
customElements.define("x-foo", class extends HTMLElement {
constructor() {
 super();

 const b = document.querySelector("#b");
 b.remove();

 // While this constructor is running for "a", "b" is still
 // undefined, and so inserting it into the document will enqueue a
 // second upgrade reaction for "b" in addition to the one enqueued
 // by defining x-foo.
 document.body.appendChild(b);
}
})
</script>

```

--------------------------------

### HTML example: a.html and b.html for realm concepts

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/webappapis.html

Two HTML files showing a parent page with an iframe and a button that calls a function in the iframe, and the iframe page defining that function. The example illustrates the entry, incumbent, and relevant realms when the button is clicked.

```html
<!-- a/a.html -->
<!DOCTYPE html>
<html lang="en">
<title>Entry page</title>

<iframe src="b.html"></iframe>
<button onclick="frames[0].hello()">Hello</button>

```

```html
<!-- b.html -->
<!DOCTYPE html>
<html lang="en">
<title>Incumbent page</title>

<iframe src="c.html" id="c"></iframe>
<iframe src="d.html" id="d"></iframe>

<script>
const c = document.querySelector("#c").contentWindow;
const d = document.querySelector("#d").contentWindow;

window.hello = () => {
  c.print.call(d);
};
</script>

```

--------------------------------

### play() method

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

Initiates playback of the media resource. Returns a promise that resolves when playback starts or rejects with a NotAllowedError or NotSupportedError.

```APIDOC
## play() method

### Description
Initiates playback of the media resource. Returns a promise that resolves when playback starts or rejects with a NotAllowedError or NotSupportedError.

### Method
INVOKE

### Endpoint
HTMLMediaElement.play()

### Parameters
None

### Response
#### Success Response (200)
- **Promise** - Resolves with undefined when playback starts.

#### Error Response
- **NotAllowedError** - If the media element is not allowed to play.
- **NotSupportedError** - If the media element's error code is MEDIA_ERR_SRC_NOT_SUPPORTED.

#### Response Example
```
Promise
```
```

--------------------------------

### Rendering of rp example in non-ruby user agents

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/textlevel-semantics.html

Shows the expected rendering of the previous rp example in user agents that do not support ruby annotations: the fallback text appears as parentheses around the ruby text.

```text
... 漢字 (かんじ) ...
```

--------------------------------

### Simplified kbd menu selection

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/textlevel-semantics.html

A simpler alternative to the previous example, using a single kbd element with text.

```html
<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>
```

--------------------------------

### rp element example with ruby annotations

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/textlevel-semantics.html

Shows how to use rp elements to provide fallback parentheses around ruby text for user agents that do not support ruby annotations. The example includes white space for readability.

```html
...<ruby>
  漢
  <rb>字</rb>
  <rp> (</rp>
  <rt>かん</rt>
  <rt>じ</rt>
  <rp>) </rp>
</ruby>
...
```

--------------------------------

### HTML body element example with nav and aside

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sections.html

Example of a body element containing a nav and aside, demonstrating how sections are created without explicit headings.

```html
<body>
  <nav>
    <p><a href="/">Home</a></p>
  </nav>
  <p>Hello world.</p>
  <aside>
    <p>My cat is cute.</p>
  </aside>
</body>
```

--------------------------------

### Select drop-down with optgroup groups

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sec-forms.html

Example form showing how to group option elements into optgroup elements within a select widget. The form submits to /courseselector via GET, and each optgroup has a label and contains option elements with values.

```html
<form action="/courseselector" method="get">
  <p>Which course would you like to watch today?</p>
  <div>
    <label>
      Course:
      <select name="c">
        <optgroup label="8.01 Physics I: Classical Mechanics">
          <option value="8.01.1">Lecture 01: Powers of Ten</option>
          <option value="8.01.2">Lecture 02: 1D Kinematics</option>
          <option value="8.01.3">Lecture 03: Vectors</option>
        </optgroup>

        <optgroup label="8.02 Electricity and Magnestism">
          <option value="8.02.1">Lecture 01: What holds our world together?</option>
          <option value="8.02.2">Lecture 02: Electric Field</option>
          <option value="8.02.3">Lecture 03: Electric Flux</option>
        </optgroup>

        <optgroup label="8.03 Physics III: Vibrations and Waves">
          <option value="8.03.1">Lecture 01: Periodic Phenomenon</option>
          <option value="8.03.2">Lecture 02: Beats</option>
          <option value="8.03.3">Lecture 03: Forced Oscillations with Damping</option>
        </optgroup>
      </select>
    </label>
  </div>
  <div>
    <input type="submit" value="Play">
  </div>
</form>

```

--------------------------------

### Autoplay muted video example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

An HTML example showing a video that autoplays muted to avoid annoying users, with controls and loop enabled. The user can turn the sound on.

```html
<video src="advert.webm" controls autoplay loop muted></video>
```

--------------------------------

### Transparent content model example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/dom.html

Shows how to check whether content is allowed inside a transparent element by examining the content models of its ancestors. The example walks through the `a`, `map`, `ins`, and `object` elements to determine that text is allowed as phrasing content.

```html
<p>Apples</p>
```

--------------------------------

### HTML section element examples

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sections.html

Example of a section element with headings and paragraphs, showing how sections group content.

```html
<h1>Biography</h1>
<section>
  <h2>The facts</h2>
  <p>1500+ shows, 14+ countries</p>
</section>
<section>
  <h2>2010/2011 figures per year</h2>
  <p>100+ shows, 8+ countries</p>
</section>
```

--------------------------------

### Technically conforming p element example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/grouping-content.html

An example that is technically conforming but not ideal, using p elements for metadata that would be better marked up with footer and address elements.

```html
<section>
  <!-- ... -->
  <p>Last modified: 2001-04-23</p>
  <p>Author: fred@example.com</p>
</section>
```

--------------------------------

### Conforming p element examples

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/grouping-content.html

Two examples of conforming HTML fragments using the p element. The first is a simple paragraph, the second uses br elements for line breaks within a paragraph.

```html
<p>The little kitten gently seated itself on a piece of carpet. Later in his life, this would be referred to as the time the cat sat on the mat.</p>
```

```html
<p>There was once an example from Femley,<br>
Whose markup was of dubious quality.<br>
The validator complained,<br>
So the author was pained,<br>
To move the error from the markup to the rhyming.</p>;
```

--------------------------------

### HTML h1-h6 heading examples

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sections.html

Example of h1 and h2 headings used to structure a document.

```html
<h1>The Guide To Music On The Playa</h1>
<h2>The Main Stage</h2>
<p>If you want to play on a stage, you should bring one.</p>
<h2>Amplified Music</h2>
<p>Amplifiers up to 300W or 90dB are welcome.</p>
```

--------------------------------

### wbr example: suggested wrapping points in code listing

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/textlevel-semantics.html

This example uses wbr elements to suggest wrapping points in long lines of code within a pre element.

```html
<pre>
  Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], <wbr>HeadingCoordinates[2], <wbr>HeadingCoordinates[3], <wbr>HeadingCoordinates[4]);
  Course course = Helm.CourseFactory(Heading, <wbr>Maps.MapFactoryFromHeading(heading), <wbr>Speeds.GetMaximumSpeed().ConvertToWarp());
</pre>
```

--------------------------------

### MathML quadratic formula example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

Example of using MathML in an HTML document to display the quadratic formula. Some browsers may not render it correctly.

```html
<h1>The quadratic formula</h1>
<p>
  <math>
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
    <mo form="prefix">-</mo> <mi>b</mi>
    <mo>±</mo>
    <msqrt>
      <msup> <mi>b</mi> <mn>2</mn> </msup>
      <mo>-</mo>
      <mn>4</mn> <mo>&#x2062;</mo> <mi>a</mi> <mo>&#x2062;</mo> <mi>c</mi>
    </msqrt>
    </mrow>
    <mrow>
    <mn>2</mn> <mo>&#x2062;</mo> <mi>a</mi>
    </mrow>
  </mfrac>
  </math>
</p>
```

--------------------------------

### HTML header element example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sections.html

Example of a header element inside an article, containing a heading and metadata.

```html
<article>
  <header>
  <h2>Hard Trance is My Life</h2>
  <p>By DJ Steve Hill and Technikal</p>
  </header>
  <p>The album with the amusing punctuation has red artwork.</p>
</article>
```

--------------------------------

### Inline samp element example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/textlevel-semantics.html

Shows the samp element used inline to represent sample output from a computer system.

```html
<p>The computer said <samp>Too much cheese in tray two</samp> but I didn’t know what that meant.</p>
```

--------------------------------

### Example of presentational markup: <font color>

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/introduction.html

Shows an example of presentational markup using the font element with a color attribute, used to illustrate the maintenance cost of style-dependent markup.

```html
<font color="">
```

--------------------------------

### Bookmark permalinks example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/links.html

Shows how to use rel="bookmark" on anchor elements to create permalinks for sections or articles. The example includes three permalinks: one for a div section, one for an outer article, and one for an inner article.

```html
<body>
  <h1>Example of permalinks</h1>
  <div id="a">
    <h2>First example</h2>
    <p><a href="a.html" rel="bookmark">This permalink applies to only the content from the first h2 to the second h2</a>. The div isn’t exactly that section, but it roughly corresponds to it.</p>
  </div>
  <h2>Second example</h2>
  <article id="b">
    <p><a href="b.html" rel="bookmark">This permalink applies to the outer article element</a> (which could be, e.g., a blog post).</p>
    <article id="c">
      <p><a href="c.html" rel="bookmark">This permalink applies to the inner article element</a> (which could be, e.g., a blog comment).</p>
    </article>
  </article>
</body>
```

--------------------------------

### Example usage of extractFilename with file input

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sec-forms.html

Shows how to use the extractFilename function with an input element of type file. The example includes HTML and JavaScript to display the selected file name.

```html
<div>
  <label>
    Choose file:
    <input type="file" name="image" onchange="updateFilename(this.value)">
  </label>
</div>
<p>
  The name of the file you picked is: <span id="filename">(none)</span>.
</p>
```

```javascript
<script>
  function updateFilename(path) {
    var name = extractFilename(path);
    document.getElementById("filename").textContent = name;
  }
</script>
```

--------------------------------

### Modal dialog example for adding coins

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/interactive-elements.html

Example of a modal dialog that provides a form for adding coins to a wallet in an online game. The dialog element is shown without an open attribute, so it should not be displayed to the user.

```html
<div>
  <!-- body content -->
</div>
<dialog>
  <h1>Add to Wallet</h1>
  <label for="num">How many gold coins do you want to add to your wallet?</label>
  <div><input name="amt" id="num" type="number" min="0" step="0.01" value="100"></div>
  <p><strong>You add coins at your own risk.</strong></p>
  <div><label><input name="round" type="checkbox">Only add perfectly round coins</label></div>
  <div><input type="button" onclick="submit()" value="Add Coins"></div>
</dialog>
```

--------------------------------

### Figure with img and figcaption for a webcam image

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

Example showing a webcam image with alt text, a caption, and a link to weather details.

```html
<figure>
  <img src="webcam1.jpg" **alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds. In the foreground are the safety rails on the flat part of the roof. Nearby there are low rize industrial buildings, beyond are blocks of flats. In the distance there’s a church steeple."**>
  <figcaption>View from Sopwith house, looking towards north Kingston. This image is updated every hour.</figcaption>
</figure>
<p>View the <a href="https://www.bbc.co.uk/weather/0/6690829">latest weather details</a> for Kingston upon Thames.</p>
```

--------------------------------

### Keywords meta tag example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/document-metadata.html

This example shows a `meta` element with `name="keywords"` used to specify keywords relevant to a page about typefaces on UK motorways. The value must be a set of comma-separated tokens.

```html
<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <title>Typefaces on UK motorways</title>
    <meta name="keywords" content="british,type face,font,fonts,highway,highways">
  </head>
  <body>
  ...
```

--------------------------------

### URL-encoded form submission example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sec-forms.html

Example of the URL-encoded data that the user agent submits to the server when the form is filled with the described values. Shows how multiple controls with the same name are submitted as repeated parameters.

```text
custname=Denise+Lawrence&custtel=555-555-8642&custemail=&size=small&topping=onion&topping=mushroom&delivery=19%3A00&comments=
```

--------------------------------

### Example: select element with options

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sec-forms.html

Shows a select element with a label and five options, where the third option is preselected using the selected attribute.

```html
<div>
  <label for="unittype">
    Select unit type:
  </label>
  <select id="unittype" name="unittype">
    <option value="1">Miner</option>
    <option value="2">Puffer</option>
    <option value="3" selected>Snipey</option>
    <option value="4">Max</option>
    <option value="5">Firebot</option>
  </select>
</div>
```

--------------------------------

### HTML document after removing <html> start tag with comment

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/syntax.html

The result of removing the <html> start tag from the previous example. The comment is now before the html element, which changes the DOM structure.

```html
<!DOCTYPE html>
<!-- where is this comment in the DOM? -->
<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Welcome to this example.</p>
  </body>
</html>
```

--------------------------------

### media.readyState

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

Returns the current ready state of the media element, describing how much data is available.

```APIDOC
## media.readyState

### Description
Returns the value that describes the current ready state of the media element.

### Type
Number (read-only)
```

--------------------------------

### media.play()

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

Starts or resumes playback of the media resource. If playback has ended, it restarts from the beginning.

```APIDOC
## media.play()

### Description
Sets the `paused` attribute to false, loading the media resource and beginning playback if necessary. If playback had ended, it restarts from the start.

### Method
play()

### Parameters
None.

### Returns
No return value.
```

--------------------------------

### HTML example: navigation links with accesskey attributes

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/editing.html

Shows a navigation block where each link has an accesskey attribute to provide keyboard shortcuts. The accesskey values are single printable characters (a, t, s, b, c) and the example is from the HTML 5.3 specification section 5.5.2.

```html
<nav>
  <p>
    <a title="Consortium Activities" accesskey="a" href="/Consortium/activities">Activities</a> |
    <a title="Technical Reports and Recommendations" accesskey="t" href="/TR/">Technical Reports</a> |
    <a title="Alphabetical Site Index" accesskey="s" href="/Consortium/siteindex">Site Index</a> |
    <a title="About This Site" accesskey="b" href="/Consortium/">About Consortium</a> |
    <a title="Contact Consortium" accesskey="c" href="/Consortium/contact">Contact</a>
  </p>
</nav>
```

--------------------------------

### data element example with product ID

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/textlevel-semantics.html

Shows how to use the data element to provide a machine-readable value (product ID) alongside human-readable text.

```html
<h1 itemscope>
 <data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
</h1>
```

--------------------------------

### selectionStart attribute

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sec-forms.html

Gets or sets the offset to the character immediately following the start of the selection. Setting it acts as if setSelectionRange() were called with the new value as the first argument.

```APIDOC
## selectionStart attribute

### Description
Gets or sets the offset (in logical order) to the character that immediately follows the start of the selection. If there is no selection, returns the offset to the character immediately following the text entry cursor.

### Attribute
selectionStart

### Getting
Returns the offset to the character immediately following the start of the selection, or the caret position if no selection.

### Setting
Acts as if setSelectionRange() were called with the new value as the first argument, the current selectionEnd as the second argument (unless selectionEnd is less than the new value, in which case the second argument is also the new value), and the current selectionDirection as the third argument.
```

--------------------------------

### HTML example: form element inside phrasing content

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/introduction.html

Shows markup that results in two paragraphs when parsed as HTML, because a form element's start tag implies a p element's end tag. The example is used to illustrate a parser-related content model restriction.

```html
<p>Welcome. <form><label>
```

--------------------------------

### hCalendar microformat example using time element

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/textlevel-semantics.html

Encodes an event with the `time` element using a variant of hCalendar. The `datetime` attributes provide machine-readable dates for the event start and end.

```html
<div class="vevent">
  <a class="url" href="https://conference.example.com/">https://conference.example.com/</a>
  <span class="summary">Web 3.0 Conference</span>:
  <time class="dtstart" datetime="2025-10-05">October 5</time> -
  <time class="dtend" datetime="2025-10-07">7</time>, at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
```

--------------------------------

### Interface method syntax example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/introduction.html

Shows the typographic convention for an interface method call with an optional argument. The variable and method names are placeholders; the square brackets denote an optional argument.

```text
variable = object . `method`( [ optionalArgument ] )
```

--------------------------------

### Styled HTML document with CSS (yellow-on-blue)

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/introduction.html

Example of an HTML document with embedded CSS that renders yellow text on a blue background. Use this as a starting point for styling HTML documents with CSS.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Document title</title>
    <style>
      body {
        background: blue;
        color: yellow;
      }
    </style>
  </head>
  <body>
    <h1>Styled page</h1>
    <p>The document has yellow text and a blue background.</p>
  </body>
</html>
```

--------------------------------

### Rewriting expressions to avoid '<!--' sequence

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-scripting.html

Shows how to rewrite JavaScript expressions to avoid the '<!--' sequence, which is treated as a line comment start in classic scripts. The examples use spacing or parentheses to prevent the sequence from occurring.

```javascript
if (x < !--y) { ... }
if (!--y > x) { ... }
if (!(--y) > x) { ... }
if (player < script) { ... }
if (script > player) { ... }
```

--------------------------------

### Example: Getting the href setter from a cross-origin Location object

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/browsers.html

Shows how to retrieve the setter for the 'href' property from a cross-origin Location object. This is used to illustrate that the value and its corresponding key in the [[CrossOriginPropertyDescriptorMap]] cannot be garbage collected because it would be observable.

```javascript
const href = Object.getOwnPropertyDescriptor(crossOriginLocation, "href").set
```

--------------------------------

### HTML comment example: <!--My favorite operators are > and <!-->

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/syntax.html

Shows a valid HTML comment that ends with the string '<!', which is allowed by the comment syntax rules. The comment text must not start with '>' or '->', must not contain '<!--', '-->', or '--!>', and must not end with '<!-'.

```html
<!--My favorite operators are > and <!-->
```

--------------------------------

### WindowProxy example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/browsers.html

Demonstrates that the variable x is set to the WindowProxy object returned by the window accessor. All expressions return true because the WindowProxy passes operations through to the underlying Window object.

```javascript
var x = window;
x instanceof Window; // true
x === this; // true
```

--------------------------------

### HTML parser reentrancy example: script with document.write

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/syntax.html

Illustrates the reentrant nature of the HTML tree construction stage. While handling the 'script' end tag token, the tokenizer is resumed, causing a 'p' start tag token to be emitted and processed before the first token's processing is complete.

```html
...
<script>
  document.write('<p>');
</script>
...
```

--------------------------------

### Help link example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/links.html

Shows how to use rel="help" on an anchor element to provide context-sensitive help for a form control. The help link is associated with the input field and can be displayed when the user presses Help or F1.

```html
<label>
  Topic:
  <input name="topic">
  <a href="help/topic.html" rel="help">(Help)</a>
</label>
```

--------------------------------

### Conforming and non-conforming main element examples

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/grouping-content.html

Shows valid usage of main with hidden attributes and invalid usage with multiple visible main elements.

```html
<!-- conforming example -->
<main>...</main>
<main hidden>...</main>
<main hidden>...</main>

<!-- non-conforming example -->
<main>...</main>
<main>...</main>
<main>...</main>
```

--------------------------------

### HTML aside element example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sections.html

Example of an aside element used for tangential content.

```html
<h1>Music</h1>
<p>As any burner can tell you, the event has a lot of trance.</p>
<aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside>
<p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p>
```

--------------------------------

### Art direction example with picture and source

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

Uses the picture element with a source element that has a media attribute to select an image for small screens, falling back to the img element for large screens. The img element must be present.

```html
<h3>
  <picture>
    <source media="(max-width: 500px)" srcset="photo-small-screen.jpg">
    <img src="photo-large-screen.jpg"" alt>
  </picture>
  Dogs & Cats, Living Together
</h3>
```

--------------------------------

### Link with icon image and text

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

Example of a link containing a house icon image and the text 'home', with an empty alt attribute.

```html
<a href="home.html"><img src="home.gif" width="15" height="15" alt="">Home</a>
```

--------------------------------

### HTML footer element example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sections.html

Example of a footer element inside an article, containing author information.

```html
<article>
  <h2>Hard Trance is My Life</h2>
  <p>The album with the amusing punctuation has red artwork.</p>
  <footer>
    <p>Artists: DJ Steve Hill and Technikal</p>
  </footer>
</article>
```

--------------------------------

### Site-wide and section footers example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sections.html

Complete HTML document demonstrating the footer element used for both a site-wide footer and section footers within articles. Includes video, navigation, and copyright information.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The Ramblings of a Scientist</title>
  </head>
  <body>
    <h1>The Ramblings of a Scientist</h1>
    <main>
      <article>
        <h2>Episode 15</h2>
        <video src="/fm/015.ogv" controls preload>
          <p><a href="/fm/015.ogv">Download video</a>.</p>
        </video>
        <footer>
          <!-- footer for article -->
          <p>Published <time datetime="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</time></p>
        </footer>
      </article>
      <article>
        <h2>My Favorite Trains</h2>
        <p>I love my trains. My favorite train of all time is a Köf.</p>
        <p>It is fun to see them pull some coal cars because they look so dwarfed in comparison.</p>
        <footer>
          <!-- footer for article -->
          <p>Published <time datetime="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</time></p>
        </footer>
      </article>
    </main>
    <footer>
      <!-- site wide footer -->
      <nav>
        <p>
          <a href="/credits.html">Credits</a> —<wbr><a href="/tos.html">Terms of Service</a> —<wbr><a href="/index.html">Blog Index</a>
        </p>
      </nav>
      <p>© 2009 Gordon Freeman</p>
    </footer>
  </body>
</html>
```

--------------------------------

### HTML article element examples

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sections.html

Two article elements showing typical usage with headings, images, and footers.

```html
<article>
  <h2>Masif tee</h2>
  <img src="/example.jpg" alt="Yellow smiley face with the caption 'masif'">
  <p>My fave Masif tee so far!</p>
  <footer>Posted 2 days ago</footer>
</article>
<article>
  <h2>Masif’s birthday</h2>
  <img src="/example2.jpg" alt="">
  <p>Happy 2nd birthday Masif Saturdays!!!</p>
  <footer>Posted 3 weeks ago</footer>
</article>
```

--------------------------------

### HTML body element example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sections.html

Example of a complete HTML document with a body element containing a paragraph.

```html
<!DOCTYPE html>
<html>
  <head> <title>Steve Hill’s Home Page</title> </head>
  <body> <p>Hard Trance is My Life.</p> </body>
</html>
```

--------------------------------

### Markup for a paragraph with a list

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/grouping-content.html

An example showing how to mark up a sentence that contains a list, using p and ul elements.

```html
<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
  <li>wizards,</li>
  <li>faster-than-light travel, and</li>
  <li>telepathy,</li>
</ul>
<p>and is further discussed below.</p>
```

--------------------------------

### window.open()

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/browsers.html

Opens a new window or reuses an existing one with the given name, loading the specified URL. Returns a reference to the new window.

```APIDOC
## [GET] window.open()

### Description
Opens a window to show the given URL (defaults to about:blank) and returns it. The target argument gives the name of the new window. If a window with that name already exists, it is reused. The replace attribute, if true, removes the current page from the session history. The features argument can influence the rendering of the new window.

### Method
GET

### Endpoint
window.open(url, target, features, replace)

### Parameters
#### Path Parameters
None.

#### Query Parameters
None.

#### Request Body
- **url** (DOMString) - Optional - The URL to load in the new window. Defaults to "about:blank".
- **target** (DOMString) - Optional - The name of the browsing context. Defaults to "_blank".
- **features** (DOMString) - Optional - A comma-separated list of features for the new window (e.g., width, height, location). Defaults to empty string.
- **replace** (boolean) - Optional - If true, replaces the current entry in the session history instead of creating a new one.

### Response
#### Success Response (WindowProxy)
Returns a WindowProxy object representing the new window.

#### Response Example
```
// The return value is a WindowProxy object.
```
```

--------------------------------

### noreferrer and noopener equivalence example

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/links.html

Two hyperlinks that behave the same: one uses rel="noreferrer" and the other uses rel="noreferrer noopener", demonstrating that noreferrer implies noopener behavior.

```html
<a href="..." rel="noreferrer" target="_blank">...</a>

<a href="..." rel="noreferrer noopener" target="_blank">...</a>
```

--------------------------------

### Inline image with alt text in a sentence (second example)

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

Another example of an inline image with alt text that fits the sentence context.

```html
My <img src="heart.png" alt="heart"> breaks.
```

--------------------------------

### Image map example with clickable areas

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

An example of associating an image with a map element using the usemap attribute, defining clickable areas with the area element.

```html
<p>
  Please select a shape:
  <img src="shapes.png" usemap="#shapes" alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
  <map name="shapes">
    <area shape="rect" coords="50,50,100,100"> <!-- the hole in the red box -->
    <area shape="rect" coords="25,25,125,125" href="red.html" alt="Red box.">
    <area shape="circle" coords="200,75,50" href="green.html" alt="Green circle.">
    <area shape="poly" coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
    <area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html" alt="Yellow star.">
  </map>
</p>
```

--------------------------------

### Blog layout with multiple header elements

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sections.html

Demonstrates using header elements for page-level and article-level introductory content. The first header is scoped to the body and contains navigation, while the second header introduces the primary article.

```html
<body>
  <header>
    <nav>
      <a href="/">My Awesome blog</a>
      <ul>
        <li><a href="/new-articles">Latest</a></li>
        <li><a href="/old-articles">Archive</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <header>
        <h1>
          My great post!
        </h1>
        <p>Hello world!</p>
      </header>
    </article>
  </main>
</body>
```

--------------------------------

### Example link element with multiple rel values

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/document-metadata.html

An example of a link element that creates two hyperlinks to the same page, using rel values 'author' and 'license'.

```html
<link rel="author license" href="/about">
```

--------------------------------

### Blog post with schema.org annotations

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/sections.html

Example of a blog post using the article element with schema.org annotations, including typeof="Article" and properties for name, datePublished, and articleBody.

```html
<article vocab="http://schema.org/" typeof="Article">
  <header>
    <h2 property="name">The Very First Rule of Life</h2>
    <p property="datePublished"><time datetime="2018-02-07">3 days ago</time></p>
  </header>
  <div property="articleBody">
    <p>Always check that your computer is plugged in before you complain it isn’t working.</p>
  </div>
  <footer>
    <a href="?comments=1">Show comments...</a>
  </footer>
</article>
```

--------------------------------

### HTML example: multiple icon links with sizes and types

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/links.html

Shows the top part of an application's HTML head with several icon links, each specifying different sizes and types, including a scalable SVG icon. The sizes attribute values are space-separated lists of dimensions or 'any'.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example App</title>
    <link rel="icon" href="favicon.png" sizes="16x16" type="image/png" >
    <link rel="icon" href="windows.ico" sizes="32x32 48x48" type="image/vnd.microsoft.icon">
    <link rel="icon" href="mac.icns"    sizes="128x128 512x512 8192x8192 32768x32768">
    <link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml">
  </head>
  <body>
    ...
```

--------------------------------

### createImageBitmap(image [, sx, sy, sw, sh])

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/webappapis.html

Creates an ImageBitmap from various image sources. Returns a promise that resolves with the new ImageBitmap or rejects with an error if the source is invalid or inaccessible.

```APIDOC
## createImageBitmap(image [, sx, sy, sw, sh])

### Description
Creates an ImageBitmap from an image source (img, video, canvas, Blob, ImageData, CanvasRenderingContext2D, or another ImageBitmap). Returns a promise that resolves with the new ImageBitmap. If cropping coordinates are provided, the source image is cropped to the given pixels.

### Method
createImageBitmap()

### Parameters
- **image** (ImageBitmapSource) - Required - The source image. Can be an HTMLImageElement, HTMLVideoElement, HTMLCanvasElement, Blob, ImageData, CanvasRenderingContext2D, or ImageBitmap.
- **sx** (number) - Optional - The x-coordinate of the top-left corner of the crop rectangle, in source image pixel coordinates.
- **sy** (number) - Optional - The y-coordinate of the top-left corner of the crop rectangle, in source image pixel coordinates.
- **sw** (number) - Optional - The width of the crop rectangle, in source image pixel coordinates.
- **sh** (number) - Optional - The height of the crop rectangle, in source image pixel coordinates.

### Returns
A Promise that resolves with an ImageBitmap object.

### Errors
- Rejects with an InvalidStateError if the source image is not in a valid state (e.g., img not loaded, canvas bitmap has zero dimensions, or ImageData data has been neutered).
- Rejects with a SyntaxError DOMException if the script is not allowed to access the image data (e.g., CORS-cross-origin video or canvas).
```

--------------------------------

### iframe example for advertising

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

An example of using an iframe element to include advertising from an advertising broker. The iframe uses a title attribute and a src attribute with query parameters.

```html
<iframe title="Advert" src="https://ads.example.com/?customerid=123456&amp;format=banner"
        width="468" height="60"></iframe>
```

--------------------------------

### Example of p element with list

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/grouping-content.html

Shows a div containing a paragraph, a list, and another paragraph, demonstrating how to group content with the p element.

```html
<div>
  <p>For instance, this fantastic sentence has bullets relating to</p>
  <ul>
    <li>wizards,</li>
    <li>faster-than-light travel, and</li>
    <li>telepathy,</li>
  </ul>
  <p>and is further discussed below.</p>
</div>
```

--------------------------------

### Figure with image and caption (photo upload example)

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

Example of a figure element containing an img and a figcaption. The caption is not a suitable text alternative and does not conform to WCAG 2.0.

```html
<figure>
  <img src="clara.jpg">
  <figcaption>clara.jpg, taken on 12/11/2010.</figcaption>
</figure>
```

--------------------------------

### TextTrack.mode

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/semantics-embedded-content.html

Gets or sets the text track mode. On getting, returns the string corresponding to the text track mode. On setting, processes the new value to set the mode.

```APIDOC
## TextTrack.mode

### Description
Gets or sets the text track mode. On getting, returns the string corresponding to the text track mode. On setting, processes the new value to set the mode.

### Attribute
mode

### Values
- **"disabled"** - The text track disabled mode.
- **"hidden"** - The text track hidden mode.
- **"showing"** - The text track showing mode.

### Returns (on get)
- **string** - The text track mode string.

### Setting
- If the new value is "disabled", set the text track mode to the text track disabled mode.
- If the new value is "hidden", set the text track mode to the text track hidden mode.
- If the new value is "showing", set the text track mode to the text track showing mode.
```

--------------------------------

### window.open(url, target, features, replace)

Source: https://www.w3.org/TR/2021/NOTE-html53-20210128/browsers.html

Provides a mechanism for navigating an existing browsing context or opening and navigating an auxiliary browsing context.

```APIDOC
## [GET] window.open(url, target, features, replace)

### Description
Provides a mechanism for navigating an existing browsing context or opening and navigating an auxiliary browsing context.

### Method
GET

### Endpoint
window.open(url, target, features, replace)

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **url** (string) - Required - The URL to navigate to.
- **target** (string) - Optional - The name of the browsing context. If empty, defaults to "_blank".
- **features** (string) - Optional - A comma-separated list of features for the new window.
- **replace** (boolean) - Optional - Whether to replace the current entry in the session history.

### Request Example
```
window.open("https://example.com", "_blank", "width=500,height=400");
```

### Response
#### Success Response
Returns the WindowProxy object of the target browsing context, or null if the noopener feature is specified.

#### Response Example
```
WindowProxy
```

### Errors
- Throws InvalidAccessError if no browsing context is chosen.
```