### Form submission with GET method

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

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

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

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

### h1-h6 headings example

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sections.html

Headings h1 and h2 used to structure a guide.

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

```

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

### selectionStart

Source: https://www.w3.org/TR/2017/WD-html52-20170117/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.

### Type
unsigned long

### Getter
Returns the current start offset.

### Setter
Sets the start offset.

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

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

### Example: Using optgroup and option in a select widget

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Shows a form with a select drop-down that groups lessons from three courses using optgroup elements. The form uses GET method and submits to 'courseselector.dll'.

```html
<form action="courseselector.dll" method="get">
  <p>Which course would you like to watch today?
  <p><label>Course:
  <select name="c">
    <optgroup label="8.01 Physics I: Classical Mechanics">
    <option value="8.01.1">Lecture 01: Powers of Ten
    <option value="8.01.2">Lecture 02: 1D Kinematics
    <option value="8.01.3">Lecture 03: Vectors
    <optgroup label="8.02 Electricity and Magnestism">
    <option value="8.02.1">Lecture 01: What holds our world together?
    <option value="8.02.2">Lecture 02: Electric Field
    <option value="8.02.3">Lecture 03: Electric Flux
    <optgroup label="8.03 Physics III: Vibrations and Waves">
    <option value="8.03.1">Lecture 01: Periodic Phenomenon
    <option value="8.03.2">Lecture 02: Beats
    <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
  </select>
  </label>
  <p><input type=submit value="▶ Play">
</form>
```

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

### textarea.selectionStart

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Gets or sets the start position of the text selection.

```APIDOC
## textarea.selectionStart

### Description
Gets or sets the start position of the text selection.

### Method
Property (getter/setter)

### Property
- **selectionStart** (unsigned long) - The index of the first selected character.

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

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

### Two search forms using GET method

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Example showing two search forms that submit to Google and Bing using the GET method. Each form contains a search input and a submit button.

```html
<form action="https://www.google.com/search" method="get">
  <label>Google: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>
<form action="https://www.bing.com/search" method="get">
  <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>
```

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

### Week input with stepUp() step alignment example

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Example of an input element in the Week state with value="2016-W20" that demonstrates stepUp() snapping to the nearest step-aligned value, resulting in "2016-W22".

```html
<input type="week" value="2016-W20" min="2016-W01" max="2017-W01" step="2.6">
```

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

### HTML document with html start tag

Source: https://www.w3.org/TR/2017/WD-html52-20170117/syntax.html

A complete HTML document with the html start tag present. This is the baseline for the optional tag examples that follow.

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

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

### Number input with stepUp() step alignment example

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Example of an input element with type="number" and value="3" that demonstrates how stepUp() snaps the value to 3.6 and then increments by 2.6 on subsequent calls.

```html
<input type="number" value="3" min="1" max="10" step="2.6">
```

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

### List replacement with del and ins elements

Source: https://www.w3.org/TR/2017/WD-html52-20170117/edits.html

Example showing a list that started with fruit and was replaced by a list of colors, using del and ins elements to mark the changes.

```html
<h1>List of <del>fruits</del><ins>colors</ins></h1>
<ul>
  <li><del>Lime</del><ins>Green</ins></li>
  <li><del>Apple</del></li>
  <li>Orange</li>
  <li><del>Pear</del></li>
  <li><ins>Teal</ins></li>
  <li><del>Lemon</del><ins>Yellow</ins></li>
  <li>Olive</li>
  <li><ins>Purple</ins></li>
</ul>
```

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

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

Source: https://www.w3.org/TR/2017/WD-html52-20170117/textlevel-semantics.html

Shows the expected rendering of the previous example in user agents that do not support ruby annotations.

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

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

### Example of reentrant parsing with document.write()

Source: https://www.w3.org/TR/2017/WD-html52-20170117/syntax.html

Illustrates how the tree construction stage handles a 'p' start tag token while processing a 'script' end tag token, demonstrating the reentrant nature of the HTML parser.

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

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

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

Source: https://www.w3.org/TR/2017/WD-html52-20170117/textlevel-semantics.html

Shows the expected rendering of the previous rp example in user agents that do not support ruby annotations.

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

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

### HTML comment syntax example

Source: https://www.w3.org/TR/2017/WD-html52-20170117/syntax.html

Shows the required four-character start sequence `<!--` and the three-character end sequence `-->` for HTML comments, with restrictions on the comment text.

