remove non ascii whitespaces
This commit is contained in:
parent
598a10bc28
commit
5a6d6c4d13
GPG key ID:
901B2ADDF27C2263
117 changed files with 1928 additions and 1928 deletions
|
|
@ -20,51 +20,51 @@ body {
|
|||
### Selector
|
||||
A CSS selector selects the [HTML](HTML.md) element(s) you want to style.
|
||||
|
||||
**Tag Selector**: Here, all `<p>` elements on the page will be center-aligned, with a red text color:
|
||||
**Tag Selector**: Here, all `<p>` elements on the page will be center-aligned, with a red text color:
|
||||
```css
|
||||
p {
|
||||
text-align: center;
|
||||
color: red;
|
||||
p {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
**ID Selector**: The CSS rule below will be applied to the [HTML](HTML.md) element with id="para1":
|
||||
**ID Selector**: The CSS rule below will be applied to the [HTML](HTML.md) element with id="para1":
|
||||
```css
|
||||
#para1 {
|
||||
text-align: center;
|
||||
color: red;
|
||||
#para1 {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
**Class Selector**: In this example all [HTML](HTML.md) elements with class="center" will be red and center-aligned:
|
||||
**Class Selector**: In this example all [HTML](HTML.md) elements with class="center" will be red and center-aligned:
|
||||
```css
|
||||
.center {
|
||||
text-align: center;
|
||||
color: red;
|
||||
.center {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
**Tag+Class Selector**: In this example only `<p>` elements with class="center" will be red and center-aligned:
|
||||
**Tag+Class Selector**: In this example only `<p>` elements with class="center" will be red and center-aligned:
|
||||
```css
|
||||
p.center {
|
||||
text-align: center;
|
||||
color: red;
|
||||
p.center {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
**All Selector**:
|
||||
```css
|
||||
* {
|
||||
text-align: center;
|
||||
color: blue;
|
||||
* {
|
||||
text-align: center;
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
**Multiple Selector**: In this example we have grouped the selectors:
|
||||
**Multiple Selector**: In this example we have grouped the selectors:
|
||||
```css
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
color: red;
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ a:valid {} /* Apply to valid elements */
|
|||
a:invalid {} /* Apply to invalid elements */
|
||||
a:required {} /* Apply to required elements */
|
||||
a:optional {} /* Apply to optional elements */
|
||||
a:hover {} /* Apply to links on hover */
|
||||
a:hover {} /* Apply to links on hover */
|
||||
a:focus {} /* Apply to focused element */
|
||||
a:enabled {} /* Apply to enabled elements */
|
||||
a:disabled {} /* Apply to disabled elements */
|
||||
|
|
@ -86,8 +86,8 @@ CSS comments are not displayed in the browser, but they can help document your s
|
|||
|
||||
```css
|
||||
/* This is a single-line comment */
|
||||
p {
|
||||
color: red; /* Set text color to red */
|
||||
p {
|
||||
color: red; /* Set text color to red */
|
||||
}
|
||||
/* This is
|
||||
a multi-line
|
||||
|
|
@ -110,12 +110,12 @@ a {
|
|||
### Backgrounds
|
||||
You can set a background color:
|
||||
```css
|
||||
div {
|
||||
background-color: rgba(0, 128, 0, 0.3)
|
||||
div {
|
||||
background-color: rgba(0, 128, 0, 0.3)
|
||||
}
|
||||
```
|
||||
|
||||
The `background-image` property specifies an image to use as the background of an element:
|
||||
The `background-image` property specifies an image to use as the background of an element:
|
||||
```css
|
||||
body {
|
||||
background-image: url("paper.gif");
|
||||
|
|
@ -124,16 +124,16 @@ body {
|
|||
|
||||
Add a graphical effect to the area behind an element:
|
||||
```css
|
||||
body {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(5px);
|
||||
body {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
```
|
||||
|
||||
### Borders
|
||||
The CSS border properties allow you to specify the style, width, and color of an element's border.
|
||||
|
||||
The `border-style` property specifies what kind of border to display:
|
||||
The `border-style` property specifies what kind of border to display:
|
||||
```css
|
||||
p.dotted {border-style: dotted;}
|
||||
p.dashed {border-style: dashed;}
|
||||
|
|
@ -162,7 +162,7 @@ p.two {
|
|||
border-style: solid;
|
||||
border-width: medium;
|
||||
}
|
||||
|
||||
|
||||
p.three {
|
||||
border-style: solid;
|
||||
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
|
||||
|
|
@ -190,9 +190,9 @@ p {
|
|||
}
|
||||
```
|
||||
|
||||
The `box-shadow` property attaches one or more shadows to an element (Syntax: `box-shadow: none|_h-offset v-offset blur spread color_ |inset|initial|inherit;`).
|
||||
The `box-shadow` property attaches one or more shadows to an element (Syntax: `box-shadow: none|_h-offset v-offset blur spread color_ |inset|initial|inherit;`).
|
||||
```css
|
||||
#example2 {box-shadow: 5px 10px #888888;}
|
||||
#example2 {box-shadow: 5px 10px #888888;}
|
||||
```
|
||||
|
||||
### Margins
|
||||
|
|
@ -209,7 +209,7 @@ p {
|
|||
margin-right: 150px;
|
||||
margin-left: 80px;
|
||||
}
|
||||
p { margin: 25px 50px 75px 100px;}
|
||||
p { margin: 25px 50px 75px 100px;}
|
||||
```
|
||||
|
||||
### Padding
|
||||
|
|
@ -360,57 +360,57 @@ The `opacity` property specifies the opacity/transparency of an element.
|
|||
img {opacity: 0.5;}
|
||||
```
|
||||
|
||||
The `cursor` property specifies the mouse cursor to be displayed when pointing over an element.
|
||||
The `cursor` property specifies the mouse cursor to be displayed when pointing over an element.
|
||||
```css
|
||||
.alias {cursor: alias;}
|
||||
.all-scroll {cursor: all-scroll;}
|
||||
.auto {cursor: auto;}
|
||||
.cell {cursor: cell;}
|
||||
.col-resize {cursor: col-resize;}
|
||||
.context-menu {cursor: context-menu;}
|
||||
.copy {cursor: copy;}
|
||||
.crosshair {cursor: crosshair;}
|
||||
.default {cursor: default;}
|
||||
.e-resize {cursor: e-resize;}
|
||||
.ew-resize {cursor: ew-resize;}
|
||||
.grab {cursor: grab;}
|
||||
.grabbing {cursor: grabbing;}
|
||||
.help {cursor: help;}
|
||||
.move {cursor: move;}
|
||||
.n-resize {cursor: n-resize;}
|
||||
.ne-resize {cursor: ne-resize;}
|
||||
.nesw-resize {cursor: nesw-resize;}
|
||||
.ns-resize {cursor: ns-resize;}
|
||||
.nw-resize {cursor: nw-resize;}
|
||||
.nwse-resize {cursor: nwse-resize;}
|
||||
.no-drop {cursor: no-drop;}
|
||||
.none {cursor: none;}
|
||||
.not-allowed {cursor: not-allowed;}
|
||||
.pointer {cursor: pointer;}
|
||||
.progress {cursor: progress;}
|
||||
.row-resize {cursor: row-resize;}
|
||||
.s-resize {cursor: s-resize;}
|
||||
.se-resize {cursor: se-resize;}
|
||||
.sw-resize {cursor: sw-resize;}
|
||||
.text {cursor: text;}
|
||||
.url {cursor: url(myBall.cur),auto;}
|
||||
.w-resize {cursor: w-resize;}
|
||||
.wait {cursor: wait;}
|
||||
.zoom-in {cursor: zoom-in;}
|
||||
.zoom-out {cursor: zoom-out;}
|
||||
.alias {cursor: alias;}
|
||||
.all-scroll {cursor: all-scroll;}
|
||||
.auto {cursor: auto;}
|
||||
.cell {cursor: cell;}
|
||||
.col-resize {cursor: col-resize;}
|
||||
.context-menu {cursor: context-menu;}
|
||||
.copy {cursor: copy;}
|
||||
.crosshair {cursor: crosshair;}
|
||||
.default {cursor: default;}
|
||||
.e-resize {cursor: e-resize;}
|
||||
.ew-resize {cursor: ew-resize;}
|
||||
.grab {cursor: grab;}
|
||||
.grabbing {cursor: grabbing;}
|
||||
.help {cursor: help;}
|
||||
.move {cursor: move;}
|
||||
.n-resize {cursor: n-resize;}
|
||||
.ne-resize {cursor: ne-resize;}
|
||||
.nesw-resize {cursor: nesw-resize;}
|
||||
.ns-resize {cursor: ns-resize;}
|
||||
.nw-resize {cursor: nw-resize;}
|
||||
.nwse-resize {cursor: nwse-resize;}
|
||||
.no-drop {cursor: no-drop;}
|
||||
.none {cursor: none;}
|
||||
.not-allowed {cursor: not-allowed;}
|
||||
.pointer {cursor: pointer;}
|
||||
.progress {cursor: progress;}
|
||||
.row-resize {cursor: row-resize;}
|
||||
.s-resize {cursor: s-resize;}
|
||||
.se-resize {cursor: se-resize;}
|
||||
.sw-resize {cursor: sw-resize;}
|
||||
.text {cursor: text;}
|
||||
.url {cursor: url(myBall.cur),auto;}
|
||||
.w-resize {cursor: w-resize;}
|
||||
.wait {cursor: wait;}
|
||||
.zoom-in {cursor: zoom-in;}
|
||||
.zoom-out {cursor: zoom-out;}
|
||||
```
|
||||
|
||||
The `rotate` property allows you to rotate elements.
|
||||
The `rotate` property allows you to rotate elements.
|
||||
```css
|
||||
div {rotate: 30deg;}
|
||||
div {rotate: 30deg;}
|
||||
```
|
||||
|
||||
The `scale` property allows you to change the size of elements.
|
||||
The `scale` property allows you to change the size of elements.
|
||||
```css
|
||||
div {scale: 2;}
|
||||
div {scale: 2;}
|
||||
```
|
||||
|
||||
The `translate` property allows you to change the position of elements.
|
||||
The `translate` property allows you to change the position of elements.
|
||||
```css
|
||||
div {translate: 100px 20px;}
|
||||
div {translate: 100px 20px;}
|
||||
```
|
||||
|
|
@ -25,38 +25,38 @@ Set-Cookie: <cookie-name>=<cookie-value>
|
|||
## Cookie lifetime
|
||||
The lifetime of a cookie can be defined in two ways:
|
||||
|
||||
- _Session_ cookies are deleted when the current session ends. The browser defines when the "current session" ends, and some browsers use _session restoring_ when restarting. This can cause session cookies to last indefinitely.
|
||||
- _Permanent_ cookies are deleted at a date specified by the `Expires` attribute, or after a period of time specified by the `Max-Age` attribute.
|
||||
- _Session_ cookies are deleted when the current session ends. The browser defines when the "current session" ends, and some browsers use _session restoring_ when restarting. This can cause session cookies to last indefinitely.
|
||||
- _Permanent_ cookies are deleted at a date specified by the `Expires` attribute, or after a period of time specified by the `Max-Age` attribute.
|
||||
|
||||
```
|
||||
Set-Cookie: id=a3fWa; Expires=Thu, 31 Oct 2021 07:28:00 GMT;
|
||||
```
|
||||
|
||||
## Restrict access to cookies
|
||||
You can ensure that cookies are sent securely and aren't accessed by unintended parties or scripts in one of two ways: with the `Secure` attribute and the `HttpOnly` attribute.
|
||||
You can ensure that cookies are sent securely and aren't accessed by unintended parties or scripts in one of two ways: with the `Secure` attribute and the `HttpOnly` attribute.
|
||||
|
||||
A cookie with the `Secure` attribute is only sent to the server with an encrypted request over the HTTPS protocol. It's never sent with unsecured [HTTP](HTTP.md) (except on localhost), which means man-in-the-middle attackers can't access it easily. Insecure sites (with `http:` in the [URL](URL.md)) can't set cookies with the `Secure` attribute. However, don't assume that `Secure` prevents all access to sensitive information in cookies. For example, someone with access to the client's hard disk (or JavaScript if the `HttpOnly` attribute isn't set) can read and modify the information.
|
||||
A cookie with the `Secure` attribute is only sent to the server with an encrypted request over the HTTPS protocol. It's never sent with unsecured [HTTP](HTTP.md) (except on localhost), which means man-in-the-middle attackers can't access it easily. Insecure sites (with `http:` in the [URL](URL.md)) can't set cookies with the `Secure` attribute. However, don't assume that `Secure` prevents all access to sensitive information in cookies. For example, someone with access to the client's hard disk (or JavaScript if the `HttpOnly` attribute isn't set) can read and modify the information.
|
||||
|
||||
A cookie with the `HttpOnly` attribute is inaccessible to the JavaScript `Document.cookie`) API; it's only sent to the server. For example, cookies that persist in server-side sessions don't need to be available to JavaScript and should have the `HttpOnly` attribute. This precaution helps mitigate cross-site scripting (XSS) attacks.
|
||||
A cookie with the `HttpOnly` attribute is inaccessible to the JavaScript `Document.cookie`) API; it's only sent to the server. For example, cookies that persist in server-side sessions don't need to be available to JavaScript and should have the `HttpOnly` attribute. This precaution helps mitigate cross-site scripting (XSS) attacks.
|
||||
|
||||
```
|
||||
Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly
|
||||
```
|
||||
|
||||
## Define where cookies are sent
|
||||
The `Domain` and `Path` attributes define the _scope_ of a cookie: what URLs the cookies should be sent to.
|
||||
The `Domain` and `Path` attributes define the _scope_ of a cookie: what URLs the cookies should be sent to.
|
||||
|
||||
### Domain attribute
|
||||
The `Domain` attribute specifies which server can receive a cookie.
|
||||
The `Domain` attribute specifies which server can receive a cookie.
|
||||
|
||||
If specified, then cookies are available on the server and its subdomains. For example, if you set `Domain=mozilla.org`, cookies are available on mozilla.org and its subdomains like `developer.mozilla.org`.
|
||||
If specified, then cookies are available on the server and its subdomains. For example, if you set `Domain=mozilla.org`, cookies are available on mozilla.org and its subdomains like `developer.mozilla.org`.
|
||||
|
||||
If the server does not specify a `Domain`, the cookies are available on the server _but not on its subdomains_. Therefore, specifying `Domain` is less restrictive than omitting it. However, it can be helpful when subdomains need to share information about a user.
|
||||
If the server does not specify a `Domain`, the cookies are available on the server _but not on its subdomains_. Therefore, specifying `Domain` is less restrictive than omitting it. However, it can be helpful when subdomains need to share information about a user.
|
||||
|
||||
### Path attribute
|
||||
The `Path` attribute indicates a [URL](URL.md) path that must exist in the requested [URL](URL.md) in order to send the `Cookie` header. The `%x2F` ("/") character is considered a directory separator, and subdirectories match as well.
|
||||
The `Path` attribute indicates a [URL](URL.md) path that must exist in the requested [URL](URL.md) in order to send the `Cookie` header. The `%x2F` ("/") character is considered a directory separator, and subdirectories match as well.
|
||||
|
||||
For example, if you set `Path=/docs`, these request paths match:
|
||||
For example, if you set `Path=/docs`, these request paths match:
|
||||
- `/docs`
|
||||
- `/docs/`
|
||||
- `/docs/Web/`
|
||||
|
|
@ -68,9 +68,9 @@ But these request paths don't:
|
|||
- `/fr/docs`
|
||||
|
||||
### SameSite attribute
|
||||
The `SameSite` attribute lets servers specify whether/when cookies are sent with cross-site requests (where Site is defined by the registrable [domain](Domain.md) and the _scheme_: http or https). This provides some protection against cross-site request forgery attacks (CSRF). It takes three possible values: `Strict`, `Lax`, and `None`.
|
||||
The `SameSite` attribute lets servers specify whether/when cookies are sent with cross-site requests (where Site is defined by the registrable [domain](Domain.md) and the _scheme_: http or https). This provides some protection against cross-site request forgery attacks (CSRF). It takes three possible values: `Strict`, `Lax`, and `None`.
|
||||
|
||||
With `Strict`, the browser only sends the cookie with requests from the cookie's origin site. `Lax` is similar, except the browser also sends the cookie when the user _navigates_ to the cookie's origin site (even if the user is coming from a different site). For example, by following a link from an external site. `None` specifies that cookies are sent on both originating and cross-site requests, but _only in secure contexts_ (i.e., if `SameSite=None` then the `Secure` attribute must also be set). If no `SameSite` attribute is set, the cookie is treated as `Lax`.
|
||||
With `Strict`, the browser only sends the cookie with requests from the cookie's origin site. `Lax` is similar, except the browser also sends the cookie when the user _navigates_ to the cookie's origin site (even if the user is coming from a different site). For example, by following a link from an external site. `None` specifies that cookies are sent on both originating and cross-site requests, but _only in secure contexts_ (i.e., if `SameSite=None` then the `Secure` attribute must also be set). If no `SameSite` attribute is set, the cookie is treated as `Lax`.
|
||||
|
||||
```
|
||||
Set-Cookie: mykey=myvalue; SameSite=Strict
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -3,46 +3,46 @@ source: https://developer.mozilla.org/en-US/docs/Web/HTML
|
|||
obj: concept
|
||||
---
|
||||
|
||||
**HTML** (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation ([CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)) or functionality/behavior ([JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)).
|
||||
**HTML** (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation ([CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)) or functionality/behavior ([JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)).
|
||||
|
||||
"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.
|
||||
|
||||
HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head), [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title), [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body), [`<header>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header), [`<footer>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer), [`<article>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article), [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section), [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p), [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span), [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside), [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio), [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas), [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist), [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details), [`<embed>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed), [`<nav>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav), [`<search>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search), [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output), [`<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video), [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul), [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol), [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and many others.
|
||||
HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head), [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title), [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body), [`<header>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header), [`<footer>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer), [`<article>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article), [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section), [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p), [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span), [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside), [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio), [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas), [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist), [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details), [`<embed>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed), [`<nav>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav), [`<search>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search), [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output), [`<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video), [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul), [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol), [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and many others.
|
||||
|
||||
An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "`<`" and "`>`". The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the `<title>` tag can be written as `<Title>`, `<TITLE>`, or in any other way. However, the convention and recommended practice is to write tags in lowercase.
|
||||
An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "`<`" and "`>`". The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the `<title>` tag can be written as `<Title>`, `<TITLE>`, or in any other way. However, the convention and recommended practice is to write tags in lowercase.
|
||||
|
||||
# Elements
|
||||
## \<a>
|
||||
The **`<a>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element (or _anchor_ element), with [its `href` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href), creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
|
||||
The **`<a>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element (or _anchor_ element), with [its `href` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href), creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
|
||||
|
||||
### Attributes
|
||||
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `download`
|
||||
Causes the browser to treat the linked URL as a download. Can be used with or without a `filename` value:
|
||||
Causes the browser to treat the linked URL as a download. Can be used with or without a `filename` value:
|
||||
|
||||
Without a value, the browser will suggest a filename/extension, generated from various sources:
|
||||
- The [`Content-Disposition`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition) HTTP header
|
||||
- The final segment in the URL [path](https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname)
|
||||
- The [media type](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type) (from the [`Content-Type`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type) header, the start of a [`data:` URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs), or [`Blob.type`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/type) for a [`blob:` URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static))
|
||||
- The [`Content-Disposition`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition) HTTP header
|
||||
- The final segment in the URL [path](https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname)
|
||||
- The [media type](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type) (from the [`Content-Type`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type) header, the start of a [`data:` URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs), or [`Blob.type`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/type) for a [`blob:` URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static))
|
||||
- `filename`:
|
||||
defining a value suggests it as the filename. `/` and `\` characters are converted to underscores (`_`). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.
|
||||
defining a value suggests it as the filename. `/` and `\` characters are converted to underscores (`_`). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.
|
||||
- `href`
|
||||
The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:
|
||||
- Sections of a page with document fragments
|
||||
- Specific text portions with [text fragments](https://developer.mozilla.org/en-US/docs/Web/Text_fragments)
|
||||
- Specific text portions with [text fragments](https://developer.mozilla.org/en-US/docs/Web/Text_fragments)
|
||||
- Pieces of media files with media fragments
|
||||
- Telephone numbers with `tel:` URLs
|
||||
- Email addresses with `mailto:` URLs
|
||||
- Telephone numbers with `tel:` URLs
|
||||
- Email addresses with `mailto:` URLs
|
||||
|
||||
## \<article>
|
||||
The **`<article>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
|
||||
The **`<article>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
|
||||
|
||||
## \<audio>
|
||||
The **`<audio>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to embed sound content in documents. It may contain one or more audio sources, represented using the `src` attribute or the [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream).
|
||||
The **`<audio>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to embed sound content in documents. It may contain one or more audio sources, represented using the `src` attribute or the [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream).
|
||||
|
||||
### Attributes
|
||||
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `autoplay`
|
||||
A Boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.
|
||||
|
|
@ -51,26 +51,26 @@ This element's attributes include the [global attributes](https://developer.moz
|
|||
-`loop`
|
||||
A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio.
|
||||
-`muted`
|
||||
A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is `false`.
|
||||
A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is `false`.
|
||||
- `preload`
|
||||
This [enumerated](https://developer.mozilla.org/en-US/docs/Glossary/Enumerated) attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
|
||||
This [enumerated](https://developer.mozilla.org/en-US/docs/Glossary/Enumerated) attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
|
||||
|
||||
- `none`: Indicates that the audio should not be preloaded.
|
||||
- `metadata`: Indicates that only audio metadata (e.g. length) is fetched.
|
||||
- `auto`: Indicates that the whole audio file can be downloaded, even if the user is not expected to use it.
|
||||
- _empty string_: A synonym of the `auto` value.
|
||||
- _empty string_: A synonym of the `auto` value.
|
||||
|
||||
## \<b>
|
||||
The **`<b>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use `<b>` for styling text or granting importance. If you wish to create boldface text, you should use the CSS [`font-weight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) property. If you wish to indicate an element is of special importance, you should use the [`<strong>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong) element.
|
||||
The **`<b>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use `<b>` for styling text or granting importance. If you wish to create boldface text, you should use the CSS [`font-weight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) property. If you wish to indicate an element is of special importance, you should use the [`<strong>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong) element.
|
||||
|
||||
## \<blockquote>
|
||||
The **`<blockquote>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see [Notes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#usage_notes) for how to change it). A URL for the source of the quotation may be given using the `cite` attribute, while a text representation of the source can be given using the [`<cite>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite) element.
|
||||
The **`<blockquote>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see [Notes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#usage_notes) for how to change it). A URL for the source of the quotation may be given using the `cite` attribute, while a text representation of the source can be given using the [`<cite>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite) element.
|
||||
|
||||
## \<body>
|
||||
The **`<body>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents the content of an HTML document. There can be only one `<body>` element in a document.
|
||||
The **`<body>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents the content of an HTML document. There can be only one `<body>` element in a document.
|
||||
|
||||
### Attributes
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `onload`
|
||||
Function to call when the document has finished loading.
|
||||
|
|
@ -80,129 +80,129 @@ This element includes the [global attributes](https://developer.mozilla.org/en-
|
|||
Function to call when network communication has been restored.
|
||||
|
||||
## \<br>
|
||||
The **`<br>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
|
||||
The **`<br>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
|
||||
|
||||
## \<button>
|
||||
The **`<button>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a [form](https://developer.mozilla.org/en-US/docs/Learn/Forms) or opening a dialog.
|
||||
The **`<button>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a [form](https://developer.mozilla.org/en-US/docs/Learn/Forms) or opening a dialog.
|
||||
|
||||
By default, HTML buttons are presented in a style resembling the platform the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) runs on, but you can change buttons' appearance with [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).
|
||||
By default, HTML buttons are presented in a style resembling the platform the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) runs on, but you can change buttons' appearance with [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).
|
||||
|
||||
### Attributes
|
||||
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `autofocus`
|
||||
This Boolean attribute specifies that the button should have input [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) when the page loads. **Only one element in a document can have this attribute.**
|
||||
This Boolean attribute specifies that the button should have input [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) when the page loads. **Only one element in a document can have this attribute.**
|
||||
- `disabled`
|
||||
This Boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused.
|
||||
- `form`
|
||||
The [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) element to associate the button with (its _form owner_). The value of this attribute must be the `id` of a `<form>` in the same document. (If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element, if any.)
|
||||
This attribute lets you associate `<button>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
|
||||
The [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) element to associate the button with (its _form owner_). The value of this attribute must be the `id` of a `<form>` in the same document. (If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element, if any.)
|
||||
This attribute lets you associate `<button>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
|
||||
- `name`
|
||||
The name of the button, submitted as a pair with the button's `value` as part of the form data, when that button is used to submit the form.
|
||||
The name of the button, submitted as a pair with the button's `value` as part of the form data, when that button is used to submit the form.
|
||||
- `type`
|
||||
The default behavior of the button. Possible values are:
|
||||
- `submit`: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a `<form>`, or if the attribute is an empty or invalid value.
|
||||
- `reset`: The button resets all the controls to their initial values, like [<input type="reset">](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset). (This behavior tends to annoy users.)
|
||||
- `submit`: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a `<form>`, or if the attribute is an empty or invalid value.
|
||||
- `reset`: The button resets all the controls to their initial values, like [<input type="reset">](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset). (This behavior tends to annoy users.)
|
||||
- `button`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.
|
||||
- `value`
|
||||
Defines the value associated with the button's `name` when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
|
||||
Defines the value associated with the button's `name` when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
|
||||
|
||||
## \<code>
|
||||
The **`<code>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the [user agent's](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) default monospace font.
|
||||
The **`<code>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the [user agent's](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) default monospace font.
|
||||
|
||||
## \<data>
|
||||
The **`<data>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element links a given piece of content with a machine-readable translation. If the content is time- or date-related, the [`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) element must be used.
|
||||
The **`<data>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element links a given piece of content with a machine-readable translation. If the content is time- or date-related, the [`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) element must be used.
|
||||
|
||||
### Attributes
|
||||
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `value`
|
||||
This attribute specifies the machine-readable translation of the content of the element.
|
||||
|
||||
## \<del>
|
||||
The **`<del>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. The [`<ins>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins) element can be used for the opposite purpose: to indicate text that has been added to the document.
|
||||
The **`<del>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. The [`<ins>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins) element can be used for the opposite purpose: to indicate text that has been added to the document.
|
||||
|
||||
## \<details>
|
||||
The **`<details>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) element.
|
||||
The **`<details>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) element.
|
||||
|
||||
A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the `<summary>` element are used as the label for the disclosure widget.
|
||||
A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the `<summary>` element are used as the label for the disclosure widget.
|
||||
|
||||
### Attributes
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `open`
|
||||
This Boolean attribute indicates whether the details — that is, the contents of the `<details>` element — are currently visible. The details are shown when this attribute exists, or hidden when this attribute is absent. By default this attribute is absent which means the details are not visible.
|
||||
This Boolean attribute indicates whether the details — that is, the contents of the `<details>` element — are currently visible. The details are shown when this attribute exists, or hidden when this attribute is absent. By default this attribute is absent which means the details are not visible.
|
||||
|
||||
> **Note:** You have to remove this attribute entirely to make the details hidden. `open="false"` makes the details visible because this attribute is Boolean.
|
||||
> **Note:** You have to remove this attribute entirely to make the details hidden. `open="false"` makes the details visible because this attribute is Boolean.
|
||||
|
||||
## \<div>
|
||||
The **`<div>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is the generic container for flow content. It has no effect on the content or layout until styled in some way using [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS).
|
||||
The **`<div>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is the generic container for flow content. It has no effect on the content or layout until styled in some way using [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS).
|
||||
|
||||
## \<em>
|
||||
The **`<em>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element marks text that has stress emphasis. The `<em>` element can be nested, with each level of nesting indicating a greater degree of emphasis.
|
||||
The **`<em>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element marks text that has stress emphasis. The `<em>` element can be nested, with each level of nesting indicating a greater degree of emphasis.
|
||||
|
||||
## \<embed>
|
||||
The **`<embed>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.
|
||||
The **`<embed>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.
|
||||
|
||||
### Attributes
|
||||
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element's attributes include the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `height`
|
||||
The displayed height of the resource, in [CSS pixels](https://drafts.csswg.org/css-values/#px). This must be an absolute value; percentages are _not_ allowed.
|
||||
The displayed height of the resource, in [CSS pixels](https://drafts.csswg.org/css-values/#px). This must be an absolute value; percentages are _not_ allowed.
|
||||
- `src`
|
||||
The URL of the resource being embedded.
|
||||
- `type`
|
||||
The [MIME type](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type) to use to select the plug-in to instantiate.
|
||||
The [MIME type](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type) to use to select the plug-in to instantiate.
|
||||
- `width`
|
||||
The displayed width of the resource, in [CSS pixels](https://drafts.csswg.org/css-values/#px). This must be an absolute value; percentages are _not_ allowed.
|
||||
The displayed width of the resource, in [CSS pixels](https://drafts.csswg.org/css-values/#px). This must be an absolute value; percentages are _not_ allowed.
|
||||
|
||||
## \<footer>
|
||||
The **`<footer>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a footer for its nearest ancestor [sectioning content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#sectioning_content) or [sectioning root](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#sectioning_root) element. A `<footer>` typically contains information about the author of the section, copyright data or links to related documents.
|
||||
The **`<footer>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a footer for its nearest ancestor [sectioning content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#sectioning_content) or [sectioning root](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#sectioning_root) element. A `<footer>` typically contains information about the author of the section, copyright data or links to related documents.
|
||||
|
||||
## \<form>
|
||||
The **`<form>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a document section containing interactive controls for submitting information.
|
||||
The **`<form>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a document section containing interactive controls for submitting information.
|
||||
|
||||
### Attributes
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `accept-charset`
|
||||
Space-separated [character encodings](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding) the server accepts. The browser uses them in the order in which they are listed. The default value means [the same encoding as the page](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding). (In previous versions of HTML, character encodings could also be delimited by commas.)
|
||||
Space-separated [character encodings](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding) the server accepts. The browser uses them in the order in which they are listed. The default value means [the same encoding as the page](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding). (In previous versions of HTML, character encodings could also be delimited by commas.)
|
||||
- `autocomplete`
|
||||
Indicates whether input elements can by default have their values automatically completed by the browser. `autocomplete` attributes on form elements override it on `<form>`. Possible values:
|
||||
- `off`: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see [The autocomplete attribute and login fields](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields).)
|
||||
Indicates whether input elements can by default have their values automatically completed by the browser. `autocomplete` attributes on form elements override it on `<form>`. Possible values:
|
||||
- `off`: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see [The autocomplete attribute and login fields](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields).)
|
||||
- `on`: The browser may automatically complete entries.
|
||||
- `name`
|
||||
The name of the form. The value must not be the empty string, and must be unique among the `form` elements in the forms collection that it is in, if any.
|
||||
The name of the form. The value must not be the empty string, and must be unique among the `form` elements in the forms collection that it is in, if any.
|
||||
|
||||
### Attributes for form submission
|
||||
The following attributes control behavior during form submission.
|
||||
|
||||
- `action`
|
||||
The URL that processes the form submission. This value can be overridden by a [`formaction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formaction) attribute on a [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), [`<input type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit), or [`<input type="image">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image) element. This attribute is ignored when `method="dialog"` is set.
|
||||
The URL that processes the form submission. This value can be overridden by a [`formaction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formaction) attribute on a [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), [`<input type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit), or [`<input type="image">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image) element. This attribute is ignored when `method="dialog"` is set.
|
||||
- `enctype`
|
||||
If the value of the `method` attribute is `post`, `enctype` is the [MIME type](https://en.wikipedia.org/wiki/Mime_type) of the form submission. Possible values:
|
||||
If the value of the `method` attribute is `post`, `enctype` is the [MIME type](https://en.wikipedia.org/wiki/Mime_type) of the form submission. Possible values:
|
||||
- `application/x-www-form-urlencoded`: The default value.
|
||||
- `multipart/form-data`: Use this if the form contains [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) elements with `type=file`.
|
||||
- `multipart/form-data`: Use this if the form contains [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) elements with `type=file`.
|
||||
- `text/plain`: Useful for debugging purposes.
|
||||
- `method`
|
||||
The [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) method to submit the form with. The only allowed methods/values are (case insensitive):
|
||||
- `post`: The [`POST`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) method; form data sent as the [request body](https://developer.mozilla.org/en-US/docs/Web/API/Request/body).
|
||||
- `get` (default): The [`GET`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET); form data appended to the `action` URL with a `?` separator. Use this method when the form [has no side effects](https://developer.mozilla.org/en-US/docs/Glossary/Idempotent).
|
||||
- `dialog`: When the form is inside a [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog), closes the dialog and causes a `submit` event to be fired on submission, without submitting data or clearing the form.
|
||||
The [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) method to submit the form with. The only allowed methods/values are (case insensitive):
|
||||
- `post`: The [`POST`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) method; form data sent as the [request body](https://developer.mozilla.org/en-US/docs/Web/API/Request/body).
|
||||
- `get` (default): The [`GET`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET); form data appended to the `action` URL with a `?` separator. Use this method when the form [has no side effects](https://developer.mozilla.org/en-US/docs/Glossary/Idempotent).
|
||||
- `dialog`: When the form is inside a [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog), closes the dialog and causes a `submit` event to be fired on submission, without submitting data or clearing the form.
|
||||
- `target`
|
||||
Indicates where to display the response after submitting the form. It is a name/keyword for a _browsing context_ (for example, tab, window, or iframe). The following keywords have special meanings:
|
||||
- `_self` (default): Load into the same browsing context as the current one.
|
||||
- `_blank`: Load into a new unnamed browsing context. This provides the same behavior as setting [`rel="noopener"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#rel) which does not set [`window.opener`](https://developer.mozilla.org/en-US/docs/Web/API/Window/opener).
|
||||
- `_parent`: Load into the parent browsing context of the current one. If no parent, behaves the same as `_self`.
|
||||
- `_top`: Load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). If no parent, behaves the same as `_self`.
|
||||
Indicates where to display the response after submitting the form. It is a name/keyword for a _browsing context_ (for example, tab, window, or iframe). The following keywords have special meanings:
|
||||
- `_self` (default): Load into the same browsing context as the current one.
|
||||
- `_blank`: Load into a new unnamed browsing context. This provides the same behavior as setting [`rel="noopener"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#rel) which does not set [`window.opener`](https://developer.mozilla.org/en-US/docs/Web/API/Window/opener).
|
||||
- `_parent`: Load into the parent browsing context of the current one. If no parent, behaves the same as `_self`.
|
||||
- `_top`: Load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). If no parent, behaves the same as `_self`.
|
||||
|
||||
## \<h1>
|
||||
The **`<h1>`** to **`<h6>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) elements represent six levels of section headings. `<h1>` is the highest section level and `<h6>` is the lowest. By default, all heading elements create a [block-level](https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content) box in the layout, starting on a new line and taking up the full width available in their containing block.
|
||||
The **`<h1>`** to **`<h6>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) elements represent six levels of section headings. `<h1>` is the highest section level and `<h6>` is the lowest. By default, all heading elements create a [block-level](https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content) box in the layout, starting on a new line and taking up the full width available in their containing block.
|
||||
|
||||
## \<head>
|
||||
The **`<head>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element contains machine-readable information ([metadata](https://developer.mozilla.org/en-US/docs/Glossary/Metadata)) about the document, like its [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title), [scripts](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script), and [style sheets](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style).
|
||||
The **`<head>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element contains machine-readable information ([metadata](https://developer.mozilla.org/en-US/docs/Glossary/Metadata)) about the document, like its [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title), [scripts](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script), and [style sheets](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style).
|
||||
|
||||
- Elements that can be used inside the `<head>`:
|
||||
- Elements that can be used inside the `<head>`:
|
||||
- [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)
|
||||
- [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)
|
||||
- [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
|
||||
|
|
@ -213,80 +213,80 @@ The **`<head>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) el
|
|||
- [`<template>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)
|
||||
|
||||
## \<header>
|
||||
The **`<header>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
|
||||
The **`<header>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
|
||||
|
||||
## \<hr>
|
||||
The **`<hr>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
|
||||
The **`<hr>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
|
||||
|
||||
## \<html>
|
||||
The **`<html>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents the root (top-level element) of an HTML document, so it is also referred to as the _root element_. All other elements must be descendants of this element.
|
||||
The **`<html>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents the root (top-level element) of an HTML document, so it is also referred to as the _root element_. All other elements must be descendants of this element.
|
||||
|
||||
## \<iframe>
|
||||
The **`<iframe>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a nested [browsing context](https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context), embedding another HTML page into the current one.
|
||||
The **`<iframe>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a nested [browsing context](https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context), embedding another HTML page into the current one.
|
||||
|
||||
### Attributes
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `height`
|
||||
The height of the frame in CSS pixels. Default is `150`.
|
||||
The height of the frame in CSS pixels. Default is `150`.
|
||||
- `loading`
|
||||
Indicates how the browser should load the iframe:
|
||||
- `eager`: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).
|
||||
- `lazy`: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.
|
||||
- `name`
|
||||
A targetable name for the embedded browsing context. This can be used in the `target` attribute of the [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form), or [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) elements; the `formtarget` attribute of the [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) elements; or the `windowName` parameter in the [`window.open()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open "window.open()") method.
|
||||
A targetable name for the embedded browsing context. This can be used in the `target` attribute of the [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form), or [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) elements; the `formtarget` attribute of the [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) elements; or the `windowName` parameter in the [`window.open()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open "window.open()") method.
|
||||
- `src`
|
||||
The URL of the page to embed. Use a value of `about:blank` to embed an empty page that conforms to the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#inherited_origins). Also note that programmatically removing an `<iframe>`'s src attribute (e.g. via [`Element.removeAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute)) causes `about:blank` to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.
|
||||
The URL of the page to embed. Use a value of `about:blank` to embed an empty page that conforms to the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#inherited_origins). Also note that programmatically removing an `<iframe>`'s src attribute (e.g. via [`Element.removeAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute)) causes `about:blank` to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.
|
||||
- `width`
|
||||
The width of the frame in CSS pixels. Default is `300`.
|
||||
The width of the frame in CSS pixels. Default is `300`.
|
||||
|
||||
## \<img>
|
||||
The **`<img>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element embeds an image into the document.
|
||||
The **`<img>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element embeds an image into the document.
|
||||
|
||||
- `alt`
|
||||
Defines an alternative text description of the image.
|
||||
- `height`
|
||||
The intrinsic height of the image, in pixels. Must be an integer without a unit.
|
||||
- `src`
|
||||
The image [URL](https://developer.mozilla.org/en-US/docs/Glossary/URL). Mandatory for the `<img>` element. On [browsers](https://developer.mozilla.org/en-US/docs/Glossary/Browser) supporting `srcset`, `src` is treated like a candidate image with a pixel density descriptor `1x`, unless an image with this pixel density descriptor is already defined in `srcset`, or unless `srcset` contains `w` descriptors.
|
||||
The image [URL](https://developer.mozilla.org/en-US/docs/Glossary/URL). Mandatory for the `<img>` element. On [browsers](https://developer.mozilla.org/en-US/docs/Glossary/Browser) supporting `srcset`, `src` is treated like a candidate image with a pixel density descriptor `1x`, unless an image with this pixel density descriptor is already defined in `srcset`, or unless `srcset` contains `w` descriptors.
|
||||
- `width`
|
||||
The intrinsic width of the image in pixels. Must be an integer without a unit.
|
||||
|
||||
## \<ins>
|
||||
The **`<ins>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a range of text that has been added to a document. You can use the [`<del>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del) element to similarly represent a range of text that has been deleted from the document.
|
||||
The **`<ins>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a range of text that has been added to a document. You can use the [`<del>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del) element to similarly represent a range of text that has been deleted from the document.
|
||||
|
||||
## \<li>
|
||||
The **`<li>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to represent an item in a list. It must be contained in a parent element: an ordered list ([`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)), an unordered list ([`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)), or a menu ([`<menu>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu)). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
|
||||
The **`<li>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to represent an item in a list. It must be contained in a parent element: an ordered list ([`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)), an unordered list ([`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)), or a menu ([`<menu>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu)). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
|
||||
|
||||
## \<mark>
|
||||
The **`<mark>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents text which is **marked** or **highlighted** for reference or notation purposes due to the marked passage's relevance in the enclosing context.
|
||||
The **`<mark>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents text which is **marked** or **highlighted** for reference or notation purposes due to the marked passage's relevance in the enclosing context.
|
||||
|
||||
## \<meta>
|
||||
The **`<meta>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents [metadata](https://developer.mozilla.org/en-US/docs/Glossary/Metadata) that cannot be represented by other HTML meta-related elements, like [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base), [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link), [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script), [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) or [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title).
|
||||
The **`<meta>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents [metadata](https://developer.mozilla.org/en-US/docs/Glossary/Metadata) that cannot be represented by other HTML meta-related elements, like [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base), [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link), [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script), [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) or [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title).
|
||||
|
||||
```html
|
||||
<meta name="name" content="value">
|
||||
```
|
||||
|
||||
## \<nav>
|
||||
The **`<nav>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
|
||||
The **`<nav>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
|
||||
|
||||
## \<ol>
|
||||
The **`<ol>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents an ordered list of items — typically rendered as a numbered list.
|
||||
The **`<ol>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents an ordered list of items — typically rendered as a numbered list.
|
||||
|
||||
### Attributes
|
||||
This element also accepts the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element also accepts the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `reversed`
|
||||
This Boolean attribute specifies that the list's items are in reverse order. Items will be numbered from high to low.
|
||||
- `start`
|
||||
An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering `type` is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use `start="4"`.
|
||||
An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering `type` is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use `start="4"`.
|
||||
|
||||
## \<optgroup>
|
||||
The **`<optgroup>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element creates a grouping of options within a [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) element.
|
||||
The **`<optgroup>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element creates a grouping of options within a [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) element.
|
||||
|
||||
### Attributes
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `disabled`
|
||||
If this Boolean attribute is set, none of the items in this option group is selectable. Often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones.
|
||||
|
|
@ -294,118 +294,118 @@ This element includes the [global attributes](https://developer.mozilla.org/en-
|
|||
The name of the group of options, which the browser can use when labeling the options in the user interface. This attribute is mandatory if this element is used.
|
||||
|
||||
## \<option>
|
||||
The **`<option>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to define an item contained in a [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), an [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), or a [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) element. As such, `<option>` can represent menu items in popups and other lists of items in an HTML document.
|
||||
The **`<option>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to define an item contained in a [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), an [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), or a [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) element. As such, `<option>` can represent menu items in popups and other lists of items in an HTML document.
|
||||
|
||||
### Attributes
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `disabled`
|
||||
If this Boolean attribute is set, this option is not checkable. Often browsers grey out such control and it won't receive any browsing event, like mouse clicks or focus-related ones. If this attribute is not set, the element can still be disabled if one of its ancestors is a disabled [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) element.
|
||||
If this Boolean attribute is set, this option is not checkable. Often browsers grey out such control and it won't receive any browsing event, like mouse clicks or focus-related ones. If this attribute is not set, the element can still be disabled if one of its ancestors is a disabled [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) element.
|
||||
- `label`
|
||||
This attribute is text for the label indicating the meaning of the option. If the `label` attribute isn't defined, its value is that of the element text content.
|
||||
This attribute is text for the label indicating the meaning of the option. If the `label` attribute isn't defined, its value is that of the element text content.
|
||||
- `selected`
|
||||
If present, this Boolean attribute indicates that the option is initially selected. If the `<option>` element is the descendant of a [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) element whose [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#multiple) attribute is not set, only one single `<option>` of this [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) element may have the `selected` attribute.
|
||||
If present, this Boolean attribute indicates that the option is initially selected. If the `<option>` element is the descendant of a [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) element whose [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#multiple) attribute is not set, only one single `<option>` of this [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) element may have the `selected` attribute.
|
||||
- `value`
|
||||
The content of this attribute represents the value to be submitted with the form, should this option be selected. If this attribute is omitted, the value is taken from the text content of the option element.
|
||||
|
||||
## \<p>
|
||||
The **`<p>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.
|
||||
The **`<p>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.
|
||||
|
||||
## \<pre>
|
||||
The **`<pre>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or [monospaced](https://en.wikipedia.org/wiki/Monospaced_font), font. Whitespace inside this element is displayed as written.
|
||||
The **`<pre>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or [monospaced](https://en.wikipedia.org/wiki/Monospaced_font), font. Whitespace inside this element is displayed as written.
|
||||
|
||||
## \<progress>
|
||||
The **`<progress>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
|
||||
The **`<progress>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
|
||||
|
||||
### Attributes
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `max`
|
||||
This attribute describes how much work the task indicated by the `progress` element requires. The `max` attribute, if present, must have a value greater than `0` and be a valid floating point number. The default value is `1`.
|
||||
This attribute describes how much work the task indicated by the `progress` element requires. The `max` attribute, if present, must have a value greater than `0` and be a valid floating point number. The default value is `1`.
|
||||
- `value`
|
||||
This attribute specifies how much of the task that has been completed. It must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. If there is no `value` attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
|
||||
This attribute specifies how much of the task that has been completed. It must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. If there is no `value` attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
|
||||
|
||||
## \<s>
|
||||
The **`<s>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element renders text with a strikethrough, or a line through it. Use the `<s>` element to represent things that are no longer relevant or no longer accurate. However, `<s>` is not appropriate when indicating document edits; for that, use the [`<del>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del) and [`<ins>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins) elements, as appropriate.
|
||||
The **`<s>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element renders text with a strikethrough, or a line through it. Use the `<s>` element to represent things that are no longer relevant or no longer accurate. However, `<s>` is not appropriate when indicating document edits; for that, use the [`<del>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del) and [`<ins>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins) elements, as appropriate.
|
||||
|
||||
## \<section>
|
||||
The **`<section>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
|
||||
The **`<section>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
|
||||
|
||||
## \<selection>
|
||||
The **`<select>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a control that provides a menu of options.
|
||||
The **`<select>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a control that provides a menu of options.
|
||||
|
||||
### Attributes
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `autocomplete`
|
||||
A string providing a hint for a [user agent's](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) autocomplete feature. See [The HTML autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for a complete list of values and details on how to use autocomplete.
|
||||
A string providing a hint for a [user agent's](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) autocomplete feature. See [The HTML autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for a complete list of values and details on how to use autocomplete.
|
||||
- `autofocus`
|
||||
This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form element in a document can have the `autofocus` attribute.
|
||||
This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form element in a document can have the `autofocus` attribute.
|
||||
- `disabled`
|
||||
This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset); if there is no containing element with the `disabled` attribute set, then the control is enabled.
|
||||
This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset); if there is no containing element with the `disabled` attribute set, then the control is enabled.
|
||||
- `form`
|
||||
The [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) element to associate the `<select>` with (its _form owner_). The value of this attribute must be the [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id) of a `<form>` in the same document. (If this attribute is not set, the `<select>` is associated with its ancestor `<form>` element, if any.)
|
||||
The [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) element to associate the `<select>` with (its _form owner_). The value of this attribute must be the [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id) of a `<form>` in the same document. (If this attribute is not set, the `<select>` is associated with its ancestor `<form>` element, if any.)
|
||||
|
||||
This attribute lets you associate `<select>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
|
||||
This attribute lets you associate `<select>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
|
||||
- `multiple`
|
||||
This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time. When `multiple` is specified, most browsers will show a scrolling list box instead of a single line dropdown.
|
||||
This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time. When `multiple` is specified, most browsers will show a scrolling list box instead of a single line dropdown.
|
||||
- `name`
|
||||
This attribute is used to specify the name of the control.
|
||||
- `required`
|
||||
A Boolean attribute indicating that an option with a non-empty string value must be selected.
|
||||
- `size`
|
||||
If the control is presented as a scrolling list box (e.g. when `multiple` is specified), this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is `0`.
|
||||
If the control is presented as a scrolling list box (e.g. when `multiple` is specified), this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is `0`.
|
||||
|
||||
## \<source>
|
||||
The **`<source>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element specifies multiple media resources for the [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture), the [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) element, or the [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) element. It is a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element), meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for [image file formats](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) and [media file formats](https://developer.mozilla.org/en-US/docs/Web/Media/Formats).
|
||||
The **`<source>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element specifies multiple media resources for the [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture), the [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) element, or the [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) element. It is a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element), meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for [image file formats](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) and [media file formats](https://developer.mozilla.org/en-US/docs/Web/Media/Formats).
|
||||
|
||||
### Attributes
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `type`
|
||||
The [MIME media type of the image](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) or [other media type](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers), optionally with a [`codecs` parameter](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter).
|
||||
The [MIME media type of the image](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) or [other media type](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers), optionally with a [`codecs` parameter](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter).
|
||||
- `src`
|
||||
Required if the `source` element's parent is an [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) and [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) element, but not allowed if the `source` element's parent is a [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element.
|
||||
Required if the `source` element's parent is an [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) and [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) element, but not allowed if the `source` element's parent is a [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element.
|
||||
Address of the media resource.
|
||||
|
||||
## \<span>
|
||||
The **`<span>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#class) or [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id) attributes), or because they share attribute values, such as [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#lang). It should be used only when no other semantic element is appropriate. `<span>` is very much like a [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) element, but [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) is a [block-level element](https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content) whereas a `<span>` is an [inline-level element](https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content).
|
||||
The **`<span>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#class) or [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id) attributes), or because they share attribute values, such as [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#lang). It should be used only when no other semantic element is appropriate. `<span>` is very much like a [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) element, but [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) is a [block-level element](https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content) whereas a `<span>` is an [inline-level element](https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content).
|
||||
|
||||
## \<strong>
|
||||
The **`<strong>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
|
||||
The **`<strong>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
|
||||
|
||||
## \<style>
|
||||
The **`<style>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the `<style>` element.
|
||||
The **`<style>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the `<style>` element.
|
||||
|
||||
## \<sub>
|
||||
The **`<sub>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.
|
||||
The **`<sub>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.
|
||||
|
||||
## \<sup>
|
||||
The **`<sup>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.
|
||||
The **`<sup>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.
|
||||
|
||||
## \<table>
|
||||
The **`<table>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
|
||||
The **`<table>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
|
||||
|
||||
## \<tbody>
|
||||
The **`<tbody>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element encapsulates a set of table rows ([`<tr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) elements), indicating that they comprise the body of the table ([`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)).
|
||||
The **`<tbody>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element encapsulates a set of table rows ([`<tr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) elements), indicating that they comprise the body of the table ([`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)).
|
||||
|
||||
## \<td>
|
||||
The **`<td>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines a cell of a table that contains data. It participates in the _table model_.
|
||||
The **`<td>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines a cell of a table that contains data. It participates in the _table model_.
|
||||
|
||||
## \<th>
|
||||
The **`<th>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines a cell as the header of a group of table cells. The exact nature of this group is defined by the [`scope`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#scope) and [`headers`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#headers) attributes.
|
||||
The **`<th>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines a cell as the header of a group of table cells. The exact nature of this group is defined by the [`scope`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#scope) and [`headers`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#headers) attributes.
|
||||
|
||||
## \<thead>
|
||||
The **`<thead>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines a set of rows defining the head of the columns of the table.
|
||||
The **`<thead>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines a set of rows defining the head of the columns of the table.
|
||||
|
||||
## \<tr>
|
||||
The **`<tr>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines a row of cells in a table. The row's cells can then be established using a mix of [`<td>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) (data cell) and [`<th>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) (header cell) elements.
|
||||
The **`<tr>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines a row of cells in a table. The row's cells can then be established using a mix of [`<td>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) (data cell) and [`<th>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) (header cell) elements.
|
||||
|
||||
## \<textarea>
|
||||
The **`<textarea>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
|
||||
The **`<textarea>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
|
||||
|
||||
### Attributes
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
This element includes the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `autocomplete`
|
||||
This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are:
|
||||
|
|
@ -414,11 +414,11 @@ This element includes the [global attributes](https://developer.mozilla.org/en-
|
|||
- `autofocus`
|
||||
This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form-associated element in a document can have this attribute specified.
|
||||
- `cols`
|
||||
The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is `20`.
|
||||
The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is `20`.
|
||||
- `disabled`
|
||||
This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset); if there is no containing element when the `disabled` attribute is set, the control is enabled.
|
||||
This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset); if there is no containing element when the `disabled` attribute is set, the control is enabled.
|
||||
- `form`
|
||||
The form element that the `<textarea>` element is associated with (its "form owner"). The value of the attribute must be the `id` of a form element in the same document. If this attribute is not specified, the `<textarea>` element must be a descendant of a form element. This attribute enables you to place `<textarea>` elements anywhere within a document, not just as descendants of form elements.
|
||||
The form element that the `<textarea>` element is associated with (its "form owner"). The value of the attribute must be the `id` of a form element in the same document. If this attribute is not specified, the `<textarea>` element must be a descendant of a form element. This attribute enables you to place `<textarea>` elements anywhere within a document, not just as descendants of form elements.
|
||||
- `maxlength`
|
||||
The maximum string length (measured in UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.
|
||||
- `minlength`
|
||||
|
|
@ -428,50 +428,50 @@ This element includes the [global attributes](https://developer.mozilla.org/en-
|
|||
- `placeholder`
|
||||
A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.
|
||||
- `readonly`
|
||||
This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the `disabled` attribute, the `readonly` attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form.
|
||||
This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the `disabled` attribute, the `readonly` attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form.
|
||||
- `required`
|
||||
This attribute specifies that the user must fill in a value before submitting a form.
|
||||
- `rows`
|
||||
The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.
|
||||
|
||||
## \<title>
|
||||
The **`<title>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines the document's title that is shown in a [browser](https://developer.mozilla.org/en-US/docs/Glossary/Browser)'s title bar or a page's tab. It only contains text; tags within the element are ignored.
|
||||
The **`<title>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element defines the document's title that is shown in a [browser](https://developer.mozilla.org/en-US/docs/Glossary/Browser)'s title bar or a page's tab. It only contains text; tags within the element are ignored.
|
||||
|
||||
## \<ul>
|
||||
The **`<ul>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents an unordered list of items, typically rendered as a bulleted list.
|
||||
The **`<ul>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element represents an unordered list of items, typically rendered as a bulleted list.
|
||||
|
||||
## \<video>
|
||||
The **`<video>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element embeds a media player which supports video playback into the document. You can use `<video>` for audio content as well, but the [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) element may provide a more appropriate user experience.
|
||||
The **`<video>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element embeds a media player which supports video playback into the document. You can use `<video>` for audio content as well, but the [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) element may provide a more appropriate user experience.
|
||||
|
||||
### Attributes
|
||||
Like all other HTML elements, this element supports the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
Like all other HTML elements, this element supports the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes).
|
||||
|
||||
- `autoplay`
|
||||
A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.
|
||||
- `controls`
|
||||
If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
|
||||
- `height`
|
||||
The height of the video's display area, in [CSS pixels](https://drafts.csswg.org/css-values/#px) (absolute values only; [no percentages](https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes)).
|
||||
The height of the video's display area, in [CSS pixels](https://drafts.csswg.org/css-values/#px) (absolute values only; [no percentages](https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes)).
|
||||
- `loop`
|
||||
A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.
|
||||
- `muted`
|
||||
A Boolean attribute that indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is `false`, meaning that the audio will be played when the video is played.
|
||||
A Boolean attribute that indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is `false`, meaning that the audio will be played when the video is played.
|
||||
- `poster`
|
||||
A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.
|
||||
- `src`
|
||||
The URL of the video to embed. This is optional; you may instead use the [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) element within the video block to specify the video to embed.
|
||||
The URL of the video to embed. This is optional; you may instead use the [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) element within the video block to specify the video to embed.
|
||||
- `width`
|
||||
The width of the video's display area, in [CSS pixels](https://drafts.csswg.org/css-values/#px) (absolute values only; [no percentages](https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes)).
|
||||
The width of the video's display area, in [CSS pixels](https://drafts.csswg.org/css-values/#px) (absolute values only; [no percentages](https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes)).
|
||||
|
||||
### Events
|
||||
|Event Name|Fired When|
|
||||
|---|---|
|
||||
|[`audioprocess`](https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode/audioprocess_event "audioprocess") Deprecated|The input buffer of a [`ScriptProcessorNode`](https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode) is ready to be processed.|
|
||||
|[`audioprocess`](https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode/audioprocess_event "audioprocess") Deprecated|The input buffer of a [`ScriptProcessorNode`](https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode) is ready to be processed.|
|
||||
|[`canplay`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event "canplay")|The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.|
|
||||
|[`canplaythrough`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event "canplaythrough")|The browser estimates it can play the media up to its end without stopping for content buffering.|
|
||||
|[`complete`](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext/complete_event "complete")|The rendering of an [`OfflineAudioContext`](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext) is terminated.|
|
||||
|[`durationchange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event "durationchange")|The `duration` attribute has been updated.|
|
||||
|[`emptied`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event "emptied")|The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the [`load()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load) method is called to reload it.|
|
||||
|[`complete`](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext/complete_event "complete")|The rendering of an [`OfflineAudioContext`](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext) is terminated.|
|
||||
|[`durationchange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event "durationchange")|The `duration` attribute has been updated.|
|
||||
|[`emptied`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event "emptied")|The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the [`load()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load) method is called to reload it.|
|
||||
|[`ended`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event "ended")back has stopped because the end of the media was reached.|
|
||||
|[`error`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event "error")|An error occurred while fetching the media data, or the type of the resource is not a supported media format.|
|
||||
|[`loadeddata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event "loadeddata")|The first frame of the media has finished loading.|
|
||||
|
|
@ -482,71 +482,71 @@ Like all other HTML elements, this element supports the [global attributes](htt
|
|||
|[`playing`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event "playing")back is ready to start after having been paused or delayed due to lack of data.|
|
||||
|[`progress`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event "progress")|Fired periodically as the browser loads a resource.|
|
||||
|[`ratechange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event "ratechange")|The playback rate has changed.|
|
||||
|[`seeked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event "seeked")|A _seek_ operation completed.|
|
||||
|[`seeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event "seeking")|A _seek_ operation began.|
|
||||
|[`seeked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event "seeked")|A _seek_ operation completed.|
|
||||
|[`seeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event "seeking")|A _seek_ operation began.|
|
||||
|[`stalled`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event "stalled")|The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.|
|
||||
|[`suspend`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event "suspend")|Media data loading has been suspended.|
|
||||
|[`timeupdate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event "timeupdate")|The time indicated by the `currentTime` attribute has been updated.|
|
||||
|[`timeupdate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event "timeupdate")|The time indicated by the `currentTime` attribute has been updated.|
|
||||
|[`volumechange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event "volumechange")|The volume has changed.|
|
||||
|[`waiting`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event "waiting")back has stopped because of a temporary lack of data.|
|
||||
|
||||
## \<script>
|
||||
The **`<script>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The `<script>` element can also be used with other languages, such as [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)'s GLSL shader programming language and [JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON).
|
||||
The **`<script>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The `<script>` element can also be used with other languages, such as [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)'s GLSL shader programming language and [JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON).
|
||||
|
||||
```html
|
||||
<script src="javascript.js"></script>
|
||||
```
|
||||
|
||||
## \<input>
|
||||
The **`<input>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent). The `<input>` element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
|
||||
The **`<input>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent). The `<input>` element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
|
||||
|
||||
The available types are as follows:
|
||||
|
||||
| Type | Description |
|
||||
| ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) | A push button with no default behavior displaying the value of the [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) attribute, empty by default. |
|
||||
| [button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) | A push button with no default behavior displaying the value of the [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) attribute, empty by default. |
|
||||
| [checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) | A check box allowing single values to be selected/deselected. |
|
||||
| [color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color) | A control for specifying a color; opening a color picker when active in supporting browsers. |
|
||||
| [date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) | A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers. |
|
||||
| [datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) | A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. |
|
||||
| [email](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email) | A field for editing an email address. Looks like a `text` input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. |
|
||||
| [file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) | A control that lets the user select a file. Use the [`accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#accept) attribute to define the types of files that the control can select. |
|
||||
| [email](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email) | A field for editing an email address. Looks like a `text` input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. |
|
||||
| [file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) | A control that lets the user select a file. Use the [`accept`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#accept) attribute to define the types of files that the control can select. |
|
||||
| [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden) | A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it's hidden! |
|
||||
| [image](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image) | A graphical `submit` button. Displays an image defined by the `src` attribute. The [`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#alt) attribute displays if the image [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#src) is missing. |
|
||||
| [image](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image) | A graphical `submit` button. Displays an image defined by the `src` attribute. The [`alt`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#alt) attribute displays if the image [`src`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#src) is missing. |
|
||||
| [month](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month) | A control for entering a month and year, with no time zone. |
|
||||
| [number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number) | A control for entering a number. Displays a spinner and adds default validation. Displays a numeric keypad in some devices with dynamic keypads. |
|
||||
| [password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password) | A single-line text field whose value is obscured. Will alert user if site is not secure. |
|
||||
| [radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) | A radio button, allowing a single value to be selected out of multiple choices with the same [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) value. |
|
||||
| [range](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) | A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) and [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) to define the range of acceptable values. |
|
||||
| [radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) | A radio button, allowing a single value to be selected out of multiple choices with the same [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) value. |
|
||||
| [range](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) | A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) and [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) to define the range of acceptable values. |
|
||||
| [reset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset) | A button that resets the contents of the form to default values. Not recommended. |
|
||||
| [search](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search) | A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads. |
|
||||
| [submit](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit) | A button that submits the form. |
|
||||
| [tel](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel) | A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads. |
|
||||
| [text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text) | The default value. A single-line text field. Line-breaks are automatically removed from the input value. |
|
||||
| [time](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time) | A control for entering a time value with no time zone. |
|
||||
| [url](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url) | A field for entering a URL. Looks like a `text` input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. |
|
||||
| [url](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url) | A field for entering a URL. Looks like a `text` input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. |
|
||||
| [week](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week) | A control for entering a date consisting of a week-year number and a week number with no time zone. |
|
||||
|
||||
# Attributes
|
||||
## Global Attributes
|
||||
| Name | Description |
|
||||
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| autofocus | The **`autofocus`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) is a Boolean attribute indicating that an element should be focused on page load, or when the [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) that it is part of is displayed. |
|
||||
| class | The **`class`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) is a space-separated list of the case-sensitive classes of the element. Classes allow CSS and JavaScript to select and access specific elements via the [class selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) or functions like the DOM method [`document.getElementsByClassName`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName). |
|
||||
| data-* | The **`data-*`** [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) form a class of attributes called **custom data attributes**, that allow proprietary information to be exchanged between the [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and its [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) representation by scripts. |
|
||||
| hidden | The **`hidden`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) is an [enumerated](https://developer.mozilla.org/en-US/docs/Glossary/Enumerated) attribute indicating that the browser should not render the contents of the element. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. |
|
||||
| id | The **`id`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a [fragment identifier](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#fragment)), scripting, or styling (with [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS)). |
|
||||
| lang | The **`lang`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user. The attribute contains a single "language tag" in the format defined in [RFC 5646: Tags for Identifying Languages (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). |
|
||||
| style | The **`style`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) contains [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element have mainly the purpose of allowing for quick styling, for example for testing purposes. |
|
||||
| autofocus | The **`autofocus`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) is a Boolean attribute indicating that an element should be focused on page load, or when the [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) that it is part of is displayed. |
|
||||
| class | The **`class`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) is a space-separated list of the case-sensitive classes of the element. Classes allow CSS and JavaScript to select and access specific elements via the [class selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) or functions like the DOM method [`document.getElementsByClassName`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName). |
|
||||
| data-* | The **`data-*`** [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) form a class of attributes called **custom data attributes**, that allow proprietary information to be exchanged between the [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and its [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) representation by scripts. |
|
||||
| hidden | The **`hidden`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) is an [enumerated](https://developer.mozilla.org/en-US/docs/Glossary/Enumerated) attribute indicating that the browser should not render the contents of the element. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. |
|
||||
| id | The **`id`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a [fragment identifier](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#fragment)), scripting, or styling (with [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS)). |
|
||||
| lang | The **`lang`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user. The attribute contains a single "language tag" in the format defined in [RFC 5646: Tags for Identifying Languages (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). |
|
||||
| style | The **`style`** [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) contains [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element have mainly the purpose of allowing for quick styling, for example for testing purposes. |
|
||||
|
||||
## Normal Attributes
|
||||
| Name | Description |
|
||||
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| disabled | The Boolean **`disabled`** attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants. |
|
||||
| max | The **`max`** attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) of the element is greater than this, the element fails [validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation). This value must be greater than or equal to the value of the [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) attribute. If the `max` attribute is present but is not specified or is invalid, no `max` value is applied. If the `max` attribute is valid and a non-empty value is greater than the maximum allowed by the `max` attribute, constraint validation will prevent form submission. |
|
||||
| maxlength | The **`maxlength`** attribute defines the maximum [string length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length) that the user can enter into an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea). The attribute must have an integer value of 0 or higher. |
|
||||
| min | The **`min`** attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) of the element is less than this, the element fails [validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation). This value must be less than or equal to the value of the `max` attribute. |
|
||||
| minlength | The **`minlength`** attribute defines the minimum [string length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length) that the user can enter into an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea). The attribute must have an integer value of 0 or higher. |
|
||||
| placeholder | The **`placeholder`** attribute defines the text displayed in a form control when the control has no value. The placeholder text should provide a brief hint to the user as to the expected type of data that should be entered into the control. |
|
||||
| readonly | The Boolean **`readonly`** attribute, when present, makes the element not mutable, meaning the user can not edit the control. |
|
||||
| required | The [Boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML) **`required`** attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted. |
|
||||
| disabled | The Boolean **`disabled`** attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants. |
|
||||
| max | The **`max`** attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) of the element is greater than this, the element fails [validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation). This value must be greater than or equal to the value of the [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) attribute. If the `max` attribute is present but is not specified or is invalid, no `max` value is applied. If the `max` attribute is valid and a non-empty value is greater than the maximum allowed by the `max` attribute, constraint validation will prevent form submission. |
|
||||
| maxlength | The **`maxlength`** attribute defines the maximum [string length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length) that the user can enter into an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea). The attribute must have an integer value of 0 or higher. |
|
||||
| min | The **`min`** attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) of the element is less than this, the element fails [validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation). This value must be less than or equal to the value of the `max` attribute. |
|
||||
| minlength | The **`minlength`** attribute defines the minimum [string length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length) that the user can enter into an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea). The attribute must have an integer value of 0 or higher. |
|
||||
| placeholder | The **`placeholder`** attribute defines the text displayed in a form control when the control has no value. The placeholder text should provide a brief hint to the user as to the expected type of data that should be entered into the control. |
|
||||
| readonly | The Boolean **`readonly`** attribute, when present, makes the element not mutable, meaning the user can not edit the control. |
|
||||
| required | The [Boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML) **`required`** attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted. |
|
||||
|
|
@ -9,14 +9,14 @@ htmx extends and generalizes the core idea of [HTML](HTML.md) as a hypertext, op
|
|||
|
||||
- Now any element, not just anchors and forms, can issue an [HTTP](HTTP.md) request
|
||||
- Now any event, not just clicks or form submissions, can trigger requests
|
||||
- Now any [HTTP](HTTP.md) verb, not just `GET` and `POST`, can be used
|
||||
- Now any [HTTP](HTTP.md) verb, not just `GET` and `POST`, can be used
|
||||
- Now any element, not just the entire window, can be the target for update by the request
|
||||
|
||||
> **Note:** that when you are using htmx, on the server side you typically respond with _[HTML](HTML.md)_, not _[JSON](../files/JSON.md)_. This keeps you firmly within the [original web programming model](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm), using [Hypertext As The Engine Of Application State](https://en.wikipedia.org/wiki/HATEOAS) without even needing to really understand that concept.
|
||||
> **Note:** that when you are using htmx, on the server side you typically respond with _[HTML](HTML.md)_, not _[JSON](../files/JSON.md)_. This keeps you firmly within the [original web programming model](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm), using [Hypertext As The Engine Of Application State](https://en.wikipedia.org/wiki/HATEOAS) without even needing to really understand that concept.
|
||||
|
||||
# Installing
|
||||
|
||||
Htmx is a dependency-free, browser-oriented javascript library. This means that using it is as simple as adding a `<script>` tag to your document head. No need for complicated build steps or systems.
|
||||
Htmx is a dependency-free, browser-oriented javascript library. This means that using it is as simple as adding a `<script>` tag to your document head. No need for complicated build steps or systems.
|
||||
|
||||
Via CDN:
|
||||
```html
|
||||
|
|
@ -27,25 +27,25 @@ Via CDN:
|
|||
|
||||
The next easiest way to install htmx is to simply copy it into your project.
|
||||
|
||||
Download `htmx.min.js` [from unpkg.com](https://unpkg.com/htmx.org/dist/htmx.min.js) and add it to the appropriate directory in your project and include it where necessary with a `<script>` tag:
|
||||
Download `htmx.min.js` [from unpkg.com](https://unpkg.com/htmx.org/dist/htmx.min.js) and add it to the appropriate directory in your project and include it where necessary with a `<script>` tag:
|
||||
```html
|
||||
<script src="/path/to/htmx.min.js"></script>
|
||||
```
|
||||
|
||||
You can also add extensions this way, by downloading them from the `ext/` directory.
|
||||
You can also add extensions this way, by downloading them from the `ext/` directory.
|
||||
|
||||
# AJAX
|
||||
The core of htmx is a set of attributes that allow you to issue AJAX requests directly from [HTML](HTML.md):
|
||||
|
||||
|Attribute|Description|
|
||||
|---|---|
|
||||
|[hx-get](https://htmx.org/attributes/hx-get/)|Issues a `GET` request to the given URL|
|
||||
|[hx-post](https://htmx.org/attributes/hx-post/)|Issues a `POST` request to the given URL|
|
||||
|[hx-put](https://htmx.org/attributes/hx-put/)|Issues a `PUT` request to the given URL|
|
||||
|[hx-patch](https://htmx.org/attributes/hx-patch/)|Issues a `PATCH` request to the given URL|
|
||||
|[hx-delete](https://htmx.org/attributes/hx-delete/)|Issues a `DELETE` request to the given URL|
|
||||
|[hx-get](https://htmx.org/attributes/hx-get/)|Issues a `GET` request to the given URL|
|
||||
|[hx-post](https://htmx.org/attributes/hx-post/)|Issues a `POST` request to the given URL|
|
||||
|[hx-put](https://htmx.org/attributes/hx-put/)|Issues a `PUT` request to the given URL|
|
||||
|[hx-patch](https://htmx.org/attributes/hx-patch/)|Issues a `PATCH` request to the given URL|
|
||||
|[hx-delete](https://htmx.org/attributes/hx-delete/)|Issues a `DELETE` request to the given URL|
|
||||
|
||||
Each of these attributes takes a URL to issue an AJAX request to. The element will issue a request of the specified type to the given URL when the element is [triggered](https://htmx.org/docs/#triggers):
|
||||
Each of these attributes takes a URL to issue an AJAX request to. The element will issue a request of the specified type to the given URL when the element is [triggered](https://htmx.org/docs/#triggers):
|
||||
```html
|
||||
<div hx-put="/messages">
|
||||
Put To Messages
|
||||
|
|
@ -57,14 +57,14 @@ This tells the browser:
|
|||
|
||||
### Triggering Requests
|
||||
By default, AJAX requests are triggered by the “natural” event of an element:
|
||||
- `input`, `textarea` & `select` are triggered on the `change` event
|
||||
- `form` is triggered on the `submit` event
|
||||
- everything else is triggered by the `click` event
|
||||
- `input`, `textarea` & `select` are triggered on the `change` event
|
||||
- `form` is triggered on the `submit` event
|
||||
- everything else is triggered by the `click` event
|
||||
|
||||
If you want different behavior you can use the [hx-trigger](https://htmx.org/attributes/hx-trigger/) attribute to specify which event will cause the request.
|
||||
If you want different behavior you can use the [hx-trigger](https://htmx.org/attributes/hx-trigger/) attribute to specify which event will cause the request.
|
||||
|
||||
#### Trigger Modifiers
|
||||
A trigger can also have a few additional modifiers that change its behavior. For example, if you want a request to only happen once, you can use the `once` modifier for the trigger:
|
||||
A trigger can also have a few additional modifiers that change its behavior. For example, if you want a request to only happen once, you can use the `once` modifier for the trigger:
|
||||
```html
|
||||
<div hx-post="/mouse_entered" hx-trigger="mouseenter once">
|
||||
[Here Mouse, Mouse!]
|
||||
|
|
@ -72,12 +72,12 @@ A trigger can also have a few additional modifiers that change its behavior. For
|
|||
```
|
||||
|
||||
Other modifiers you can use for triggers are:
|
||||
- `changed` - only issue a request if the value of the element has changed
|
||||
- `delay:<time interval>` - wait the given amount of time (e.g. `1s`) before issuing the request. If the event triggers again, the countdown is reset.
|
||||
- `throttle:<time interval>` - wait the given amount of time (e.g. `1s`) before issuing the request. Unlike `delay` if a new event occurs before the time limit is hit the event will be discarded, so the request will trigger at the end of the time period.
|
||||
- `from:<CSS Selector>` - listen for the event on a different element. This can be used for things like keyboard shortcuts.
|
||||
- `changed` - only issue a request if the value of the element has changed
|
||||
- `delay:<time interval>` - wait the given amount of time (e.g. `1s`) before issuing the request. If the event triggers again, the countdown is reset.
|
||||
- `throttle:<time interval>` - wait the given amount of time (e.g. `1s`) before issuing the request. Unlike `delay` if a new event occurs before the time limit is hit the event will be discarded, so the request will trigger at the end of the time period.
|
||||
- `from:<CSS Selector>` - listen for the event on a different element. This can be used for things like keyboard shortcuts.
|
||||
|
||||
You can use these attributes to implement many common UX patterns, such as [Active Search](https://htmx.org/examples/active-search/):
|
||||
You can use these attributes to implement many common UX patterns, such as [Active Search](https://htmx.org/examples/active-search/):
|
||||
```html
|
||||
<input type="text" name="q"
|
||||
hx-get="/trigger_delay"
|
||||
|
|
@ -87,23 +87,23 @@ You can use these attributes to implement many common UX patterns, such as [Act
|
|||
>
|
||||
<div id="search-results"></div>
|
||||
```
|
||||
This input will issue a request 500 milliseconds after a key up event if the input has been changed and inserts the results into the `div` with the id `search-results`.
|
||||
This input will issue a request 500 milliseconds after a key up event if the input has been changed and inserts the results into the `div` with the id `search-results`.
|
||||
|
||||
Multiple triggers can be specified in the [hx-trigger](https://htmx.org/attributes/hx-trigger/) attribute, separated by commas.
|
||||
Multiple triggers can be specified in the [hx-trigger](https://htmx.org/attributes/hx-trigger/) attribute, separated by commas.
|
||||
|
||||
#### Special Events
|
||||
htmx provides a few special events for use in [hx-trigger](https://htmx.org/attributes/hx-trigger/):
|
||||
htmx provides a few special events for use in [hx-trigger](https://htmx.org/attributes/hx-trigger/):
|
||||
|
||||
- `load` - fires once when the element is first loaded
|
||||
- `revealed` - fires once when an element first scrolls into the viewport
|
||||
- `intersect` - fires once when an element first intersects the viewport. This supports two additional options:
|
||||
- `root:<selector>` - a CSS selector of the root element for intersection
|
||||
- `threshold:<float>` - a floating point number between 0.0 and 1.0, indicating what amount of intersection to fire the event on
|
||||
- `load` - fires once when the element is first loaded
|
||||
- `revealed` - fires once when an element first scrolls into the viewport
|
||||
- `intersect` - fires once when an element first intersects the viewport. This supports two additional options:
|
||||
- `root:<selector>` - a CSS selector of the root element for intersection
|
||||
- `threshold:<float>` - a floating point number between 0.0 and 1.0, indicating what amount of intersection to fire the event on
|
||||
|
||||
You can also use custom events to trigger requests if you have an advanced use case.
|
||||
|
||||
#### Polling
|
||||
If you want an element to poll the given URL rather than wait for an event, you can use the `every` syntax with the [`hx-trigger`](https://htmx.org/attributes/hx-trigger/) attribute:
|
||||
If you want an element to poll the given URL rather than wait for an event, you can use the `every` syntax with the [`hx-trigger`](https://htmx.org/attributes/hx-trigger/) attribute:
|
||||
```html
|
||||
<div hx-get="/news" hx-trigger="every 2s"></div>
|
||||
```
|
||||
|
|
@ -111,10 +111,10 @@ If you want an element to poll the given URL rather than wait for an event, you
|
|||
This tells htmx
|
||||
> Every 2 seconds, issue a GET to /news and load the response into the div
|
||||
|
||||
If you want to stop polling from a server response you can respond with the [HTTP](HTTP.md) response code [`286`](https://en.wikipedia.org/wiki/86_(term)) and the element will cancel the polling.
|
||||
If you want to stop polling from a server response you can respond with the [HTTP](HTTP.md) response code [`286`](https://en.wikipedia.org/wiki/86_(term)) and the element will cancel the polling.
|
||||
|
||||
#### Load Polling
|
||||
Another technique that can be used to achieve polling in htmx is “load polling”, where an element specifies a `load` trigger along with a delay, and replaces itself with the response:
|
||||
Another technique that can be used to achieve polling in htmx is “load polling”, where an element specifies a `load` trigger along with a delay, and replaces itself with the response:
|
||||
```html
|
||||
<div hx-get="/messages"
|
||||
hx-trigger="load delay:1s"
|
||||
|
|
@ -122,12 +122,12 @@ Another technique that can be used to achieve polling in htmx is “load polling
|
|||
>
|
||||
</div>
|
||||
```
|
||||
If the `/messages` end point keeps returning a div set up this way, it will keep “polling” back to the URL every second.
|
||||
If the `/messages` end point keeps returning a div set up this way, it will keep “polling” back to the URL every second.
|
||||
|
||||
Load polling can be useful in situations where a poll has an end point at which point the polling terminates, such as when you are showing the user a [progress bar](https://htmx.org/examples/progress-bar/).
|
||||
Load polling can be useful in situations where a poll has an end point at which point the polling terminates, such as when you are showing the user a [progress bar](https://htmx.org/examples/progress-bar/).
|
||||
|
||||
### Targets
|
||||
If you want the response to be loaded into a different element other than the one that made the request, you can use the [hx-target](https://htmx.org/attributes/hx-target/) attribute, which takes a CSS selector. Looking back at our Live Search example:
|
||||
If you want the response to be loaded into a different element other than the one that made the request, you can use the [hx-target](https://htmx.org/attributes/hx-target/) attribute, which takes a CSS selector. Looking back at our Live Search example:
|
||||
```html
|
||||
<input type="text" name="q"
|
||||
hx-get="/trigger_delay"
|
||||
|
|
@ -137,18 +137,18 @@ If you want the response to be loaded into a different element other than the on
|
|||
>
|
||||
<div id="search-results"></div>
|
||||
```
|
||||
You can see that the results from the search are going to be loaded into `div#search-results`, rather than into the input tag.
|
||||
You can see that the results from the search are going to be loaded into `div#search-results`, rather than into the input tag.
|
||||
|
||||
#### Extended CSS Selectors
|
||||
`hx-target`, and most attributes that take a CSS selector, support an “extended” CSS syntax:
|
||||
- You can use the `this` keyword, which indicates that the element that the `hx-target` attribute is on is the target
|
||||
- The `closest <CSS selector>` syntax will find the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest) ancestor element or itself, that matches the given CSS selector. (e.g. `closest tr` will target the closest table row to the element)
|
||||
- The `next <CSS selector>` syntax will find the next element in the DOM matching the given CSS selector.
|
||||
- The `previous <CSS selector>` syntax will find the previous element in the DOM the given CSS selector.
|
||||
- `find <CSS selector>` which will find the first child descendant element that matches the given CSS selector. (e.g `find tr` would target the first child descendant row to the element)
|
||||
- You can use the `this` keyword, which indicates that the element that the `hx-target` attribute is on is the target
|
||||
- The `closest <CSS selector>` syntax will find the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest) ancestor element or itself, that matches the given CSS selector. (e.g. `closest tr` will target the closest table row to the element)
|
||||
- The `next <CSS selector>` syntax will find the next element in the DOM matching the given CSS selector.
|
||||
- The `previous <CSS selector>` syntax will find the previous element in the DOM the given CSS selector.
|
||||
- `find <CSS selector>` which will find the first child descendant element that matches the given CSS selector. (e.g `find tr` would target the first child descendant row to the element)
|
||||
|
||||
### Swapping
|
||||
htmx offers a few different ways to swap the [HTML](HTML.md) returned into the DOM. By default, the content replaces the `innerHTML` of the target element. You can modify this by using the [hx-swap](https://htmx.org/attributes/hx-swap/) attribute with any of the following values:
|
||||
htmx offers a few different ways to swap the [HTML](HTML.md) returned into the DOM. By default, the content replaces the `innerHTML` of the target element. You can modify this by using the [hx-swap](https://htmx.org/attributes/hx-swap/) attribute with any of the following values:
|
||||
|
||||
|Name|Description|
|
||||
|---|---|
|
||||
|
|
@ -159,23 +159,23 @@ htmx offers a few different ways to swap the [HTML](HTML.md) returned into the D
|
|||
|`beforeend`|appends the content after the last child inside the target|
|
||||
|`afterend`|appends the content after the target in the targets parent element|
|
||||
|`delete`|deletes the target element regardless of the response|
|
||||
|`none`|does not append content from response ([Out of Band Swaps](https://htmx.org/docs/#oob_swaps) and [Response Headers](https://htmx.org/docs/#response-headers) will still be processed)|
|
||||
|`none`|does not append content from response ([Out of Band Swaps](https://htmx.org/docs/#oob_swaps) and [Response Headers](https://htmx.org/docs/#response-headers) will still be processed)|
|
||||
|
||||
### Parameters
|
||||
By default, an element that causes a request will include its value if it has one. If the element is a form it will include the values of all inputs within it.
|
||||
|
||||
As with [HTML](HTML.md) forms, the `name` attribute of the input is used as the parameter name in the request that htmx sends.
|
||||
As with [HTML](HTML.md) forms, the `name` attribute of the input is used as the parameter name in the request that htmx sends.
|
||||
|
||||
Additionally, if the element causes a non-`GET` request, the values of all the inputs of the nearest enclosing form will be included.
|
||||
Additionally, if the element causes a non-`GET` request, the values of all the inputs of the nearest enclosing form will be included.
|
||||
|
||||
If you wish to include the values of other elements, you can use the [hx-include](https://htmx.org/attributes/hx-include/) attribute with a CSS selector of all the elements whose values you want to include in the request.
|
||||
If you wish to include the values of other elements, you can use the [hx-include](https://htmx.org/attributes/hx-include/) attribute with a CSS selector of all the elements whose values you want to include in the request.
|
||||
|
||||
If you wish to filter out some parameters you can use the [hx-params](https://htmx.org/attributes/hx-params/) attribute.
|
||||
If you wish to filter out some parameters you can use the [hx-params](https://htmx.org/attributes/hx-params/) attribute.
|
||||
|
||||
Finally, if you want to programmatically modify the parameters, you can use the [htmx:configRequest](https://htmx.org/events/#htmx:configRequest) event.
|
||||
Finally, if you want to programmatically modify the parameters, you can use the [htmx:configRequest](https://htmx.org/events/#htmx:configRequest) event.
|
||||
|
||||
#### Extra Values
|
||||
You can include extra values in a request using the [hx-vals](https://htmx.org/attributes/hx-vals/) (name-expression pairs in [JSON](../files/JSON.md) format) and [hx-vars](https://htmx.org/attributes/hx-vars/) attributes (comma-separated name-expression pairs that are dynamically computed).
|
||||
You can include extra values in a request using the [hx-vals](https://htmx.org/attributes/hx-vals/) (name-expression pairs in [JSON](../files/JSON.md) format) and [hx-vars](https://htmx.org/attributes/hx-vars/) attributes (comma-separated name-expression pairs that are dynamically computed).
|
||||
|
||||
## Attribute Inheritance
|
||||
Most attributes in htmx are inherited: they apply to the element they are on as well as any children elements. This allows you to “hoist” attributes up the DOM to avoid code duplication. Consider the following htmx:
|
||||
|
|
@ -188,7 +188,7 @@ Most attributes in htmx are inherited: they apply to the element they are on as
|
|||
</button>
|
||||
```
|
||||
|
||||
Here we have a duplicate `hx-confirm` attribute. We can hoist this attribute to a parent element:
|
||||
Here we have a duplicate `hx-confirm` attribute. We can hoist this attribute to a parent element:
|
||||
```html
|
||||
<div hx-confirm="Are you sure?">
|
||||
<button hx-delete="/account">
|
||||
|
|
@ -200,9 +200,9 @@ Here we have a duplicate `hx-confirm` attribute. We can hoist this attribute t
|
|||
</div>
|
||||
```
|
||||
|
||||
This `hx-confirm` attribute will now apply to all htmx-powered elements within it.
|
||||
This `hx-confirm` attribute will now apply to all htmx-powered elements within it.
|
||||
|
||||
Sometimes you wish to undo this inheritance. Consider if we had a cancel button to this group, but didn’t want it to be confirmed. We could add an `unset` directive on it like so:
|
||||
Sometimes you wish to undo this inheritance. Consider if we had a cancel button to this group, but didn’t want it to be confirmed. We could add an `unset` directive on it like so:
|
||||
```html
|
||||
<div hx-confirm="Are you sure?">
|
||||
<button hx-delete="/account">
|
||||
|
|
@ -218,10 +218,10 @@ Sometimes you wish to undo this inheritance. Consider if we had a cancel button
|
|||
```
|
||||
The top two buttons would then show a confirm dialog, but the bottom cancel button would not.
|
||||
|
||||
Automatic inheritance can be disabled using the [`hx-disinherit`](https://htmx.org/attributes/hx-disinherit/) attribute.
|
||||
Automatic inheritance can be disabled using the [`hx-disinherit`](https://htmx.org/attributes/hx-disinherit/) attribute.
|
||||
|
||||
## Boosting
|
||||
Htmx supports “boosting” regular [HTML](HTML.md) anchors and forms with the [hx-boost](https://htmx.org/attributes/hx-boost/) attribute. This attribute will convert all anchor tags and forms into AJAX requests that, by default, target the body of the page.
|
||||
Htmx supports “boosting” regular [HTML](HTML.md) anchors and forms with the [hx-boost](https://htmx.org/attributes/hx-boost/) attribute. This attribute will convert all anchor tags and forms into AJAX requests that, by default, target the body of the page.
|
||||
|
||||
Here is an example:
|
||||
```html
|
||||
|
|
@ -230,21 +230,21 @@ Here is an example:
|
|||
</div>
|
||||
```
|
||||
|
||||
The anchor tag in this div will issue an AJAX `GET` request to `/blog` and swap the response into the `body` tag.
|
||||
The anchor tag in this div will issue an AJAX `GET` request to `/blog` and swap the response into the `body` tag.
|
||||
|
||||
## History Support
|
||||
Htmx provides a simple mechanism for interacting with the [browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API):
|
||||
Htmx provides a simple mechanism for interacting with the [browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API):
|
||||
|
||||
If you want a given element to push its request URL into the browser navigation bar and add the current state of the page to the browser’s history, include the [hx-push-url](https://htmx.org/attributes/hx-push-url/) attribute:
|
||||
If you want a given element to push its request URL into the browser navigation bar and add the current state of the page to the browser’s history, include the [hx-push-url](https://htmx.org/attributes/hx-push-url/) attribute:
|
||||
```html
|
||||
<a hx-get="/blog" hx-push-url="true">Blog</a>
|
||||
```
|
||||
|
||||
When a user clicks on this link, htmx will snapshot the current DOM and store it before it makes a request to /blog. It then does the swap and pushes a new location onto the history stack.
|
||||
|
||||
When a user hits the back button, htmx will retrieve the old content from storage and swap it back into the target, simulating “going back” to the previous state. If the location is not found in the cache, htmx will make an ajax request to the given URL, with the header `HX-History-Restore-Request` set to true, and expects back the [HTML](HTML.md) needed for the entire page. Alternatively, if the `htmx.config.refreshOnHistoryMiss` config variable is set to true, it will issue a hard browser refresh.
|
||||
When a user hits the back button, htmx will retrieve the old content from storage and swap it back into the target, simulating “going back” to the previous state. If the location is not found in the cache, htmx will make an ajax request to the given URL, with the header `HX-History-Restore-Request` set to true, and expects back the [HTML](HTML.md) needed for the entire page. Alternatively, if the `htmx.config.refreshOnHistoryMiss` config variable is set to true, it will issue a hard browser refresh.
|
||||
|
||||
**NOTE:** If you push a URL into the history, you **must** be able to navigate to that URL and get a full page back! A user could copy and paste the URL into an email, or new tab. Additionally, htmx will need the entire page when restoring history if the page is not in the history cache.
|
||||
**NOTE:** If you push a URL into the history, you **must** be able to navigate to that URL and get a full page back! A user could copy and paste the URL into an email, or new tab. Additionally, htmx will need the entire page when restoring history if the page is not in the history cache.
|
||||
|
||||
# Request & Responses
|
||||
### Request Headers
|
||||
|
|
@ -256,19 +256,19 @@ htmx includes a number of useful headers in requests:
|
|||
| `HX-Trigger` | will be set to the id of the element that triggered the request |
|
||||
| `HX-Trigger-Name` | will be set to the name of the element that triggered the request |
|
||||
| `HX-Target` | will be set to the id of the target element |
|
||||
| `HX-Prompt` | will be set to the value entered by the user when prompted via [hx-prompt](https://htmx.org/attributes/hx-prompt/) |
|
||||
| `HX-Prompt` | will be set to the value entered by the user when prompted via [hx-prompt](https://htmx.org/attributes/hx-prompt/) |
|
||||
|
||||
### Response Headers
|
||||
htmx supports some htmx-specific response headers:
|
||||
|
||||
- `HX-Push` - pushes a new URL into the browser’s address bar
|
||||
- `HX-Redirect` - triggers a client-side redirect to a new location
|
||||
- `HX-Location` - triggers a client-side redirect to a new location that acts as a swap
|
||||
- `HX-Refresh` - if set to “true” the client side will do a full refresh of the page
|
||||
- `HX-Trigger` - triggers client side events
|
||||
- `HX-Trigger-After-Swap` - triggers client side events after the swap step
|
||||
- `HX-Trigger-After-Settle` - triggers client side events after the settle step
|
||||
- `HX-Push` - pushes a new URL into the browser’s address bar
|
||||
- `HX-Redirect` - triggers a client-side redirect to a new location
|
||||
- `HX-Location` - triggers a client-side redirect to a new location that acts as a swap
|
||||
- `HX-Refresh` - if set to “true” the client side will do a full refresh of the page
|
||||
- `HX-Trigger` - triggers client side events
|
||||
- `HX-Trigger-After-Swap` - triggers client side events after the swap step
|
||||
- `HX-Trigger-After-Settle` - triggers client side events after the settle step
|
||||
|
||||
For more on the `HX-Trigger` headers, see [`HX-Trigger` Response Headers](https://htmx.org/headers/hx-trigger/).
|
||||
For more on the `HX-Trigger` headers, see [`HX-Trigger` Response Headers](https://htmx.org/headers/hx-trigger/).
|
||||
|
||||
Submitting a form via htmx has the benefit of no longer needing the [Post/Redirect/Get Pattern](https://en.wikipedia.org/wiki/Post/Redirect/Get). After successfully processing a POST request on the server, you don’t need to return a [HTTP 302 (Redirect)](https://en.wikipedia.org/wiki/HTTP_302). You can directly return the new [HTML](HTML.md) fragment.
|
||||
Submitting a form via htmx has the benefit of no longer needing the [Post/Redirect/Get Pattern](https://en.wikipedia.org/wiki/Post/Redirect/Get). After successfully processing a POST request on the server, you don’t need to return a [HTTP 302 (Redirect)](https://en.wikipedia.org/wiki/HTTP_302). You can directly return the new [HTML](HTML.md) fragment.
|
||||
|
|
@ -5,9 +5,9 @@ rfc: https://datatracker.ietf.org/doc/html/rfc7519
|
|||
---
|
||||
|
||||
# [Json](../files/JSON.md) Web Token (JWT)
|
||||
[JSON](../files/JSON.md) Web Token (JWT) is an open standard ([RFC 7519](https://tools.ietf.org/html/rfc7519)) that defines a compact and self-contained way for securely transmitting information between parties as a [JSON](../files/JSON.md) object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the **HMAC** algorithm) or a public/private key pair using **RSA** or **ECDSA**.
|
||||
[JSON](../files/JSON.md) Web Token (JWT) is an open standard ([RFC 7519](https://tools.ietf.org/html/rfc7519)) that defines a compact and self-contained way for securely transmitting information between parties as a [JSON](../files/JSON.md) object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the **HMAC** algorithm) or a public/private key pair using **RSA** or **ECDSA**.
|
||||
|
||||
Signed tokens can verify the _integrity_ of the claims contained within it, while encrypted tokens _hide_ those claims from other parties. When tokens are signed using public/private key pairs, the signature also certifies that only the party holding the private key is the one that signed it.
|
||||
Signed tokens can verify the _integrity_ of the claims contained within it, while encrypted tokens _hide_ those claims from other parties. When tokens are signed using public/private key pairs, the signature also certifies that only the party holding the private key is the one that signed it.
|
||||
|
||||
[JSON](../files/JSON.md) Web Token can be stored in a [Cookie](Cookie.md)
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ Therefore, a JWT typically looks like the following.
|
|||
`xxxxx.yyyyy.zzzzz`
|
||||
|
||||
### Header
|
||||
The header _typically_ consists of two parts: the type of the token, which is JWT, and the signing algorithm being used, such as HMAC SHA256 or RSA.
|
||||
The header _typically_ consists of two parts: the type of the token, which is JWT, and the signing algorithm being used, such as HMAC SHA256 or RSA.
|
||||
|
||||
For example:
|
||||
```
|
||||
|
|
@ -31,15 +31,15 @@ For example:
|
|||
}
|
||||
```
|
||||
|
||||
Then, this [JSON](../files/JSON.md) is **Base64Url** encoded to form the first part of the JWT.
|
||||
Then, this [JSON](../files/JSON.md) is **Base64Url** encoded to form the first part of the JWT.
|
||||
|
||||
### Payload
|
||||
The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional data. There are three types of claims: _registered_, _public_, and _private_ claims.
|
||||
The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional data. There are three types of claims: _registered_, _public_, and _private_ claims.
|
||||
|
||||
- [**Registered claims**](https://tools.ietf.org/html/rfc7519#section-4.1): These are a set of predefined claims which are not mandatory but recommended, to provide a set of useful, interoperable claims. Some of them are: **iss** (issuer), **exp** (expiration time), **sub** (subject), **aud** (audience), and [others](https://tools.ietf.org/html/rfc7519#section-4.1).
|
||||
- [**Registered claims**](https://tools.ietf.org/html/rfc7519#section-4.1): These are a set of predefined claims which are not mandatory but recommended, to provide a set of useful, interoperable claims. Some of them are: **iss** (issuer), **exp** (expiration time), **sub** (subject), **aud** (audience), and [others](https://tools.ietf.org/html/rfc7519#section-4.1).
|
||||
> Notice that the claim names are only three characters long as JWT is meant to be compact.
|
||||
- [**Public claims**](https://tools.ietf.org/html/rfc7519#section-4.2): These can be defined at will by those using JWTs. But to avoid collisions they should be defined in the [IANA JSON Web Token Registry](https://www.iana.org/assignments/jwt/jwt.xhtml) or be defined as a URI that contains a collision resistant namespace.
|
||||
- [**Private claims**](https://tools.ietf.org/html/rfc7519#section-4.3): These are the custom claims created to share information between parties that agree on using them and are neither _registered_ or _public_ claims.
|
||||
- [**Public claims**](https://tools.ietf.org/html/rfc7519#section-4.2): These can be defined at will by those using JWTs. But to avoid collisions they should be defined in the [IANA JSON Web Token Registry](https://www.iana.org/assignments/jwt/jwt.xhtml) or be defined as a URI that contains a collision resistant namespace.
|
||||
- [**Private claims**](https://tools.ietf.org/html/rfc7519#section-4.3): These are the custom claims created to share information between parties that agree on using them and are neither _registered_ or _public_ claims.
|
||||
|
||||
An example payload could be:
|
||||
```
|
||||
|
|
@ -50,7 +50,7 @@ An example payload could be:
|
|||
}
|
||||
```
|
||||
|
||||
The payload is then **Base64Url** encoded to form the second part of the [JSON](../files/JSON.md) Web Token.
|
||||
The payload is then **Base64Url** encoded to form the second part of the [JSON](../files/JSON.md) Web Token.
|
||||
|
||||
### Signature
|
||||
To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that.
|
||||
|
|
|
|||
|
|
@ -55,24 +55,24 @@ The 64-bit binary fixed-point timestamps used by NTP consist of a 32-bit part fo
|
|||
NTPv4 introduces a 128-bit date format: 64 bits for the second and 64 bits for the fractional-second. The most-significant 32-bits of this format is the Era Number which resolves rollover ambiguity in most cases. According to Mills, "The 64-bit value for the fraction is enough to resolve the amount of time it takes a photon to pass an electron at the speed of light. The 64-bit second value is enough to provide unambiguous time representation until the universe goes dim."
|
||||
|
||||
## Clock synchronization algorithm
|
||||
A typical NTP client regularly polls one or more NTP servers. The client must compute its time offset and round-trip delay. Time offset _θ_ is positive or negative (client time > server time) difference in absolute time between the two clocks. It is defined by:
|
||||
A typical NTP client regularly polls one or more NTP servers. The client must compute its time offset and round-trip delay. Time offset _θ_ is positive or negative (client time > server time) difference in absolute time between the two clocks. It is defined by:
|
||||
${\displaystyle \theta ={\frac {(t_{1}-t_{0})+(t_{2}-t_{3})}{2}},}$
|
||||
|
||||
and the round-trip delay _δ_ by:
|
||||
and the round-trip delay _δ_ by:
|
||||
${\displaystyle \delta ={(t_{3}-t_{0})-(t_{2}-t_{1})},}$
|
||||
|
||||
where
|
||||
- $t_{0}$ is the client's timestamp of the request packet transmission,
|
||||
- $t_{1}$ is the server's timestamp of the request packet reception,
|
||||
- $t_{2}$ is the server's timestamp of the response packet transmission and
|
||||
- $t_{3}$ is the client's timestamp of the response packet reception.
|
||||
- $t_{0}$ is the client's timestamp of the request packet transmission,
|
||||
- $t_{1}$ is the server's timestamp of the request packet reception,
|
||||
- $t_{2}$ is the server's timestamp of the response packet transmission and
|
||||
- $t_{3}$ is the client's timestamp of the response packet reception.
|
||||
|
||||
To derive the expression for the offset, note that for the request packet,
|
||||
${\displaystyle t_{0}+\theta +\delta /2=t_{1}}$
|
||||
and for the response packet,
|
||||
${\displaystyle t_{3}+\theta -\delta /2=t_{2}}$
|
||||
|
||||
Solving for _θ_ yields the definition of the time offset.
|
||||
Solving for _θ_ yields the definition of the time offset.
|
||||
|
||||
The values for θ and δ are passed through filters and subjected to statistical analysis ("mitigation"). Outliers are discarded and an estimate of time offset is derived from the best three remaining candidates. The clock frequency is then adjusted to reduce the offset gradually ("discipline"), creating a feedback loop.
|
||||
|
||||
|
|
|
|||
|
|
@ -10,15 +10,15 @@ Users of the Tor network run an onion proxy software on their machines, which pr
|
|||
As an overlay network it is similiar to [i2p](../internet/I2P.md).
|
||||
|
||||
## Usage
|
||||
Start/enable `tor.service`. Alternatively, launch it with `sudo -u tor /usr/bin/tor`.
|
||||
Start/enable `tor.service`. Alternatively, launch it with `sudo -u tor /usr/bin/tor`.
|
||||
|
||||
To use a program over Tor, configure it to use `127.0.0.1` or `localhost` as a SOCKS5 proxy, with port `9050` for plain Tor with standard settings.
|
||||
To use a program over Tor, configure it to use `127.0.0.1` or `localhost` as a SOCKS5 proxy, with port `9050` for plain Tor with standard settings.
|
||||
|
||||
The proxy supports remote DNS resolution: use `socks5**h**://localhost:9050` for DNS resolution from the exit node (instead of `socks5` for a local DNS resolution).
|
||||
The proxy supports remote DNS resolution: use `socks5**h**://localhost:9050` for DNS resolution from the exit node (instead of `socks5` for a local DNS resolution).
|
||||
|
||||
## Configuration
|
||||
|
||||
Tor reads its configurations from the file `/etc/tor/torrc` by default, or if the latter is not found, from `$HOME/.torrc`. The configuration options are explained on the [Tor website](https://torproject.org/docs/tor-manual.html.en). The default configuration should work fine for most Tor users.
|
||||
Tor reads its configurations from the file `/etc/tor/torrc` by default, or if the latter is not found, from `$HOME/.torrc`. The configuration options are explained on the [Tor website](https://torproject.org/docs/tor-manual.html.en). The default configuration should work fine for most Tor users.
|
||||
|
||||
## Hidden Services
|
||||
Hidden Services are web services behind an onion domain.
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ source: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mech
|
|||
# URL
|
||||
The target of an [HTTP](HTTP.md) request is called a "resource", whose nature isn't defined further; it can be a document, a photo, or anything else. Each resource is identified by a Uniform Resource Identifier ([URI](https://developer.mozilla.org/en-US/docs/Glossary/URI)) used throughout [HTTP](HTTP.md) for identifying resources.
|
||||
|
||||
The most common form of URI is the Uniform Resource Locator ([URL](https://developer.mozilla.org/en-US/docs/Glossary/URL)), which is known as the _web address_.
|
||||
The most common form of URI is the Uniform Resource Locator ([URL](https://developer.mozilla.org/en-US/docs/Glossary/URL)), which is known as the _web address_.
|
||||
|
||||
# Syntax
|
||||
URL: `http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument`
|
||||
|
|
@ -14,7 +14,7 @@ URL: `http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#Some
|
|||
URLs can be absolute like the above or relative like `../parent/path`.
|
||||
|
||||
## Scheme or Protocol
|
||||
`http://` is the protocol. It indicates which protocol the browser must use. Usually it is the [HTTP](HTTP.md) protocol or its secured version, HTTPS. The Web requires one of these two, but browsers also know how to handle other protocols such as `mailto:` (to open a mail client) or `ftp:` to handle a file transfer, so don't be surprised if you see such protocols. Common schemes are:
|
||||
`http://` is the protocol. It indicates which protocol the browser must use. Usually it is the [HTTP](HTTP.md) protocol or its secured version, HTTPS. The Web requires one of these two, but browsers also know how to handle other protocols such as `mailto:` (to open a mail client) or `ftp:` to handle a file transfer, so don't be surprised if you see such protocols. Common schemes are:
|
||||
|
||||
| Scheme | Description |
|
||||
| ----------- | ------------------------------------------------------------------------------------------------- |
|
||||
|
|
@ -31,16 +31,16 @@ URLs can be absolute like the above or relative like `../parent/path`.
|
|||
| ws/wss | [WebSocket connections (Secure)](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) |
|
||||
|
||||
## Domain
|
||||
`www.example.com` is the [domain](Domain.md) name or authority that governs the namespace. It indicates which Web server is being requested. Alternatively, it is possible to directly use an [IP address](https://developer.mozilla.org/en-US/docs/Glossary/IP_Address), but because it is less convenient, it is not often used on the Web.
|
||||
`www.example.com` is the [domain](Domain.md) name or authority that governs the namespace. It indicates which Web server is being requested. Alternatively, it is possible to directly use an [IP address](https://developer.mozilla.org/en-US/docs/Glossary/IP_Address), but because it is less convenient, it is not often used on the Web.
|
||||
|
||||
## Port
|
||||
`:80` is the port in this instance. It indicates the technical "gate" used to access the resources on the web server. It is usually omitted if the web server uses the standard ports of the [HTTP](HTTP.md) protocol (80 for [HTTP](HTTP.md) and 443 for HTTPS) to grant access to its resources. Otherwise, it is mandatory.
|
||||
`:80` is the port in this instance. It indicates the technical "gate" used to access the resources on the web server. It is usually omitted if the web server uses the standard ports of the [HTTP](HTTP.md) protocol (80 for [HTTP](HTTP.md) and 443 for HTTPS) to grant access to its resources. Otherwise, it is mandatory.
|
||||
|
||||
## Path
|
||||
`/path/to/myfile.html` is the path to the resource on the Web server. In the early days of the Web, a path like this represented a physical file location on the Web server. Nowadays, it is mostly an abstraction handled by Web servers without any physical reality.
|
||||
`/path/to/myfile.html` is the path to the resource on the Web server. In the early days of the Web, a path like this represented a physical file location on the Web server. Nowadays, it is mostly an abstraction handled by Web servers without any physical reality.
|
||||
|
||||
## Query
|
||||
`?key1=value1&key2=value2` are extra parameters provided to the Web server. Those parameters are a list of key/value pairs separated with the `&` symbol. The Web server can use those parameters to do extra stuff before returning the resource to the user. Each Web server has its own rules regarding parameters, and the only reliable way to know how a specific Web server is handling parameters is by asking the Web server owner.
|
||||
`?key1=value1&key2=value2` are extra parameters provided to the Web server. Those parameters are a list of key/value pairs separated with the `&` symbol. The Web server can use those parameters to do extra stuff before returning the resource to the user. Each Web server has its own rules regarding parameters, and the only reliable way to know how a specific Web server is handling parameters is by asking the Web server owner.
|
||||
|
||||
## Fragment
|
||||
`#SomewhereInTheDocument` is an anchor to another part of the resource itself. An anchor represents a sort of "bookmark" inside the resource, giving the browser the directions to show the content located at that "bookmarked" spot. On an [HTML](HTML.md) document, for example, the browser will scroll to the point where the anchor is defined; on a video or audio document, the browser will try to go to the time the anchor represents. It is worth noting that the part after the `#`, also known as the fragment identifier, is never sent to the server with the request.
|
||||
`#SomewhereInTheDocument` is an anchor to another part of the resource itself. An anchor represents a sort of "bookmark" inside the resource, giving the browser the directions to show the content located at that "bookmarked" spot. On an [HTML](HTML.md) document, for example, the browser will scroll to the point where the anchor is defined; on a video or audio document, the browser will try to go to the time the anchor represents. It is worth noting that the part after the `#`, also known as the fragment identifier, is never sent to the server with the request.
|
||||
|
|
|
|||
|
|
@ -66,4 +66,4 @@ Type=oneshot
|
|||
WantedBy=multi-user.target
|
||||
```
|
||||
|
||||
Then activate this new service by starting `wol@<interface>.service`.
|
||||
Then activate this new service by starting `wol@<interface>.service`.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue