### Form submission with GET method

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

Example form using the GET method. When submitted, the user agent loads the action URL with query parameters appended.

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

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

### Correct alternatives to non-conforming br examples

Source: https://www.w3.org/TR/2016/WD-html51-20160310/textlevel-semantics.html

Correct alternatives to the previous non-conforming examples, using separate paragraphs instead of br.

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

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

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

### Example of using the base element

Source: https://www.w3.org/TR/2016/WD-html51-20160310/document-metadata.html

An HTML example showing how to set the document base URL with the base element. The link to 'archives.html' resolves to 'http://www.example.com/news/archives.html'.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>This is an example for the &lt;base&gt; element</title>
    <base href="http://www.example.com/news/index.html">
  </head>
  <body>
    <p>Visit the <a href="archives.html">archives</a>.</p>
  </body>
</html>

```

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

### Example of script nesting in HTML parsing

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

Illustrates how the tree construction stage handles a 'p' start tag token while processing a 'script' end tag token, demonstrating the reentrant parsing model.

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

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

### HTML example with omitted tags

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

This example shows the document after omitting the html, head, and body start and end tags, resulting in a minimal but equivalent markup.

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

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

### Table with all optional tags present

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

A complete HTML table with all start and end tags explicitly written. This serves as the baseline example before omitting optional tags.

```html
<table>
<caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)</caption>
<colgroup><col><col><col></colgroup>
<thead>
<tr>
  <th>Function</th>
  <th>Control Unit</th>
  <th>Central Station</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Headlights</td>
  <td>✔</td>
  <td>✔</td>
</tr>
<tr>
  <td>Interior Lights</td>
  <td>✔</td>
  <td>✔</td>
</tr>
<tr>
  <td>Electric locomotive operating sounds</td>
  <td>✔</td>
  <td>✔</td>
</tr>
<tr>
  <td>Engineer’s cab lighting</td>
  <td></td>
  <td>✔</td>
</tr>
<tr>
  <td>Station Announcements - Swiss</td>
  <td></td>
  <td>✔</td>
</tr>
</tbody>
</table>
```

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

### Example of vendor-specific extensions using x-vendor-feature attributes

Source: https://www.w3.org/TR/2016/WD-html51-20160310/infrastructure.html

Shows how multiple vendor extensions can coexist on a single element using x-vendor-feature attributes. This example is non-conforming but illustrates the extension mechanism.

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

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

### Example: Grouping options with optgroup in a select element

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

Shows how to offer a set of lessons from three courses in a select drop-down widget using optgroup elements to label each course. The form uses the GET method and includes a submit button.

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

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

### Dialog system with fixed character lines

Source: https://www.w3.org/TR/2016/WD-html51-20160310/common-idioms-without-dedicated-elements.html

Example of a game FAQ/walkthrough listing known possible responses for each character, using sections, headings, and lists. The example shows ordered and unordered lists for different characters and scenarios.

```html
<section>
  <h1>Dialog</h1>
  <p><small>Some characters repeat their lines in order each time you interact
  with them, others randomly pick from amongst their lines. Those who respond in
  order have numbered entries in the lists below.</small>
  <h2>The Shopkeeper</h2>
  <ul>
  <li>How may I help you?
  <li>Fresh apples!
  <li>A loaf of bread for madam?
  </ul>
  <h2>The pilot</h2>
  <p>Before the accident:
  <ul>
  </li>I’m about to fly out, sorry!
  </li>Sorry, I’m just waiting for flight clearance and then I’ll be off!
  </ul>
  <p>After the accident:
  <ol>
  <li>I’m about to fly out, sorry!
  <li>Ok, I’m not leaving right now, my plane is being cleaned.
  <li>Ok, it’s not being cleaned, it needs a minor repair first.
  <li>Ok, ok, stop bothering me! Truth is, I had a crash.
  </ol>
  <h2>Clan Leader</h2>
  <p>During the first clan meeting:
  <ul>
  <li>Hey, have you seen my daughter? I bet she’s up to something nefarious again...
  <li>Nice weather we’re having today, eh?
  <li>The name is Bailey, Jeff Bailey. How can I help you today?
  <li>A glass of water? Fresh from the well!
  </ul>
  <p>After the earthquake:
  <ol>
  <li>Everyone is safe in the shelter, we just have to put out the fire!
  <li>I’ll go and tell the fire brigade, you keep hosing it down!
  </ol>
