### Usage summary: nav element example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/sections.html

Usage summary example for the nav element, showing a navigation list with 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>**
```

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

### Title example for a subsequent page

Source: https://www.w3.org/TR/2014/REC-html5-20141028/document-metadata.html

Example showing a title and heading for a page about dances used during bee mating rituals.

```html
  <title>Dances used during bee mating rituals</title>
    ...
  <h1>The Dances</h1>
```

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

### Title example with heading

Source: https://www.w3.org/TR/2014/REC-html5-20141028/document-metadata.html

Example showing a title and a corresponding h1 heading for a page about bee mating rituals.

```html
  <title>Introduction to The Mating Rituals of Bees</title>
    ...
  <h1>Introduction</h1>
  <p>This companion guide to the highly successful
  <cite>Introduction to Medieval Bee-Keeping</cite> book is...
```

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

### play() method

Source: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html

Starts or resumes playback of the media resource. Handles resource selection, seeking to start if ended, and firing appropriate events.

```APIDOC
## play() method

### Description
Initiates playback of the media resource. If the network state is empty, it invokes the resource selection algorithm. If playback has ended and direction is forwards, it seeks to the earliest possible position. It then brings the element up to speed with its media controller if present, and if paused, changes paused to false and fires appropriate events.

### Method
`play()`

### Parameters
None.

### Behavior
1. If `networkState` is `NETWORK_EMPTY`, invoke the resource selection algorithm.
2. If playback has ended and direction is forwards, and no current media controller, seek to the earliest possible position (this will fire a `timeupdate` event).
3. If there is a current media controller, bring the element up to speed with its new media controller.
4. If `paused` is true:
   - Set `paused` to false.
   - If show poster flag is true, set it to false and run the _time marches on_ steps.
   - Fire a `play` event.
   - If `readyState` is `HAVE_NOTHING`, `HAVE_METADATA`, or `HAVE_CURRENT_DATA`, fire a `waiting` event.
   - Otherwise (if `readyState` is `HAVE_FUTURE_DATA` or `HAVE_ENOUGH_DATA`), fire a `playing` event.
5. Set the autoplaying flag to false.
6. If there is a current media controller, report the controller state for the current media controller.

### Events Fired
- `timeupdate` - when seeking to earliest possible position.
- `play` - when playback starts.
- `waiting` - when readyState is not enough data.
- `playing` - when readyState is enough data.
```

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

### Example: script with document.write('<p>')

Source: https://www.w3.org/TR/2014/REC-html5-20141028/syntax.html

Shows a script element containing a document.write call that emits a 'p' start tag token while the tree construction stage is handling the 'script' end tag token. This illustrates the reentrant nature of the HTML parser.

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

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

### selectionStart

Source: https://www.w3.org/TR/2014/REC-html5-20141028/forms.html

Gets or sets the offset to the start of the selection. Setting acts as if setSelectionRange() was called with the new value as the first argument.

```APIDOC
## selectionStart

### Description
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 that immediately follows the text entry cursor. Can be set to change the start of the selection.

### Attributes
- **selectionStart** (unsigned long) - On getting, returns the start offset. On setting, acts as if setSelectionRange() was called with the new value as the first argument, the current selectionEnd as the second (or the new value if selectionEnd is less), and the current selectionDirection as the third.

### Exceptions
For input elements, throws InvalidStateError if the attribute does not apply.

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

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

### Usage summary: body element example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/sections.html

Usage summary example for the body element, showing its placement in a basic HTML document.

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

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

### Usage summary: header element example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/sections.html

Usage summary example for the header element, showing it containing a heading and author information within an article.

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

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

### Example of html element with lang attribute

Source: https://www.w3.org/TR/2014/REC-html5-20141028/semantics.html

A complete HTML document example showing the html element with a lang attribute set to 'en'. The example is from the specification and demonstrates 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>
```

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

### MathML example in an HTML document

Source: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html

A complete HTML document that uses MathML to render the quadratic formula. The example shows the required DOCTYPE, html, head, and body structure, with a math element containing mi, mo, mfrac, msqrt, msup, and mn elements. This is the only code example on the page.

```html
<!DOCTYPE html>
<html>
 <head>
  <title>The quadratic formula</title>
 </head>
 <body>
  <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>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
      </msqrt>
     </mrow>
     <mrow>
      <mn>2</mn> <mo>⁢</mo> <mi>a</mi>
     </mrow>
    </mfrac>
   </math>
  </p>
 </body>
</html>
```

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

### Usage summary: h1-h6 heading example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/sections.html

Usage summary example for heading elements h1-h6, showing a main heading and two subheadings.

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

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

### Usage summary: aside element example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/sections.html

Usage summary example for the aside element, showing it placed between paragraphs with a link.

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

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

### Example: Using audio element with text track to play sound effects

Source: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html

Shows how to use an audio element with a metadata text track to schedule sound effects. It defines a function addFX() to add cues with pauseOnExit, and playSound() to seek and play. The example also demonstrates using oncanplaythrough and onbeforeunload to trigger sounds.

```javascript
var sfx = new Audio('sfx.wav');
var sounds = sfx.addTextTrack('metadata');

// add sounds we care about
function addFX(start, end, name) {
  var cue = new VTTCue(start, end, '');
  cue.id = name;
  cue.pauseOnExit = true;
  sounds.addCue(cue);
}
addFX(12.783, 13.612, 'dog bark');
addFX(13.612, 15.091, 'kitten mew'))

function playSound(id) {
  sfx.currentTime = sounds.getCueById(id).startTime;
  sfx.play();
}

// play a bark as soon as we can
sfx.oncanplaythrough = function () {
  playSound('dog bark');
}
// meow when the user tries to leave
window.onbeforeunload = function () {
  playSound('kitten mew');
  return 'Are you sure you want to leave this awesome page?';
}
```

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

### Example of using the base element

Source: https://www.w3.org/TR/2014/REC-html5-20141028/document-metadata.html

An HTML example demonstrating how to set the document base URL using the base element. The base href is set to 'http://www.example.com/news/index.html', and a relative link 'archives.html' will resolve against that base.

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

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

### HTML example using the `license` link type

Source: https://www.w3.org/TR/2014/REC-html5-20141028/links.html

Shows the `license` link type applied to a photograph inside a `<main>` element, making it clear that the license applies only to the main content, not the whole document. The example uses an `<a>` element with `rel="license"` to reference the MIT license.

```html
<!DOCTYPE HTML>
<html>
 <head>
  <title>Exampl Pictures: Kissat</title>
  <link rel="stylesheet" href="/style/default">
 </head>
 <body>
  <h1>Kissat</h1>
  <nav>
   <a href="../">Return to photo index</a>
  </nav>
  
  <main>
  <figure>
   <img src="/pix/39627052_fd8dcd98b5.jpg">
   <figcaption>Kissat</figcaption>
  </figure>
  <p>One of them has six toes!</p>
  <p><small>This photograph is <a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
  </main>
  <footer>
   <a href="/">Home</a> | <a href="../">Photo index</a>
   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
  </footer>
 </body>
</html>
```

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

### Equivalent pre blocks with newline handling

Source: https://www.w3.org/TR/2014/REC-html5-20141028/syntax.html

Shows two pre blocks that are equivalent: the first starts with 'Hello' immediately, the second has a newline after the start tag, which is ignored per the newline restriction.

```html
<pre>Hello</pre>
```

```html
<pre>  
Hello</pre>
```

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

### Conversation example using p elements

Source: https://www.w3.org/TR/2014/REC-html5-20141028/common-idioms.html

Demonstrates marking up a dialogue using p elements and punctuation, as recommended for conversations. The example is an extract from a famous sketch.

```html
<p> Costello: Look, you gotta first baseman?
<p> Abbott: Certainly.
<p> Costello: Who's playing first?
<p> Abbott: That's right.
<p> Costello becomes exasperated.
<p> Costello: When you pay off the first baseman every month, who gets the money?
<p> Abbott: Every dollar of it.
```

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

### Usage summary: article element example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/sections.html

Usage summary example for the article element, showing two separate article elements with images and footers.

```html
**<article>**
 <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.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>**
 <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt="">
 <p>Happy 2nd birthday Masif Saturdays!!!</p>
 <footer>Posted 3 weeks ago</footer>