```html
<!-- comment -->
```

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

### Basic page structure with header, main, and footer

Source: https://www.w3.org/TR/2017/WD-html52-20170117/grouping-content.html

This example shows a simple HTML page structure with a header containing navigation, a main content area, and a footer. It is the first example in the section, illustrating the basic layout without additional nested elements.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Great Dogs for Families</title>
  </head>
  <body>

    <header>
      <h1>The Border Terrier</h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="health.html">Health</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h2>Welcome!</h2>
      <p>This site is all about the Border Terrier, the best breed of dog
      that there is!</p>
    </main>
    <footer>
      <small>Copyright © <time datetime="2013">2013</time> by I. Devlin</small>
    </footer>

  </body>
</html>
```

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

### Example: HTML document with lang attribute

Source: https://www.w3.org/TR/2017/WD-html52-20170117/semantics.html

A complete HTML document example showing the html element with a lang attribute set to 'en'. This example is used to illustrate the recommended practice of specifying the document's language.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Swapping Songs</title>
  </head>
  <body>
    <h1>Swapping Songs</h1>
    <p>Tonight I swapped some of the songs I wrote with some friends, who
    gave me some of the songs they wrote. I love sharing my music.</p>
  </body>
</html>
```

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

### Numeric input control example (type=number)

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Example of an input element with type=number, min=0, step=0.01, and name=price, used for charging an amount. The step attribute allows decimal values.

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

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

### rp element example with ruby annotations

Source: https://www.w3.org/TR/2017/WD-html52-20170117/textlevel-semantics.html

Shows how to use rp elements to provide fallback parentheses around ruby text for legacy user agents. The example includes white space for readability.

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

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

### nav element example

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sections.html

Navigation bar 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>

```

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

### Example of vendor-specific extension attributes

Source: https://www.w3.org/TR/2017/WD-html52-20170117/infrastructure.html

Shows how to use vendor-prefixed attributes (x-vendor-feature) for experimental extensions. The example uses 'ferret' and 'mb' prefixes on a span element.

```html
<p>This smells of lemons!
<span x-ferret-smellovision x-ferret-smellcode="LEM01"
x-mb-outputsmell x-mb-smell="lemon juice"></span></p>
```

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

### WindowProxy example: x instanceof Window

Source: https://www.w3.org/TR/2017/WD-html52-20170117/browsers.html

Illustrates that the window accessor returns a WindowProxy object that passes most operations through to the underlying Window object. The example sets x to the WindowProxy and shows that x instanceof Window and x === this both evaluate to true.

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

```

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

### Accept attribute example for file input

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Specifies accepted file types using MIME types and extensions. The example lists .doc, .docx, .xml, and MIME types for Microsoft Word documents. Use this to filter allowed files in a file picker.

```html
<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
```

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

### Tag cloud example with aside and ARIA role='note'

Source: https://www.w3.org/TR/2017/WD-html52-20170117/common-idioms-without-dedicated-elements.html

An example of a tag cloud using an aside element with ARIA role='note' to override default semantics. The example is incomplete in the source, showing only the opening aside tag and a comment.

```html
<aside role="note">
  <!-- tag cloud -->
```

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

### Correct alternative for comments

Source: https://www.w3.org/TR/2017/WD-html52-20170117/textlevel-semantics.html

Correct alternative to the non-conforming br example, using separate paragraphs.

```html
<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>
```

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

### Correct alternative for form fields

Source: https://www.w3.org/TR/2017/WD-html52-20170117/textlevel-semantics.html

Correct alternative to the non-conforming br example, using separate paragraphs.

```html
<p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p>
```

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

### Non-semantic HTML example using div and span

Source: https://www.w3.org/TR/2017/WD-html52-20170117/dom.html

Shows the same content as the semantic example but using div and span elements with class names for styling. This example is used to illustrate the lack of semantic information when appropriate HTML elements are not used.

```html
<!doctype html>
<html lang="en">
  <head>
    <title>Favorite books</title>
  </head>
        <body>
    <div class="header">
       <img src="logo.png" alt="Favorite books logo">
    </div>
    <div class="main">
       <span class="largeHeading">Favorite books</span>
       <p>These are a few of my favorite books.</p>
       <span class="smallHeading">The Belgariad</span>
       <p>Five books by David and Leigh Eddings.</p>
       <span class="smallHeading">The Hitchhiker’s Guide to the Galaxy</span>
       <p>A trilogy of five books by Douglas Adams.</p>
    </div>
  </body>
</html>
```

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