</section>
```

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

### TextTrackCue.startTime

Source: https://www.w3.org/TR/2016/WD-html51-20160310/semantics-embedded-content.html

Gets or sets the text track cue start time in seconds.

```APIDOC
## TextTrackCue.startTime

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

### Attribute
- **startTime** (double) - Read/Write - The text track cue start time in seconds. On setting, the start time is set to the new value, and if the cue is in a media element's list of text tracks, the time marches on steps are run.

```

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

### Blog post example with article element and schema.org annotations

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sections.html

Example of a blog post using the article element with schema.org annotations. Shows the basic structure for a self-contained article, including header, content, and footer, using microdata attributes.

```html
<article itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    <h2 itemprop="headline">The Very First Rule of Life</h2>
    <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
    <link itemprop="url" href="?comments=0">
  </header>
  <p>If there’s a microphone anywhere near you, assume it’s hot and
  sending whatever you’re saying to the world. Seriously.</p>
  <p>_..._</p>
  <footer>
    <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
  </footer>
</article>

```

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

### Markup for foster parenting example

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

The markup used in the parsing model example to illustrate foster parenting and the handling of active formatting elements.

```html
<table>
<b>
<tr>
<td>aaa</td>
</tr>
bbb
</table>
ccc
```

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

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

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

The same document as the previous example but with the <html> start tag removed. The DOM is identical, and whitespace around the root element is ignored.

```html
<!DOCTYPE HTML>

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

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

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

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

Example of an input element with type=number, min=0, step=0.01, and name=price, used to collect a monetary amount. The step value allows two decimal places.

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

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

### media.play()

Source: https://www.w3.org/TR/2016/WD-html51-20160310/semantics-embedded-content.html

Starts playback of the media resource. Sets the paused attribute to false, loading the media resource and beginning playback if necessary. If playback had ended, it will restart from the start.

```APIDOC
## media.play()

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

### Method
play()

### Parameters
None.

### Return Value
None.

### Example
```js
media.play();
```
```

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

### URL input with datalist example

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

Example markup for an input element in the URL state with a datalist providing suggested URLs. The user agent may use session history to offer additional matches, which are not exposed to the DOM.

```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="http://www.w3.org/TR/html4/">
  <option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">
  <option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/">
  <option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html">
  <option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/">
</datalist>
```

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

### HTML example with white space added back

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

This example shows the same minimal markup with some white space added back for readability, which is still equivalent to the original document.

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

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

### Dialog box example with form for adding coins

Source: https://www.w3.org/TR/2016/WD-html51-20160310/interactive-elements.html

An HTML example of a dialog element containing a form to add coins to a wallet. It uses the main element to highlight important content and includes input fields for amount and rounding.

```html
<dialog>
  <h2>Add to Wallet</h2>
  <main>
  <p>How many gold coins do you want to add to your wallet?</p>
  <p><input name=amt type=number min=0 step=0.01 value=100></p>
  </main>
  <p><small>You add coins at your own risk.</small></p>
  <p><label><input name=round type=checkbox> Only add perfectly round coins </label>
  <p><input type=button onclick="submit()" value="Add Coins"></p>
</dialog>
```

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

### Multipart form data entity body example

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

Example of the entity body sent when submitting the POST form with multipart/form-data. Shows the multipart boundaries and field values.

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

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

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

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

### Conforming p element examples

Source: https://www.w3.org/TR/2016/WD-html51-20160310/grouping-content.html