**</article>**
```

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

### Usage summary: footer element example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/sections.html

Usage summary example for the footer element, showing it at the end of an article with artist information.

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

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

### Using param element with O3D plugin

Source: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html

Example showing how to pass a parameter to a plugin using the param element, specifically for the O3D plugin.

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

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

### Example of vendor-specific extension attributes (x-vendor-feature)

Source: https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html

Shows how to use custom attributes with the 'x-vendor-feature' form for experimental extensions. The example uses 'ferret' and 'mb' as vendor prefixes to add scratch-and-sniff functionality to 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>
```

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

### Link with image alt text example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html

Example of a list of color links where each link contains only an image, with the color name provided in the alt attribute for accessibility.

```html
<ul>
  <li><a href="red.html"><img src="red.jpeg" **alt="Red"**></a></li>
  <li><a href="green.html"><img src="green.jpeg" **alt="Green"**></a></li>
</ul>
```

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

### Meter example with title units

Source: https://www.w3.org/TR/2014/REC-html5-20141028/forms.html

Extends the previous correct example by adding title attributes to specify units in free-form text (centimeters).

```html
<dl>
 <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter>
 <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter>
</dl>
```

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

### Valid meter examples with value, max, min

Source: https://www.w3.org/TR/2014/REC-html5-20141028/forms.html

Shows three valid meter examples with attributes: value, max, min, and nested content. The first includes a textual fallback, the second uses an image fallback, and the third omits content. All are three-quarters full.

```html
Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
Tickets sold: <meter min="0" max="100" value="75"></meter>
```

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

### Infinite loop script example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/webappapis.html

An example of a script that never terminates, used to illustrate resource limitations. A user agent could prompt the user to terminate or let it continue.

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

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

### Usage summary: section element example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/sections.html

Usage summary example for the section element, showing two sections with their own headings under a main biography heading.

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

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

### Example of correctly nested emphasis

Source: https://www.w3.org/TR/2014/REC-html5-20141028/introduction.html

Shows the correct way to nest emphasis elements in HTML.

```html
<p>Example: <em>Emphasized text</em></p>
```

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

### iframe example for advertising

Source: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html

An example of using an iframe to include advertising from an advertising broker. The src attribute includes a customer ID and format parameter, with width and height attributes set.

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

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

### TextTrackCue.startTime

Source: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.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 = 5.0;

```

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

### Search forms with GET method

Source: https://www.w3.org/TR/2014/REC-html5-20141028/forms.html

Two search forms that submit to Google and Bing using the GET method. Each form contains a search input with the name "q" and a submit button.

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

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

### hCalendar microformat example using time element

Source: https://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html

Encodes an event's start and end dates using the `time` element with `datetime` attributes in a microformat.

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

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

### Header for a specification, e.g., SVG 1.2

Source: https://www.w3.org/TR/2014/REC-html5-20141028/sections.html

A more complex header example for a specification document, containing a heading, version information, a definition list with links, and a copyright line. Note the source text includes a truncation marker "_..._" in the copyright paragraph; the example is shown as-is.

```html
<header>
  <h1>Scalable Vector Graphics (SVG) 1.2</h1>
  <p>W3C Working Draft 27 October 2004</p>
 <dl>
  <dt>This version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
  <dt>Previous version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
  <dt>Latest version of SVG 1.2:</dt>
  <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd>
  <dt>Latest SVG Recommendation:</dt>
  <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd>
  <dt>Editor:</dt>
  <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
  <dt>Authors:</dt>
  <dd>See <a href="#authors">Author List</a></dd>
 </dl>
 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic _..._
</header>
```

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

### Unordered list example (order by account balance)

Source: https://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html

Shows the same list items in a different order (by account balance in 2007) to demonstrate that changing order does not change meaning.

```html
<p>I have lived in the following countries:</p>
<ul>
 <li>Switzerland
 <li>Norway
 <li>United Kingdom
 <li>United States