### HTML example: Explicit paragraphs with split link

Source: https://www.w3.org/TR/2017/WD-html52-20170117/dom.html

Shows the same content as the previous example but with explicit p elements and the link split into three parts, demonstrating correct paragraph separation.

```html
<header>
  <p>Welcome! <a href="about.html">This is home of...</a></p>
  <h1><a href="about.html">The Falcons!</a></h1>
  <p><a href="about.html">The Lockheed Martin multirole jet
  fighter aircraft!</a> This page discusses the F-16 Fighting
  Falcon’s innermost secrets.</p>
</header>

```

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

### Image map example with usemap and area elements

Source: https://www.w3.org/TR/2017/WD-html52-20170117/semantics-embedded-content.html

Shows how to associate an img element with a map element using the usemap attribute, and how to define clickable areas with the area element. The example includes a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star, with the first area having no href to create a hole in the red box.

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

```

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

### Number input with max=0 and stepUp() no-op example

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Example of an input element with type="number" and max="0" that demonstrates that invoking stepUp() does not change the value because the value is already greater than the maximum.

```html
<input type=number value=1 max=0>
```

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

### HTML nav element example with primary and secondary navigation

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sections.html

Example of a page with two `nav` elements: one for primary site navigation and one for secondary in-page navigation. The example shows how `nav` can be used within an `article` element for major navigation blocks, while a `footer` with links is sufficient for minor links. It uses list markup for navigation items and includes placeholders like `_...more..._`.

```html
<body>
  <h1>The Wiki Center Of Exampland</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/events">Current Events</a></li>
      _...more..._
    </ul>
  </nav>
  <article>
    <header>
      <h2>Demos in Exampland</h2>
      <p>Written by A. N. Other.</p>
    </header>
    <nav>
      <ul>
        <li><a href="#public">Public demonstrations</a></li>
        <li><a href="#destroy">Demolitions</a></li>
        _...more..._
      </ul>
    </nav>
    <div>
      <section id="public">
        <h2>Public demonstrations</h2>
        <p>_...more..._</p>
      </section>
      <section id="destroy">
        <h2>Demolitions</h2>
        <p>_...more..._</p>
      </section>
      _...more..._
    </div>
    <footer>
      <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
    </footer>
  </article>
  <footer>
    <p><small>© copyright 1998 Exampland Emperor</small></p>
  </footer>
</body>
```

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

### Infinite loop script example

Source: https://www.w3.org/TR/2017/WD-html52-20170117/webappapis.html

An example of a script that never terminates, used to illustrate how user agents might prompt the user to terminate or let it continue.

```html
<script>
  while (true) { /* loop */ }
</script>
```

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

### Semantic HTML example with headings and main

Source: https://www.w3.org/TR/2017/WD-html52-20170117/dom.html

Shows a complete HTML document using semantic elements like header, main, h1, and h2 to represent a page structure. This example is used to illustrate how semantic information is preserved across different presentations.

```html
<!doctype html>
<html lang="en">
  <head>
    <title>Favorite books</title>
  </head>
      <body>
    <header>
      <img src="logo.png" alt="Favorite books logo">
    </header>
    <main>
      <h1>Favorite books</h1>
      <p>These are a few of my favorite books.</p>
      <h2>The Belgariad</h2>
      <p>Five books by David and Leigh Eddings.</p>
      <h2>The Hitchhiker’s Guide to the Galaxy</h2>
      <p>A trilogy of five books by Douglas Adams.</p>
    </main>
  </body>
</html>
```

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

### Modal dialog example with form

Source: https://www.w3.org/TR/2017/WD-html52-20170117/interactive-elements.html

Example of a modal dialog element containing a form for adding coins to a wallet in an online game. The dialog is not shown unless the open attribute is present.

```html
<body>
<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><input type=button onclick="submit()" value="Add Coins"></div>
</dialog>
</body>
```

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

### Example: Wrapping an advertising block in a link using the a element

Source: https://www.w3.org/TR/2017/WD-html52-20170117/textlevel-semantics.html

Shows how to use the a element to wrap entire sections, making an entire advertising block clickable. The example includes two separate links, each wrapping a section with an h1 and paragraphs. Note that interactive content like buttons or other links must not be inside the a element.

```html
<aside class="advertising">
  <h1>Advertising</h1>
  <a href="https://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
    <h1>Mellblomatic 9000!</h1>
    <p>Turn all your widgets into mellbloms!</p>
    <p>Only $9.99 plus shipping and handling.</p>
  </section>
  </a>
  <a href="https://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
    <h1>The Mellblom Browser</h1>
    <p>Web browsing at the speed of light.</p>
    <p>No other browser goes faster!</p>
  </section>
  </a>