Three separate examples of conforming HTML fragments using the p element: a simple paragraph, a fieldset with paragraphs containing form controls, and a limerick with line breaks.

```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
<fieldset>
  <legend>Personal information</legend>
  <p>
    <label>Name: <input name="n"></label>
    <label><input name="anon" type="checkbox"> Hide from other users</label>
  </p>
  <p><label>Address: <textarea name="a"></textarea></label></p>
</fieldset>
```

```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 example: Explicit paragraphs with split link

Source: https://www.w3.org/TR/2016/WD-html51-20160310/dom.html

Shows the same content as the previous example but with explicit p elements and the link split into three separate elements, demonstrating proper 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>
```

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

### Long head example with meta, base, link, script, title

Source: https://www.w3.org/TR/2016/WD-html51-20160310/document-metadata.html

A more extensive head example using uppercase HTML tags and attributes, including meta charset, base href, title, link stylesheets, script, and meta application-name. Demonstrates a longer head structure.

```html
<!DOCTYPE HTML>
  <HTML>
  <HEAD>
    <META CHARSET="UTF-8">
    <BASE HREF="http://www.example.com/">
    <TITLE>An application with a long head</TITLE>
    <LINK REL="STYLESHEET" HREF="default.css">
    <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text">
    <SCRIPT SRC="support.js"></SCRIPT>
    <META NAME="APPLICATION-NAME" CONTENT="Long headed application">
  </HEAD>
  <BODY>
    ...
```

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

### Blog post with nested article comments example

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sections.html

Expanded version of the blog post example, adding a nested section for comments. Demonstrates nested article elements for user comments, using schema.org and microdata to mark up comments and their authors.

```html
<article itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    <h2 itemprop="headline">The Very First Rule of Life</h2>
    <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
    <link itemprop="url" href="?comments=0">
  </header>
  <p>If there’s a microphone anywhere near you, assume it’s hot and
  sending whatever you’re saying to the world. Seriously.</p>
  <p>_..._</p>
  <section>
    <h2>Comments</h2>
    <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
      <link itemprop="url" href="#c1">
      <footer>
        <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">George Washington</span>
        </span></p>
        <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
      </footer>
      <p>Yeah! Especially when talking about your lobbyist friends!</p>
    </article>
    <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
      <link itemprop="url" href="#c2">
      <footer>
        <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">George Hammond</span>
        </span></p>
        <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
      </footer>
      <p>Hey, you have the same first name as me.</p>
    </article>
  </section>
</article>

```

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

### Paragraph example with ins and del elements

Source: https://www.w3.org/TR/2016/WD-html51-20160310/dom.html

Shows the same markup as the previous example but with ins and del elements around some content. Demonstrates that these elements can straddle paragraph boundaries without changing the paragraph structure.

```html
<section>
  <ins><h1>Example of paragraphs</h1>
  This is the <em>first</em> paragraph in</ins> this example<del>.
  <p>This is the second.</p></del>
  <!-- This is not a paragraph. -->
</section>
```

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

### Seamless iframe inclusion example

Source: https://www.w3.org/TR/2016/WD-html51-20160310/semantics-embedded-content.html

Example of using the seamless attribute to include a site-wide navigation bar. In new user agents, links open in the parent and styles are applied automatically; legacy user agents may need a base element with target=_parent and explicit styles.

```html
<!DOCTYPE HTML>
<title>Mirror Mirror — MovieInfo™</title>
<header>
  <h1>Mirror Mirror</h1>
  <p>Part of the MovieInfo™ Database</p>
  <nav>
  <iframe seamless src="nav.inc"></iframe>
  </nav>
</header>
...
```

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

### Dropzone example: accept image files and display them

Source: https://www.w3.org/TR/2016/WD-html51-20160310/editing.html

This example creates a drop target for image files using the dropzone attribute with copy operation and MIME types for PNG, GIF, and JPEG. The ondrop handler receives the event and appends an image element to the div when a file with an image MIME type is dropped.