</ul>
```

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

### HTML form with GET method

Source: https://www.w3.org/TR/2014/REC-html5-20141028/forms.html

A basic HTML form that submits data via the GET method to the action URL. The form contains two input fields, one of type text and one of type search. This example illustrates form submission structure with the enctype attribute defaulting to application/x-www-form-urlencoded.

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

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

### play()

Source: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html

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

```APIDOC
## play()

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

### Method
CALL

### Endpoint
media.play()

### Parameters
None

### Response
#### Success Response
No return value.

#### Response Example

undefined

```

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

### Basic time element example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html

Shows a simple `time` element with text content representing a duration.

```html
<time>4h 18m 3s</time>
```

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

### Equivalent manifest written more concisely

Source: https://www.w3.org/TR/2014/REC-html5-20141028/browsers.html

This is an equivalent way to write the previous manifest, using the CACHE: header to list all cached files together.

```text
CACHE MANIFEST
NETWORK:
comm.cgi
CACHE:
style/default.css
images/sound-icon.png
images/background.png
```

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

### Headings and sections outline example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/sections.html

Demonstrates how headings create implied sections and how sectioning roots like blockquote or sectioning content like section can stop or continue the outline. The h2 after blockquote starts a new implied section, and the explicit section restarts the outline so the final paragraph is at the top level.

```html
<body>
 <h1>Foo</h1>
 <h2>Bar</h2>
 <blockquote>
  <h3>Bla</h3>
 </blockquote>
 <p>Baz</p>
 <h2>Quux</h2>
 <section>
  <h3>Thud</h3>
 </section>
 <p>Grunt</p>
</body>
```

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

### Example manifest with comments, whitelist, and cache sections

Source: https://www.w3.org/TR/2014/REC-html5-20141028/browsers.html

This manifest requires two images and a style sheet to be cached and whitelists a CGI script. It shows the use of comments, blank lines, and the NETWORK: and CACHE: section headers.

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

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

### Example of incorrectly nested emphasis (invalid nesting)

Source: https://www.w3.org/TR/2014/REC-html5-20141028/introduction.html

Shows an example of incorrectly nested emphasis markup in HTML. The example is presented as a contrast to the correct nesting pattern.

```html
<p>Example: <i>Emphasized text</i></p>
```

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

### meta keywords example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/document-metadata.html

Example of a meta element with name=keywords, specifying keywords for a page about typefaces on British motorways.

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

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

### MediaController.readyState

Source: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html

Returns the ready state of the media controller. Initially set to 0 (HAVE_NOTHING) and updated by the report the controller state algorithm.

```APIDOC
## MediaController.readyState

### Description
Returns the value to which it was most recently set. When the MediaController object is created, the attribute is set to 0 (HAVE_NOTHING). The value is updated by the report the controller state algorithm.

### Property
`readyState` (unsigned short)

### Example
js
var state = controller.readyState;

```

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

### cite element example: quoting an author

Source: https://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html

Example of using the cite element to reference the author of a quote within a paragraph.

```html
<p>In the words of <cite>Charles Bukowski</cite> -  
  <q>An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.</q></p>
```

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

### pre element with code: Panel constructor example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html

Shows a sample of computer code presented using pre and code elements. The code defines a Panel constructor function.

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

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

### MediaController() constructor

Source: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html

Creates a new MediaController object. The constructor returns a newly created MediaController instance.

```APIDOC
## MediaController() constructor

### Description
When invoked, must return a newly created MediaController object.

### Syntax
js
var controller = new MediaController();

```

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

### readyState

Source: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html

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

```APIDOC
## readyState

### Description
Returns the current ready state of the media element. The ready state can jump discontinuously between states, e.g., from HAVE_METADATA to HAVE_ENOUGH_DATA without passing through intermediate states.

### Method
GET

### Endpoint
media.readyState

### Parameters
None

### Response
#### Success Response
- **readyState** (unsigned short) - The current ready state of the media element.

#### Response Example

HAVE_METADATA

