HTML5

https://www.w3.org/TR/2014/REC-html5-20141028/
Admin
HTML5 defines the core markup language and associated APIs of the World Wide Web for structuring,...
Tokens:597,188
Snippets:3,298
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### 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...
```

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

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

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

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

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

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

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

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

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

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

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

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

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

### 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?';
}
```

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

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

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

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

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

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

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

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

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

### 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>
```
Tokens:
Raw