```html
<div dropzone="copy file:image/png file:image/gif file:image/jpeg" ondrop="receive(event, this)">
<p>Drop an image here to have it displayed.</p>
</div>
<script>
function receive(event, element) {
  var data = event.dataTransfer.items;
  for (var i = 0; i < data.length; i += 1) {
    if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) {
      var img = new Image();
      img.src = window.createObjectURL(data[i].getAsFile());
      element.appendChild(img);
    }
  }
}
</script>
```

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

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

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

The result of removing the <html> start tag from the previous example: the comment moves to before the <html> element, changing the DOM.

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

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

### selectionStart attribute

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

Gets or sets the offset to the character immediately following the start of the selection. Setting acts as if setSelectionRange() was called.

```APIDOC
## selectionStart attribute

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

### Method
selectionStart (getter/setter)

### Parameters
- **newValue** (number) - Required - The new start offset.

### Behavior
- On getting: returns the offset to the character immediately following the start of the selection, or the cursor position if no selection.
- On setting: acts as if `setSelectionRange()` was called with the new value as first argument, the current `selectionEnd` (or new value if `selectionEnd` is less) as second argument, and current `selectionDirection` as third argument.
```

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

### Use a plugin with fallback content (Flash video example)

Source: https://www.w3.org/TR/2016/WD-html51-20160310/semantics-embedded-content.html

Shows how to embed a Flash plugin to play a video, with fallback to a video element and a link for browsers without Flash or video support. The object element uses type="application/x-shockwave-flash" and param elements for configuration.

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

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

### TimeRanges interface

Source: https://www.w3.org/TR/2016/WD-html51-20160310/semantics-embedded-content.html

The TimeRanges interface represents a list of time ranges. It provides methods to get the start and end times of ranges by index.

```APIDOC
## TimeRanges interface

### Description
The TimeRanges interface represents a list of ranges (periods) of time. It provides read-only access to the number of ranges and methods to retrieve the start and end times of each range.

### Interface Definition
```
interface TimeRanges {
  readonly attribute unsigned long length;
  double start(unsigned long index);
  double end(unsigned long index);
};
```

### Attributes
- **length** (unsigned long) - Read-only. Returns the number of ranges in the object.

### Methods
#### start(index)
- **index** (unsigned long) - Required. The index of the range.
- Returns the time for the start of the range with the given index, in seconds.
- Throws an `IndexSizeError` exception if the index is out of range (greater than or equal to the number of ranges).

#### end(index)
- **index** (unsigned long) - Required. The index of the range.
- Returns the time for the end of the range with the given index, in seconds.
- Throws an `IndexSizeError` exception if the index is out of range (greater than or equal to the number of ranges).

### Behavior
- The `length` attribute must return the number of ranges represented by the object.
- The `start(index)` method must return the position of the start of the indexth range, in seconds measured from the start of the timeline.
- The `end(index)` method must return the position of the end of the indexth range, in seconds measured from the start of the timeline.
- These methods must throw `IndexSizeError` exceptions if called with an index argument greater than or equal to the number of ranges.
- Ranges in a `TimeRanges` object must be inclusive.
- A normalized `TimeRanges` object has ranges that are ordered, don’t overlap, and don’t touch (adjacent ranges are folded into one bigger range).
```

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

### Pass a parameter to a plugin using param (O3D example)

Source: https://www.w3.org/TR/2016/WD-html51-20160310/semantics-embedded-content.html

Complete HTML document showing how to use the param element to pass a parameter (o3d_features) to the O3D plugin. Includes fallback content (img and text) and a script reference.

```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="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
    </object>
    <script src="o3d-teapot.js"></script>
    </p>
  </body>
</html>
```

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

### HTML example with white space preventing tag omission

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

This example shows a basic HTML document with white space around the head and body start tags, which prevents those tags from being omitted. The body and html end tags could be omitted without affecting the parse tree.

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

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

### HTML comment syntax example

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