```

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

### meta generator example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/document-metadata.html

Example of a meta element with name=generator, used by a tool called Frontweaver to identify itself as the generator of the page.

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

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

### Basic header example for a game

Source: https://www.w3.org/TR/2014/REC-html5-20141028/sections.html

A minimal header element containing a welcome message and a game title. Demonstrates typical introductory content for a section, here used for a game page.

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

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

### Highlighting search matches with mark

Source: https://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html

Example of using mark to highlight parts of a document that match a search string, such as the word 'kitten'.

```html
<p>I also have some <mark>kitten</mark>s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a <mark>kitten</mark>.</p>
```

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

### cite element example: referencing a search result URL

Source: https://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html

Example of using the cite element to reference the URL of a search result.

```html
<div id="resultStats">About 416,000,000 results 0.33 seconds) </div>
  ...
  <p><a href="http://www.w3.org/html/wg/">W3C <i>HTML Working Group</i></a></p>
  <p><cite>www.w3.org/<b>html</b>/wg/</cite></p>
  <p>15 Apr 2013 - The <i>HTML Working Group</i> is currently chartered to continue its 
  work through 31 December 2014. A Plan 2014 document published by the...</p>
  ...
```

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

### cite element example: referencing a TV show title

Source: https://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html

Example of using the cite element to reference the title of a television show.

```html
<p>Who is your favorite doctor (in <cite>Doctor Who</cite>)?</p>
```

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

### cite element example: referencing a work title in a bibliography

Source: https://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html

Example of using the cite element to reference the title of a work in a bibliography.

```html
<p><cite>Universal Declaration of Human Rights</cite>, United Nations,
December 1948. Adopted by General Assembly resolution 217 A (III).</p>
```

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

### cite element example: identifying a tweet author

Source: https://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html

Example of using the cite element to identify the author of a tweet within a blockquote.

```html
<blockquote class="twitter-tweet">
  <p>♥ Bukowski in <a href="https://twitter.com/search?q=%23HTML5&src=hash">#HTML5</a> spec examples
  <a href="http://t.co/0FIEiYN1pC">http://t.co/0FIEiYN1pC</a></p><cite>— karl dubost (@karlpro) 
  <a href="https://twitter.com/karlpro/statuses/370905307293442048">August 23, 2013</a></cite>
  </blockquote>
```

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

### window.open()

Source: https://www.w3.org/TR/2014/REC-html5-20141028/browsers.html

Navigates an existing browsing context or opens and navigates an auxiliary browsing context. Accepts a URL, target name, features, and replace flag.

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

### Description
Navigates an existing browsing context or opens and navigates an auxiliary browsing context. The method has four arguments, though they are all optional. The first argument, url, must be a valid non-empty URL for a page to load in the browsing context. If the first argument is the empty string, then the url argument must be interpreted as "about:blank". Otherwise, the argument must be resolved to an absolute URL (or an error), relative to the API base URL specified by the entry settings object when the method was invoked. The second argument, target, specifies the name of the browsing context that is to be navigated. It must be a valid browsing context name or keyword. The third argument, features, has no defined effect and is mentioned for historical reasons only. The fourth argument, replace, specifies whether or not the new page will replace the page currently loaded in the browsing context.

### Method
GET

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

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

#### Query Parameters
None.

#### Request Body
- **url** (string) - Required - A valid non-empty URL for a page to load. If empty string, interpreted as "about:blank".
- **target** (string) - Required - The name of the browsing context to navigate. Must be a valid browsing context name or keyword.
- **features** (string) - Optional - Has no defined effect; mentioned for historical reasons only. User agents may interpret as size/position instructions but are encouraged to ignore.
- **replace** (boolean) - Optional - Whether the new page replaces the current page in the browsing context's session history when target identifies an existing browsing context.

### Request Example
```javascript
window.open(url, target, features, replace);
```

### Response
#### Success Response
Returns the WindowProxy object of the browsing context that was navigated, or null if no browsing context was navigated.

#### Response Example
```javascript
var newWindow = window.open('https://example.com', '_blank');
```

### Errors
- Throws InvalidAccessError if no browsing context is chosen after applying the rules for choosing a browsing context with the target argument.

### Notes
- The features argument has no defined effect and is mentioned for historical reasons only.
- If url is the empty string, it is interpreted as "about:blank".
```