</aside>
```

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

### Example form submission URL-encoded data

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Shows the URL-encoded query string that the user agent submits to the server for the example form when the customer enters specific values. It demonstrates how multiple controls with the same name (topping) are submitted as repeated parameters and how special characters are percent-encoded.

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

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

### HTML example illustrating entry and incumbent realms

Source: https://www.w3.org/TR/2017/WD-html52-20170117/webappapis.html

This example shows two HTML files (a.html and b.html) that demonstrate the concepts of entry and incumbent realms. The a.html page contains an iframe to b.html and a button that calls a function in the iframe. The b.html page contains two iframes (c.html and d.html) and a script that defines a function using the incumbent realm to call a method on the d iframe's window.

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

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

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

### Using a plugin with fallback (Flash video example)

Source: https://www.w3.org/TR/2017/WD-html52-20170117/semantics-embedded-content.html

Shows how to embed a Flash plugin with fallback to a video element and a link for users without Flash or video support.

```html
<p>Look at my video:
  <object type="application/x-shockwave-flash">
  <param name=movie value="https://video.example.com/library/watch.swf">
  <param name=allowfullscreen value=true>
  <param name=flashvars value="https://video.example.com/vids/315981">
  <video controls src="https://video.example.com/vids/315981">
    <a href="https://video.example.com/vids/315981">View video</a>.
  </video>
  </object>
</p>
```

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

### Example: three form controls with labels and format hints

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Shows three form controls each with a label, two of which include small text indicating the expected format.

```html
<p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p>
<p><label>Age: <input name=age type=number min=0></label></p>
<p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p>
```

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

### Populate a table with data using a template

Source: https://www.w3.org/TR/2017/WD-html52-20170117/semantics-scripting.html

This example shows how to use a `template` element to define a row structure and then clone it for each data item. The script queries the template, clones its content, fills in the cells, and appends the clone to the table body. The data is hard-coded but could come from a server.

```html
<!DOCTYPE html>
<title>Cat data</title>
<script>
  // Data is hard-coded here, but could come from the server
  var data = [
    { name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
    { name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
  ];
</script>
<table>
  <thead>
  <tr>
    <th>Name <th>Color <th>Sex <th>Legs
  <tbody>
  <template id="row">
    <tr><td><td><td><td>
  </template>
</table>
<script>
  var template = document.querySelector('#row');
  for (var i = 0; i < data.length; i += 1) {
    var cat = data[i];
    var clone = template.content.cloneNode(true);
    var cells = clone.querySelectorAll('td');
    cells[0].textContent = cat.name;
    cells[1].textContent = cat.color;
    cells[2].textContent = cat.sex;
    cells[3].textContent = cat.legs;
    template.parentNode.appendChild(clone);
  }
</script>
```

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

### HTML document with comment moved before html

Source: https://www.w3.org/TR/2017/WD-html52-20170117/syntax.html

The result of removing the html start tag from the previous example: the comment appears before the html element.

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

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

### TextTrackCue.startTime

Source: https://www.w3.org/TR/2017/WD-html52-20170117/semantics-embedded-content.html

Returns the text track cue start time, in seconds. Can be set.

```APIDOC
## TextTrackCue.startTime

### Description
Returns the text track cue start time, in seconds. Can be set.

### Attribute
startTime (read/write)

### Returns
- **double** - The text track cue start time in seconds.

### Example
```js
const start = cue.startTime;
cue.startTime = 10.5;
```
```

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

### HTML document with all tags present

Source: https://www.w3.org/TR/2017/WD-html52-20170117/syntax.html

A basic HTML document with all start and end tags present, including white space around the head and body elements. This example is used to illustrate that the head and body start tags cannot be omitted when surrounded by white space.

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

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

### selectionStart attribute

Source: https://www.w3.org/TR/2017/WD-html52-20170117/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.

### Applies to
- input elements (when they apply)
- textarea elements

### Getting
- Returns 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.

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

### Exceptions
- For input elements where these attributes do not apply, throws an `InvalidStateError` exception.
```

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

### HTML header element example for a game

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sections.html

Sample header for a game intro, using a header element with a welcome line and an h1.

```html
<header>
  <p>Welcome to...</p>
  <h1>Voidwars!</h1>
</header>
```

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

### Example of dl element with key-value pairs

Source: https://www.w3.org/TR/2017/WD-html52-20170117/grouping-content.html

Shows a description list where each dt element is a keycode and each dd element is the corresponding key name.

```html
<dl>
  <dt>37</dt>
  <dd>Left</dd>
  <dt>38</dt>
  <dd>Right</dd>
  <dt>39</dt>
  <dd>Up</dd>
  <dt>40</dt>
  <dd>Down</dd>
</dl>
```

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

### Example of a select element with options

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Shows a select element with a label and five options, with the third option preselected via 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>
```

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

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

Source: https://www.w3.org/TR/2017/WD-html52-20170117/semantics-scripting.html

Shows how to rewrite expressions that contain the '<!--' sequence to avoid it being interpreted as a line comment start in classic scripts. The examples use spacing or parentheses to separate the characters.

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

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

### Non-conforming nested form example with innerHTML

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Shows a non-conforming HTML snippet where a script uses innerHTML to insert a table containing a nested form and an input. The form owner of 'd' becomes the inner form 'c', while 'e' gets the outer form 'a'. This violates content models and triggers a parse error for the closing form tag.

```html
...  <form id="a">
  <div id="b"></div>
  </form>
  <script>
  document.getElementById('b').innerHTML =
      '<table><tr><td></form><form id="c"><input id="d"></table>' +
      '<input id="e">';
  </script>
...
```

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

### Keywords meta tag example

Source: https://www.w3.org/TR/2017/WD-html52-20170117/document-metadata.html

Example of a meta element with name='keywords' specifying comma-separated keywords relevant to the page. The example shows a full HTML document with a title and meta keywords.

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

```

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

### Passing a parameter to a plugin (O3D example)

Source: https://www.w3.org/TR/2017/WD-html52-20170117/semantics-embedded-content.html

Complete HTML document showing how to use the param element to pass the 'o3d_features' parameter to an O3D plugin, with fallback content.

```html
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>O3D Utah Teapot</title>
  </head>
  <body>
    <p>
    <object type="application/vnd.o3d.auto">
      <param name="o3d_features" value="FloatingPointTextures">
      <img src="o3d-teapot.png"
          title="3D Utah Teapot illustration rendered using O3D."
          alt="When O3D renders the Utah Teapot, it appears as a squat
          teapot with a shiny metallic finish on which the
          surroundings are reflected, with a faint shadow caused by
          the lighting.">
      <p>To see the teapot actually rendered by O3D on your
      computer, please download and install the <a
      href="https://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
    </object>
    <script src="o3d-teapot.js"></script>
    </p>
  </body>
</html>
```

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

### media.readyState

Source: https://www.w3.org/TR/2017/WD-html52-20170117/semantics-embedded-content.html

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

```APIDOC
## media.readyState

### Description
Returns the current ready state of the media element, indicating how much data is available.

### Property
readyState (read-only)

### Return Value
Number: one of the ready state values (HAVE_NOTHING, HAVE_METADATA, HAVE_CURRENT_DATA, HAVE_FUTURE_DATA, HAVE_ENOUGH_DATA).

### Example
```js
let state = media.readyState;
```
```

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

### wbr example in a quote

Source: https://www.w3.org/TR/2017/WD-html52-20170117/textlevel-semantics.html

Example showing wbr used to separate words in a long quote for readable wrapping.

```html
<p>So then he pointed at the tiger and screamed
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>
```

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

### wbr example in a code listing

Source: https://www.w3.org/TR/2017/WD-html52-20170117/textlevel-semantics.html

Example showing wbr used to suggest wrapping points in long lines of code.

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

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

### Sudoku table markup example

Source: https://www.w3.org/TR/2017/WD-html52-20170117/tabular-data.html

An example of a table used to mark up a Sudoku puzzle, showing the lack of headers which are not necessary in such a table.

```html
<section>
  <h1>Today’s Sudoku</h1>
  <table>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <tbody>
    <tr> <td> 1 <td>   <td> 3 <td> 6 <td>   <td> 4 <td> 7 <td>   <td> 9
    <tr> <td>   <td> 2 <td>   <td>   <td> 9 <td>   <td>   <td> 1 <td>
    <tr> <td> 7 <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td> 6
  <tbody>
    <tr> <td> 2 <td>   <td> 4 <td>   <td> 3 <td>   <td> 9 <td>   <td> 8
    <tr> <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>
    <tr> <td> 5 <td>   <td>   <td> 9 <td>   <td> 7 <td>   <td>   <td> 1
  <tbody>
    <tr> <td> 6 <td>   <td>   <td>   <td> 5 <td>   <td>   <td>   <td> 2
    <tr> <td>   <td>   <td>   <td>   <td> 7 <td>   <td>   <td>   <td>
    <tr> <td> 9 <td>   <td>   <td> 8 <td>   <td> 2 <td>   <td>   <td> 5
  </table>
</section>
```

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

### iframe example for advertising

Source: https://www.w3.org/TR/2017/WD-html52-20170117/semantics-embedded-content.html

An example of using an iframe to include advertising from an advertising broker. The iframe has title, src, width, and height attributes.

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

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

### readyState

Source: https://www.w3.org/TR/2017/WD-html52-20170117/semantics-embedded-content.html

Returns a numeric value expressing the current ready state of the media element.

```APIDOC
## readyState

### Description
Returns a value that expresses the current state of the element with respect to rendering the current playback position.

### Property
readyState

### Return Value
- **Number** - The ready state of the media element, one of the following values:
  - `HAVE_NOTHING` (0) - No information regarding the media resource is available.
  - `HAVE_METADATA` (1) - Enough of the resource has been obtained that the duration is available.
  - `HAVE_CURRENT_DATA` (2) - Data for the immediate current playback position is available.
  - `HAVE_FUTURE_DATA` (3) - Data for the immediate current playback position and enough data to advance playback is available.
```

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

### HTML article element with multiple section examples

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sections.html

These snippets are part of an example showing how the `article` element can contain multiple sections with different classes. Each snippet represents a distinct section of the article. The example is from the HTML specification and is used to illustrate the use of the `article` element's content model.

```xml
<section class="chapter">
    <h3>My First Chapter</h3>
    <p>This is the first of my chapters. It doesn’t say much.</p>
    <p>But it has two paragraphs!</p>
  </section>
```

```xml
<section class="chapter">
    <h3>It Continues: The Second Chapter</h3>
    <p>Bla dee bla, dee bla dee bla. Boom.</p>
  </section>
```

```xml
<section class="appendix">
    <h3>Appendix A: Overview of Examples</h3>
    <p>These are demonstrations.</p>
  </section>
```

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

### Using pre with samp and kbd for a command session

Source: https://www.w3.org/TR/2017/WD-html52-20170117/grouping-content.html

Shows a pre element mixing samp and kbd elements to represent a session of the game Zork I, with computer output and user input.

```html
<pre><samp>You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

></samp> <kbd>open mailbox</kbd>

<samp>Opening the mailbox reveals:
A leaflet.

></samp></pre>
```

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

### Autofocus attribute example: search input

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Shows a text input with the autofocus attribute, which will be focused when the document is loaded. The example includes a submit button for a search form.

```html
<input maxlength="256" name="q" value="" autofocus>
<input type="submit" value="Search">

```

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

### Using pre with code to present a code block

Source: https://www.w3.org/TR/2017/WD-html52-20170117/grouping-content.html

Shows a pre element containing a code element to present a block of computer code. The example includes a paragraph introducing the code.

```html
<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>
```

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

### Image map example with map and area elements

Source: https://www.w3.org/TR/2017/WD-html52-20170117/semantics-embedded-content.html

An example of an image map defined at the top of a page with corresponding text links at the bottom, using the map and area elements.

```html
<!DOCTYPE HTML>
<TITLE>Babies™: Toys</TITLE>
<HEADER>
  <h1>Toys</h1>
  <IMG SRC="/images/menu.gif"
      ALT="Babies™ navigation menu. Select a department to go to its page."
      USEMAP="#NAV">
</HEADER>
  ...
<FOOTER>
  <MAP NAME="NAV">
  <P>
    <A HREF="/clothes/">Clothes</A>
    <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
    <A HREF="/toys/">Toys</A>
    <AREA ALT="Toys" COORDS="100,0,200,50" HREF="/toys/"> |
    <A HREF="/food/">Food</A>
    <AREA ALT="Food" COORDS="200,0,300,50" HREF="/food/"> |
    <A HREF="/books/">Books</A>
    <AREA ALT="Books" COORDS="300,0,400,50" HREF="/books/">
  </P>
  </MAP>
</FOOTER>
```

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

### Navigator.product

Source: https://www.w3.org/TR/2017/WD-html52-20170117/webappapis.html

Returns the string 'Gecko'.

```APIDOC
## Navigator.product

### Description
Returns the string "Gecko".

### Property
`product` (readonly DOMString)

### Returns
- **DOMString** - Always returns "Gecko".

```

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

### Navigator.platform

Source: https://www.w3.org/TR/2017/WD-html52-20170117/webappapis.html

Returns the name of the platform.

```APIDOC
## Navigator.platform

### Description
Returns the name of the platform.

### Property
`platform` (readonly DOMString)

### Returns
- **DOMString** - Either the empty string or a string representing the platform on which the browser is executing, e.g., "MacIntel", "Win32", "FreeBSD i386", "WebTV OS".

```

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

### HTML example: Avoiding overlapping paragraphs with explicit p elements

Source: https://www.w3.org/TR/2017/WD-html52-20170117/dom.html

Shows the same section as the previous example but with explicit p elements to avoid overlapping paragraphs, as recommended in the text.

```html
<section>
  <h2>My Cats</h2>
  <p>You can play with my cat simulator.</p>
  <object data="cats.sim">
    <p>To see the cat simulator, use one of the following links:</p>
    <ul>
      <li><a href="cats.sim">Download simulator file</a>
      <li><a href="https://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
    </ul>
    <p>Alternatively, upgrade to the Mellblom Browser.</p>
  </object>
  <p>I’m quite proud of it.</p>
</section>

```

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

### HTML example: Overlapping paragraphs with object fallback

Source: https://www.w3.org/TR/2017/WD-html52-20170117/dom.html

Shows a section with an object element that has fallback content, causing overlapping paragraphs. This example illustrates the problem described in the text.

```html
<section>
  <h2>My Cats</h2>
  You can play with my cat simulator.
  <object data="cats.sim">
    To see the cat simulator, use one of the following links:
    <ul>
      <li><a href="cats.sim">Download simulator file</a>
      <li><a href="https://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
    </ul>
    Alternatively, upgrade to the Mellblom Browser.
  </object>
  I’m quite proud of it.
</section>

```

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

### window.open()

Source: https://www.w3.org/TR/2017/WD-html52-20170117/browsers.html

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

```APIDOC
## [WINDOW] open()

### Description
Opens and navigates an auxiliary browsing context, or navigates an existing browsing context.

### Method
window.open()

### Parameters
#### Parameters
- **url** - The first argument, the URL to navigate to.
- **target** - The second argument, the browsing context name. If empty, defaults to "_blank".
- **features** - The third argument, a string of features.
- **replace** - The fourth argument, indicating whether to replace the current entry.

### Return Value
Returns the `WindowProxy` object of the target browsing context.

### Behavior Details
- If target is the empty string, it becomes "_blank".
- If the user has indicated a preference for which browsing context to navigate, that preference is used.
- If the URL parsing fails, an inline error page is used, or the navigation is aborted.
- If resource is 
```

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

### Generator meta tag example

Source: https://www.w3.org/TR/2017/WD-html52-20170117/document-metadata.html

Example of a meta element with name='generator' identifying the software used to generate the page. The value must not be used on pages whose markup is not generated by software.

```html
<meta name=generator content="Frontweaver 8.2">
```

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

### Form submission with POST and multipart/form-data

Source: https://www.w3.org/TR/2017/WD-html52-20170117/sec-forms.html

Example form using the POST method with enctype="multipart/form-data". The submission results in an HTTP POST with a multipart entity body containing the form fields.

```html
<form action="/find.cgi" method=post enctype="multipart/form-data">
  <input type=text name=t>
  <input type=search name=q>
  <input type=submit>
</form>
```

```text
------kYFrd4jNJEgCervEContent-Disposition: form-data; name="t"

cats
------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="q"

fur
------kYFrd4jNJEgCervE--
```

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

### Better markup using footer and address

Source: https://www.w3.org/TR/2017/WD-html52-20170117/grouping-content.html

Improved markup for the previous example, using footer and address elements instead of p.

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