Shows the required syntax for HTML comments: start with <!--, optional text that must not contain '--' or end with '-', and end with -->.

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

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

### Example of a select element with options

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

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

```html
<p>
  <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>
</p>
```

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

### hCalendar microformat example using time element

Source: https://www.w3.org/TR/2016/WD-html51-20160310/textlevel-semantics.html

Shows a hypothetical way of encoding an event using a variant on hCalendar that uses the time element for event start and end dates.

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

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

### Flight booking example with datetime-local input

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

Shows a fieldset with an airport selection and a departure time input using type=datetime-local with step=3600, plus a datalist of airports.

```html
<fieldset>
  <legend>Destination</legend>
  <p><label>Airport: <input type=text name=to list=airports></label></p>
  <p><label>Departure time: <input type=datetime-local name=totime step=3600></label></p>
</fieldset>
<datalist id=airports>
  <option value=ATL label="Atlanta">
  <option value=MEM label="Memphis">
  <option value=LHR label="London Heathrow">
  <option value=LAX label="Los Angeles">
  <option value=FRA label="Frankfurt">
</datalist>
```

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

### window.open()

Source: https://www.w3.org/TR/2016/WD-html51-20160310/browsers.html

Opens or navigates a browsing context by name, optionally creating a new auxiliary browsing context. Returns the WindowProxy of the target browsing context.

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

### Description
Opens a new browsing context or navigates an existing one by name, optionally creating 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. If empty, navigates to about:blank.
- **target** (string) - Required - The name of the browsing context. If empty, defaults to "_blank".
- **features** (string) - Optional - A string of comma-separated features for the new window, interpreted per the CSSOM View specification.
- **replace** (boolean) - Optional - Indicates whether to replace the current entry in the session history.

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

### Response
#### Success Response (200)
- **WindowProxy** (object) - The WindowProxy object of the target browsing context.

#### Response Example
```json
{
  "windowProxy": {} // WindowProxy object of the target browsing context
}
```
```

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

### WebVTT chapter track example

Source: https://www.w3.org/TR/2016/WD-html51-20160310/semantics-embedded-content.html

Shows the WebVTT cue format for chapter tracks, with time ranges and chapter titles.

```webvtt
01:30:00.000 --> 01:35:00.000
Answers to Last Exam

01:35:00.000 --> 01:40:00.000
Coursework Description

01:40:00.000 --> 02:30:00.000
General Relativity

01:40:00.000 --> 02:00:00.000
Tensor Algebra

02:00:00.000 --> 02:30:00.000
The General Relativistic Field Equations
```

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

### Ambiguous heading example: <h2>Contact details</h2>

Source: https://www.w3.org/TR/2016/WD-html51-20160310/introduction.html

Shows an example of markup where the author's intent is unclear, used to illustrate a syntax error. The example is an h2 element containing the text 'Contact details'.

```html
<h2>Contact details</h2>
```

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

### Autofocus text input example

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

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

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

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

### Rendering of multi-annotation ruby with rp in non-ruby user agents

Source: https://www.w3.org/TR/2016/WD-html51-20160310/textlevel-semantics.html

Shows the expected rendering of the previous multi-annotation ruby example in non-ruby-capable user agents, with the fallback punctuation and text.

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

```

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

### Sample header for a game

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sections.html

A simple header element containing a welcome message and the game title.

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

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

### setRangeText(replacement, start, end, selectMode)

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

Replaces a range of text with the given replacement string. Throws IndexSizeError if start > end.

```APIDOC
## setRangeText(replacement, start, end, selectMode)

### Description
Replaces the text in the specified range with the replacement string. If only one argument is given, uses the current selection. Throws an IndexSizeError if start > end.

### Method
setRangeText(replacement, start, end, selectMode)

### Parameters
- **replacement** (string) - Required - The replacement text.
- **start** (number) - Optional - The start offset. If omitted, uses the value of `selectionStart`.
- **end** (number) - Optional - The end offset. If omitted, uses the value of `selectionEnd`.
- **selectMode** (string) - Optional - The selection mode after replacement. (Not detailed in source.)

### Behavior
- If only one argument is provided, start and end are set to the current selectionStart and selectionEnd.
- If start > end, throws an `IndexSizeError` exception and aborts.
```

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