```APIDOC
## [GET] window.name

### Description
Gets or sets the current name of the browsing context. The name is reset when the browsing context is navigated to another domain.

### Method
GET (getter) / SET (setter)

### Endpoint
window.name

### Parameters
#### Attributes
- **name** (string) - Required - The new name to set for the browsing context.

### Response
#### Success Response (200)
- **name** (string) - The current name of the browsing context.

#### Response Example
```json
{
  "name": "exampleName"
}
```
```

```APIDOC
## [GET/SET] window.name

### Description
Gets or sets the current name of the browsing context. The name is reset when the browsing context is navigated to another domain.

### Method
GET or SET

### Endpoint
window.name

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

#### Query Parameters
None.

#### Request Body
- **value** (string) - Required for setter - The new name to assign to the browsing context.

### Request Example
```javascript
// Get the current name
let currentName = window.name;

// Set a new name
window.name = "myContext";
```

### Response
#### Success Response (200)
- **name** (string) - The current name of the browsing context.

#### Response Example
```json
{
  "name": "myContext"
}
```
```

```APIDOC
## [GET] window.name

### Description
Gets the current name of the browsing context.

### Method
GET (property access)

### Endpoint
window.name

### Parameters
None.

### Request Example
```javascript
var currentName = window.name;
```

### Response
#### Success Response (200)
- **name** (string) - The current name of the browsing context.

#### Response Example
```json
{
  "name": "exampleName"
}
```
```

```APIDOC
## [SET] window.name

### Description
Sets the name of the browsing context to the new value.

### Method
SET (property assignment)

### Endpoint
window.name = value

### Parameters
#### Request Body
- **value** (string) - Required - The new name for the browsing context.

### Request Example
```javascript
window.name = "myWindowName";
```

### Response
#### Success Response (200)
No return value.

#### Response Example
(no response body)
```

```APIDOC
## [GET] window.name

### Description
Returns the current name of the browsing context.

### Method
GET

### Endpoint
window.name

### Parameters
None.

### Request Example
```javascript
var name = window.name;
```

### Response
#### Success Response (200)
- **name** (DOMString) - The current name of the browsing context.

#### Response Example
```javascript
"myWindowName"
```
```

```APIDOC
## [SET] window.name

### Description
Sets the name of the browsing context to the new value.

### Method
SET (property assignment)

### Endpoint
window.name

### Parameters
#### Request Body
- **value** (DOMString) - Required - The new name for the browsing context.

### Request Example
```javascript
window.name = "myWindowName";
```

### Response
#### Success Response (200)
No response body. The operation completes silently.
```

```APIDOC
## [GET] window.name

### Description
Gets the current name of the browsing context.

### Method
GET (property access)

### Endpoint
window.name

### Parameters
None.

### Request Example
// No request body required

### Response
#### Success Response (200)
- **name** (DOMString) - The current name of the browsing context.

#### Response Example
{
  "name": "exampleName"
}
```

```APIDOC
## [SET] window.name

### Description
Sets the name of the browsing context to the new value.

### Method
SET (property assignment)

### Endpoint
window.name

### Parameters
#### Request Body
- **value** (string) - Required - The new name for the browsing context.

### Request Example
{
  "value": "newName"
}

### Response
#### Success Response (200)
No response body. The name is set on the browsing context.

#### Response Example
{}
```

```APIDOC
## [GET] window.name

### Description
Gets the current name of the browsing context.

### Method
GET

### Endpoint
window.name

### Parameters
None.

### Response
#### Success Response (200)
- **name** (string) - The current name of the browsing context.

#### Response Example
"myWindowName"

```

```APIDOC
## [SET] window.name

### Description
Sets the name of the browsing context to the new value.

### Method
SET (property assignment)

### Endpoint
window.name

### Parameters
#### Request Body
- **value** (string) - Required - The new name for the browsing context.

### Request Example
{
  "value": "newName"
}

### Response
#### Success Response (200)
No response body. The operation is performed as a side effect.
```

