HTML 5.3

https://www.w3.org/TR/2021/NOTE-html53-20210128/
Admin
HTML 5.3 is the specification defining the fifth major version of HTML, providing the core markup...
Tokens:743,028
Snippets:3,850
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### GET form submission example

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

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

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

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

### HTML nav element example

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

Example of a nav element with a list of links.

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

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

### Image map example with home link

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

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

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

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

### Numeric input control example

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

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

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

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

### Example: select element with options

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

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

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

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

### selectionStart

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

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

```APIDOC
## selectionStart

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

### Property
selectionStart

### Syntax
element.selectionStart

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

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

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

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

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

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

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

```html
<!DOCTYPE html>

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

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

### media.readyState

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

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

```APIDOC
## media.readyState

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

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

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

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

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

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

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

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

### data element example with product ID

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

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

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

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

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

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

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

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

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

```

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

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

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

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

```

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

### URL input with datalist example

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

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

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

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

### HTML with required tags due to attributes

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

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

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

```

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

### Interface method syntax example

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

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

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

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

### selectionStart attribute

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

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

```APIDOC
## selectionStart attribute

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

### Attribute
selectionStart

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

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

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

### HTML example: form element inside phrasing content

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

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

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

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

### Simplified kbd menu selection

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

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

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

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

### hCalendar microformat example using time element

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

### WindowProxy example

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

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

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