### Inline samp element example

Source: https://www.w3.org/TR/2016/WD-html51-20160310/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>
```

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

### Markup for a toolbar menu with meter elements

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

Example of a toolbar menu with links and a list of groups, each showing a meter element with value attributes. The meter elements indicate activity levels.

```html
<h3>Suggested groups</h3>
<menu type="toolbar">
  <a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a>
</menu>
<ul>
  <li>
  <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> -
      <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p>
  <p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
  <p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
  </li>
  <li>
  <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> -
      <a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p>
  <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
  <p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
  </li>
  <li>
  <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
      <a href="/group/mozilla.dev.general/subscribe">join</a></p>
  <p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>
  </li>
</ul>
```

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

### Non-conforming usage of br element (two examples)

Source: https://www.w3.org/TR/2016/WD-html51-20160310/textlevel-semantics.html

Two examples that abuse the br element for separating thematic groups in a paragraph. They are non-conforming.

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

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

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

### Bad example: all label text inside link

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

This example shows that placing all label text inside a link reduces the activation area to the checkbox only.

```html
<!-- bad example - all label text inside the link reduces activation area to checkbox only -->
<label><input type=checkbox name=tac><a href="tandc.html">I agree to the terms and conditions</a></label>
```

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

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

Source: https://www.w3.org/TR/2016/WD-html51-20160310/textlevel-semantics.html

Shows the expected rendering of the previous ruby example in user agents that do not support ruby: the fallback text (parentheses) is displayed around the readings.

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

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

### HTML boolean attribute example: checked=checked and disabled=disabled

Source: https://www.w3.org/TR/2016/WD-html51-20160310/infrastructure.html

Equivalent form of the boolean attribute example using the canonical name as the value for checked and disabled.

```HTML
<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>
```

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

### Misnested tags example: <b><i></b></i>

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

Shows erroneous markup with misnested tags that the HTML parser handles. The example is from section 8.2.8.1 and is non-normative.

```html
<p>1<b>2<i>3</b>4</i>5</p>
```

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

### WebVTT metadata track example for scores

Source: https://www.w3.org/TR/2016/WD-html51-20160310/semantics-embedded-content.html

Shows a WebVTT file fragment with metadata cues for match type, match number, and team scores, demonstrating the recommended practice of using cues that span the duration of the relevant event.

```webvtt
WEBVTT
...

05:10:00.000 --> 05:12:15.000
matchtype:qual
matchnumber:37

...

05:11:02.251 --> 05:11:17.198
red:78

05:11:03.672 --> 05:11:54.198
blue:66

05:11:17.198 --> 05:11:25.912
red:80

05:11:25.912 --> 05:11:26.522
red:83

05:11:26.522 --> 05:11:26.982
red:86

05:11:26.982 --> 05:11:27.499
red:89

...
```

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

### Sudoku table markup example

Source: https://www.w3.org/TR/2016/WD-html51-20160310/tabular-data.html

An example of a table used to mark up a Sudoku puzzle, showing the lack of headers. Includes scoped styles and table structure.

```html
<section>
  <style scoped>
  table { border-collapse: collapse; border: solid thick; }
  colgroup, tbody { border: solid medium; }
  td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
  </style>
  <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>
```

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

### Cache manifest with images, stylesheet, and network safelist

Source: https://www.w3.org/TR/2016/WD-html51-20160310/browsers.html

Example manifest that caches two images and a style sheet, and safelists a CGI script. The manifest requires the 'CACHE MANIFEST' line, uses comments and blank lines, and demonstrates the NETWORK: and CACHE: sections.

```text
CACHE MANIFEST# the above line is required