```APIDOC
## [WINDOW] window.close()

### Description
Closes the browsing context if it is script-closable, the incumbent settings object is familiar with it, and is allowed to navigate it.

### Method
close

### Endpoint
window.close()

### Parameters
None.

### Request Example
```js
window.close();
```

### Response
#### Success Response (200)
No return value. The browsing context is closed if conditions are met.

#### Response Example
No response body.
```

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

### HTML fragment with data-* attributes

Source: https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html

Example element with data-* attributes (data-x, data-y, data-ai, data-hp, data-ability) used to demonstrate dataset access.

```html
<img class="tower" id="tower5" data-x="12" data-y="5"
     data-ai="robotarget" data-hp="46" data-ability="flames"
     src="towers/rocket.png alt="Rocket Tower">
```

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

### Marking up a Pascal code block with pre and code

Source: https://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html

Shows how to mark up a block of Pascal code using the `pre` and `code` elements. A class attribute indicates the language used.

```html
<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>
```

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

### address element non-conforming example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/sections.html

Non-conforming example: placing a timestamp inside address, which must not contain information other than contact information.

```html
<ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS>
```

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

### Caption element example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/tabular-data.html

Example of a caption element that provides context for a table, including a table number and explanation of the table's contents.

```html
<caption>
<p>Table 1.
<p>This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
</caption>
```

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

### document.readyState

Source: https://www.w3.org/TR/2014/REC-html5-20141028/dom.html

Returns the current document readiness as a string: 'loading', 'interactive', or 'complete'. The readystatechange event fires when the value changes.

```APIDOC
## document.readyState

### Description
Returns the current document readiness. The value is 'loading' while the document is loading, 'interactive' once parsing is finished but sub-resources are still loading, and 'complete' once fully loaded.

### Method
GET

### Endpoint
document.readyState

### Parameters
None

### Response
#### Success Response
- **readyState** (string) - The current document readiness: 'loading', 'interactive', or 'complete'.

#### Response Example
"complete"
```

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

### Blog post with schema.org annotations using article element

Source: https://www.w3.org/TR/2014/REC-html5-20141028/sections.html

Example of an article element with schema.org annotations for a single blog post, demonstrating itemscope, itemtype, and various itemprop attributes for headline, datePublished, url, and discusionUrl.

```html
<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h1 itemprop="headline">The Very First Rule of Life</h1>
  <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>
```

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

### Presentational markup example: font element

Source: https://www.w3.org/TR/2014/REC-html5-20141028/introduction.html

Example of presentational markup using the font element with a color attribute, which is no longer allowed in HTML5.

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

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

### blockquote with abbreviation example

Source: https://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html

Shows how to quote text with abbreviations indicated using square brackets, as in the example 'Fred ate the cracker...'.

```html
<blockquote>
 <p>[Fred] then said he liked [...] fish.</p>
</blockquote>
```

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

### Block of sample output with nested samp, kbd, and span

Source: https://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html

Shows a block of sample output using nested `samp` and `kbd` elements, with `span` elements for precise styling.

```html
<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>
```

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

### Using samp element inline for sample output

Source: https://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html

Shows the `samp` element used inline to represent sample output from a program.

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

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

### MediaController constructor

Source: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html

Creates a new MediaController object.

```APIDOC
## Constructor: MediaController()

### Description
Returns a new MediaController object.

### Syntax

controller = new MediaController()


### Returns
A new MediaController object.
```

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

### Empty attribute syntax example: disabled

Source: https://www.w3.org/TR/2014/REC-html5-20141028/syntax.html

Shows the empty attribute syntax where only the attribute name is given, implying an empty string value. The example uses the 'disabled' attribute.

```html
<input _disabled_>
```

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

### MediaController.muted

Source: https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html

Gets or sets the muted state of the controller.

```APIDOC
## Property: muted

### Description
Gets or sets the muted state of the controller.

### Type
attribute boolean
```