# this is a comment
# there can be as many of these anywhere in the file
# they are all ignored
# comments can have spaces before them
# but must be alone on the line

# blank lines are ignored too

# these are files that need to be cached they can either be listed
# first, or a "CACHE:" header could be put before them, as is done
# lower down.
images/sound-icon.png
images/background.png
# note that each file has to be put on its own line

# here is a file for the online safelist -- it isn’t cached, and
# references to this file will bypass the cache, always hitting the
# network (or trying to, if the user is offline).
NETWORK:
comm.cgi

# here is another set of files to cache, this time just the CSS file.
CACHE:
style/default.css
```

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

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

Source: https://www.w3.org/TR/2016/WD-html51-20160310/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.

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

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

### getStartDate() method

Source: https://www.w3.org/TR/2016/WD-html51-20160310/semantics-embedded-content.html

Returns a new Date object representing the current timeline offset of the media resource.

```APIDOC
## getStartDate() method

### Description
Returns a new `Date` object representing the current timeline offset. The timeline offset is initially set to NaN.

### Method
`getStartDate()`

### Return Value
- **Date** - A new Date object representing the current timeline offset.
```

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

### Good example: link outside label

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

This example shows that placing the link outside the label maintains the checkbox activation area including the checkbox and all label text.

```html
  <!-- good example - link outside label means checkbox activation area includes the checkbox and all the label text -->
  <label><input type=checkbox name=tac>I agree to the terms and conditions</label>
(read <a href="tandc.html">Terms and Conditions</a>)
```

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

### Bad example: link inside label

Source: https://www.w3.org/TR/2016/WD-html51-20160310/sec-forms.html

This example shows that placing a link inside a label reduces the checkbox activation area. Clicking the link does not toggle the checkbox.

```html
<!-- bad example - link inside label reduces checkbox activation area -->
<label><input type=checkbox name=tac>I agree to <a href="tandc.html">the terms and conditions</a></label>
```

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

### HTML example with white space removed

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

This example shows the same document with all unnecessary white space removed, making it possible to omit several tags without affecting the DOM.

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

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

### media.readyState

Source: https://www.w3.org/TR/2016/WD-html51-20160310/semantics-embedded-content.html

Returns the current ready state of the media element, which can jump between states discontinuously.

```APIDOC
## media.readyState

### Description
Returns the current ready state of the media element, which can jump between states discontinuously.

### Property
readyState (read-only)

### Return Value
Number - The current ready state (e.g., HAVE_NOTHING, HAVE_METADATA, HAVE_CURRENT_DATA, HAVE_FUTURE_DATA, HAVE_ENOUGH_DATA).

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

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

### addShortcutKeyLabel example

Source: https://www.w3.org/TR/2016/WD-html51-20160310/editing.html

Shows how to add a shortcut key label to an element using the addShortcutKeyLabel method. The label displayed varies by platform and key combination.

```javascript
addShortcutKeyLabel(document.getElementById('c'));
```

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

### Unquoted attribute value syntax example: value=yes

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

Shows the unquoted attribute value syntax where the value is not enclosed in quotes. The example uses the 'value' attribute with the value 'yes'.

```html
<input value=yes>
```

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

### HTML example with parser-implied tags

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

This example shows the document with the omitted tags shown in their parser-implied positions, illustrating that the only white space text node is the newline at the end of the head element.

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

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

### kbd element: indicating keys to press

Source: https://www.w3.org/TR/2016/WD-html51-20160310/textlevel-semantics.html

Shows how to mark up keyboard input with nested kbd elements to represent individual keys. The example instructs the user to press Shift+F3.

```html
<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>
```

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

### Single-quoted attribute value syntax example: type='checkbox'

Source: https://www.w3.org/TR/2016/WD-html51-20160310/syntax.html

Shows the single-quoted attribute value syntax where the value is enclosed in single quotes. The example uses the 'type' attribute with the value 'checkbox'.

```html
<input type='checkbox'>
```