This commit is contained in:
JMARyA 2023-12-04 11:02:23 +01:00
commit c5cd492449
Signed by: jmarya
GPG key ID: 901B2ADDF27C2263
475 changed files with 27928 additions and 0 deletions

View file

@ -0,0 +1,6 @@
---
source: https://developer.mozilla.org/en-US/docs/Web/CSS
obj: concept
---
#wip

View file

@ -0,0 +1,77 @@
---
obj: concept
wiki: https://en.wikipedia.org/wiki/HTTP_cookie
source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
rfc: https://datatracker.ietf.org/doc/html/rfc6265
---
# Cookie
An [HTTP](HTTP.md) cookie (web cookie, browser cookie) is a small piece of data that a server sends to a user's web browser. The browser may store the cookie and send it back to the same server with later requests. Typically, an [HTTP](HTTP.md) cookie is used to tell if two requests come from the same browser—keeping a user logged in, for example. It remembers stateful information for the stateless [HTTP](HTTP.md) protocol.
Cookies are mainly used for three purposes:
- Session management: Logins, shopping carts, game scores, or anything else the server should remember
- Personalization: User preferences, themes, and other settings
- Tracking: Recording and analyzing user behavior
Cookies were once used for general client-side storage. While this made sense when they were the only way to store data on the client, modern storage APIs are now recommended. Cookies are sent with every request, so they can worsen performance (especially for mobile data connections). Modern APIs for client storage are the Web Storage API (localStorage and sessionStorage) and IndexedDB.
## Using Cookies
After receiving an [HTTP](HTTP.md) request, a server can send one or more `Set-Cookie` headers with the response. The browser usually stores the cookie and sends it with requests made to the same server inside a `Cookie` [HTTP](HTTP.md) header. You can specify an expiration date or time period after which the cookie shouldn't be sent. You can also set additional restrictions to a specific [domain](Domain.md) and path to limit where the cookie is sent.
```
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.
```
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.
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.
```
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.
### Domain attribute
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 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.
For example, if you set `Path=/docs`, these request paths match:
- `/docs`
- `/docs/`
- `/docs/Web/`
- `/docs/Web/HTTP`
But these request paths don't:
- `/`
- `/docsets`
- `/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`.
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
```

View file

@ -0,0 +1,37 @@
---
obj: concept
wiki: https://en.wikipedia.org/wiki/Dynamic_Host_Configuration_Protocol
rfc: https://datatracker.ietf.org/doc/html/rfc2131
---
# Dynamic Host Configuration Protocol
The Dynamic Host Configuration Protocol (DHCP) is a network management protocol used to automate the assignment of IP addresses and other network configuration parameters to devices on a network. DHCP simplifies the process of configuring devices on a network by providing a centralized mechanism for dynamic IP address allocation.
## Key Components
### 1. DHCP Server
A DHCP server is a network device responsible for assigning IP addresses and other configuration parameters to DHCP clients. It maintains a pool of available IP addresses and leases them to clients on a temporary basis.
### 2. DHCP Client
A DHCP client is a device (computer, printer, etc.) that requests network configuration information from a DHCP server. The client typically sends a DHCP discover message to locate available DHCP servers on the network.
## DHCP Process
1. **DHCP Discover**: When a device is connected to a network, it broadcasts a DHCP discover message to identify available DHCP servers.
2. **DHCP Offer**: DHCP servers respond with a DHCP offer message, providing the client with an IP address and other configuration parameters.
3. **DHCP Request**: The client selects one of the offered IP addresses and sends a DHCP request message to the chosen server.
4. **DHCP Acknowledge**: The selected DHCP server responds with a DHCP acknowledge message, confirming the allocation of the requested IP address and providing additional configuration details.
5. **IP Lease Period**: The DHCP server assigns an IP address to the client for a specific lease period. The client must renew its lease before expiration to retain the IP address.
## DHCP Configuration Parameters
DHCP servers can provide various configuration parameters, including:
- **IP Address**: The primary network identifier assigned to the device.
- **Subnet Mask**: Defines the network's subnetwork structure.
- **Default Gateway**: Specifies the router that connects the local network to other networks.
- **Domain Name System ([DNS](DNS.md)) Servers**: Identifies the servers responsible for translating [domain](Domain.md) names into IP addresses.
- **Domain Name**: Provides the domain name associated with the assigned IP address.
- **Lease Duration**: The period for which the IP address is allocated to the client.
## DHCP Security Considerations
- **Rogue DHCP Servers**: Unauthorized DHCP servers can cause network disruptions. Implementing DHCP snooping can help mitigate this risk.
- **IP Address Exhaustion**: Regularly monitoring and managing the IP address pool prevents exhaustion and ensures efficient resource utilization.
- **Man-in-the-Middle Attacks**: Using DHCP secure protocols, such as DHCPv6 Secure Neighbour Discovery (SEND), helps protect against man-in-the-middle attacks.

View file

@ -0,0 +1,53 @@
---
obj: concept
wiki: https://de.wikipedia.org/wiki/Domain_Name_System
rfc: https://datatracker.ietf.org/doc/html/rfc1034
---
# Domain Name System
The Domain Name System (DNS) is a hierarchical and distributed naming system that translates human-readable [domain](Domain.md) names into IP addresses, facilitating the mapping of hostnames to IP addresses on the internet. DNS plays a crucial role in making web browsing and various internet services accessible by allowing users to interact with websites using easy-to-remember [domain](Domain.md) names instead of numeric IP addresses.
## Components of DNS
### 1. **Domain Name Space:**
- **Root Domain:** The highest level of the hierarchy represented by a dot (`.`). It is managed by the Internet Assigned Numbers Authority (IANA).
- **Top-Level Domains (TLDs):** Immediately below the root, examples include `.com`, `.org`, `.net`.
- **Second-Level Domains (SLDs):** Situated directly beneath TLDs, these are often used to identify specific entities or organizations.
- **Subdomains:** Further subdivisions of domains, creating a hierarchical structure (e.g., `blog.example.com`).
### 2. **DNS Servers:**
- **Root DNS Servers:** Initially contacted to resolve any [domain](Domain.md). They provide information about the authoritative DNS servers for each TLD.
- **TLD DNS Servers:** Responsible for handling queries related to specific top-level domains.
- **Authoritative DNS Servers:** Hold the actual DNS records for a [domain](Domain.md) and provide the authoritative answers.
- **Recursive DNS Servers:** These servers query other DNS servers on behalf of a client until a complete answer is obtained.
### 3. **DNS Records:**
- **`A` (Address) Record:** Maps a domain to an IPv4 address.
- **`AAAA` (IPv6 Address) Record:** Maps a [domain](Domain.md) to an IPv6 address.
- **`CNAME` (Canonical Name) Record:** Alias of one [domain](Domain.md) to another.
- **`MX` (Mail Exchange) Record:** Specifies mail servers responsible for receiving [email](eMail.md).
- **`NS` (Name Server) Record:** Indicates authoritative DNS servers for the [domain](Domain.md).
## DNS Resolution Process
1. **User Input:** A user enters a domain name into a web browser.
2. **Local DNS Resolver:** The user's device queries a local DNS resolver (usually provided by the ISP).
3. **Recursive Query:** If the local resolver doesn't have the information, it recursively queries the root DNS servers, then TLD servers, and finally the authoritative DNS server for the specific [domain](Domain.md).
4. **Response:** The authoritative DNS server responds with the IP address associated with the requested [domain](Domain.md).
5. **Caching:** The resolved IP address is cached at various levels to speed up future requests for the same [domain](Domain.md).
## DNS Security
DNS plays a crucial role in internet security, and various measures are in place to protect against attacks, including:
- **DNSSEC (DNS Security Extensions):** Provides data integrity and authentication for DNS responses, preventing DNS spoofing.
- **DNS Filtering:** Blocks access to malicious websites by filtering DNS queries based on predefined policies.
## Using DNS
DNS traditionally operates over both [UDP](UDP.md) and [TCP](TCP.md), with [UDP](UDP.md) being the default choice for standard query/response operations on port `53`
### DNS over HTTPS (DoH)
DoH uses the HTTPS protocol (Port `443/tcp`) to encapsulate DNS queries. This makes it very secure and hard to block on a firewall level.
### DNS over TLS (DoT)
DoT uses TLS encryption for DNS queries and runs on port `853/tcp`
### Common DNS Servers
- `1.1.1.1` - [Cloudflare](websites/clearnet/Cloudflare.md) DNS
- `8.8.8.8` - Google DNS

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,20 @@
---
obj: concept
wiki: https://en.wikipedia.org/wiki/Domain_name
rfc: https://datatracker.ietf.org/doc/html/rfc1035
---
# Domain
A domain is a human-readable label used to identify a location or an entity on the internet. It serves as a memorable way to reference specific resources, such as websites, servers, or services, rather than relying on numerical IP addresses.
Domain names are formed by the rules and procedures of the Domain Name System ([DNS](DNS.md)). Any name registered in the [DNS](DNS.md) is a domain name. Domain names are organized in subordinate levels (subdomains) of the [DNS](DNS.md) root domain, which is nameless. The first-level set of domain names are the top-level domains (TLDs), including the generic top-level domains (gTLDs), such as the prominent domains com, info, net, edu, and org, and the country code top-level domains (ccTLDs). Below these top-level domains in the [DNS](DNS.md) hierarchy are the second-level and third-level domain names that are typically open for reservation by end-users who wish to connect local area networks to the Internet, create other publicly accessible Internet resources or run web sites.
A fully qualified domain name (FQDN) is a domain name that is completely specified with all labels in the hierarchy of the [DNS](DNS.md), having no parts omitted. Traditionally a FQDN ends in a dot (.) to denote the top of the [DNS](DNS.md) tree. Labels in the Domain Name System are case-insensitive, and may therefore be written in any desired capitalization method, but most commonly domain names are written in lowercase in technical contexts.
## Domain Naming Rules
- **Length:** Domain names can be up to 253 characters in length, including the TLD.
- **Characters:** Domains can include letters (a-z), numbers (0-9), and hyphens ("-"). However, they cannot begin or end with a hyphen.
- **Case Insensitivity:** Domain names are not case-sensitive, meaning "example.com" is the same as "Example.com."
## Domain Registration
To use a domain, individuals or entities must register it through domain registrars. The registration process involves selecting an available domain, providing contact information, and paying a registration fee. Registrations are typically renewable on an annual basis.

View file

@ -0,0 +1,8 @@
---
obj: concept
wiki: https://en.wikipedia.org/wiki/File_Transfer_Protocol
rfc: https://datatracker.ietf.org/doc/html/rfc959
---
# File Transfer Protocol
The File Transfer Protocol (FTP) is a standard communication protocol used for the transfer of computer files from a server to a client on a computer network. FTP is built on a clientserver model architecture using separate control (Port `21`) and data (Port `20`) connections between the client and the server. FTP users may authenticate themselves with a plain-text sign-in protocol, normally in the form of a username and password, but can connect anonymously if the server is configured to allow it. For secure transmission that protects the username and password, and encrypts the content, FTP is often secured with SSL/TLS (FTPS) or replaced with [SSH](../applications/SSH.md) File Transfer Protocol (SFTP). One popular FTP client is [FileZilla](../applications/network/FileZilla.md).

552
technology/internet/HTML.md Normal file
View file

@ -0,0 +1,552 @@
---
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)).
"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.
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.
### 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:
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))
- `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.
- `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)
- Pieces of media files with media fragments
- 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.
## \<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).
### 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.
-`controls`
If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
-`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`.
- `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:
- `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.
## \<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.
## \<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.
## \<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.
### 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.
- `onoffline`
Function to call when network communication has failed.
- `ononline`
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.
## \<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.
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).
- `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.**
- `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.
- `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.
- `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.)
- `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.
## \<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.
## \<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.
### 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.
## \<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.
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).
- `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.
> **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).
## \<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.
## \<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.
### 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.
- `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.
- `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.
## \<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.
## \<form>
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).
- `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.)
- `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).)
- `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.
### 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.
- `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:
- `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`.
- `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.
- `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`.
## \<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.
## \<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).
- 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)
- [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style)
- [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
- [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
- [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript)
- [`<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.
## \<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.
## \<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.
## \<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.
### 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`.
- `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.
- `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.
- `width`
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.
- `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.
- `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.
## \<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.
## \<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.
## \<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).
```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.
## \<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.
### 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"`.
## \<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.
### 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.
- `label`
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.
### 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.
- `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.
- `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.
- `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.
## \<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.
## \<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.
### 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`.
- `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.
## \<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.
## \<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.
## \<selection>
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).
- `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.
- `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.
- `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.)
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.
- `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`.
## \<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).
### 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).
- `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.
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).
## \<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.
## \<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.
## \<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.
## \<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.
## \<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.
## \<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)).
## \<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_.
## \<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.
## \<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.
## \<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.
## \<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.
### 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:
- `off`: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.
- `on`: The browser can automatically complete the value based on values that the user has entered during previous uses.
- `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`.
- `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.
- `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.
- `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`
The minimum string length (measured in UTF-16 code units) required that the user should enter.
- `name`
The name of the control.
- `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.
- `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.
## \<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.
## \<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.
### 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)).
- `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.
- `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.
- `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)).
### 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.|
|[`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.|
|[`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.|
|[`loadedmetadata`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event "loadedmetadata")|The metadata has been loaded.|
|[`loadstart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event "loadstart")|Fired when the browser has started to load the resource.|
|[`pause`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event "pause")back has been paused.|
|[`play`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event "play")back has begun.|
|[`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.|
|[`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.|
|[`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).
```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 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. |
| [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. |
| [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. |
| [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. |
| [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. |
| [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. |
## 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. |

274
technology/internet/HTMX.md Normal file
View file

@ -0,0 +1,274 @@
---
website: https://htmx.org/
obj: concept
---
# htmx
htmx is a library that allows you to access modern browser features directly from [HTML](HTML.md), rather than using javascript.
htmx extends and generalizes the core idea of [HTML](HTML.md) as a hypertext, opening up many more possibilities directly within the language:
- 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 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.
# 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.
Via CDN:
```html
<script src="https://unpkg.com/htmx.org@1.9.5" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
```
## Download a copy
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:
```html
<script src="/path/to/htmx.min.js"></script>
```
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|
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
</div>
```
This tells the browser:
> When a user clicks on this div, issue a PUT request to the URL /messages and load the response into the div
### 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
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:
```html
<div hx-post="/mouse_entered" hx-trigger="mouseenter once">
[Here Mouse, Mouse!]
</div>
```
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.
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"
hx-trigger="keyup changed delay:500ms"
hx-target="#search-results"
placeholder="Search..."
>
<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`.
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/):
- `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:
```html
<div hx-get="/news" hx-trigger="every 2s"></div>
```
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.
#### 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:
```html
<div hx-get="/messages"
hx-trigger="load delay:1s"
hx-swap="outerHTML"
>
</div>
```
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/).
### 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:
```html
<input type="text" name="q"
hx-get="/trigger_delay"
hx-trigger="keyup delay:500ms changed"
hx-target="#search-results"
placeholder="Search..."
>
<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.
#### 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)
### 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:
|Name|Description|
|---|---|
|`innerHTML`|the default, puts the content inside the target element|
|`outerHTML`|replaces the entire target element with the returned content|
|`afterbegin`|prepends the content before the first child inside the target|
|`beforebegin`|prepends the content before the target in the targets parent element|
|`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)|
### 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.
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 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.
#### 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).
## 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:
```html
<button hx-delete="/account" hx-confirm="Are you sure?">
Delete My Account
</button>
<button hx-put="/account" hx-confirm="Are you sure?">
Update My Account
</button>
```
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">
Delete My Account
</button>
<button hx-put="/account">
Update My Account
</button>
</div>
```
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 didnt 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">
Delete My Account
</button>
<button hx-put="/account">
Update My Account
</button>
<button hx-confirm="unset" hx-get="/">
Cancel
</button>
</div>
```
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.
## 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.
Here is an example:
```html
<div hx-boost="true">
<a href="/blog">Blog</a>
</div>
```
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):
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 browsers 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.
**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
htmx includes a number of useful headers in requests:
| Header | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------ |
| `HX-Request` | will be set to “true” |
| `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/) |
### Response Headers
htmx supports some htmx-specific response headers:
- `HX-Push` - pushes a new URL into the browsers 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/).
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 dont need to return a [HTTP 302 (Redirect)](https://en.wikipedia.org/wiki/HTTP_302). You can directly return the new [HTML](HTML.md) fragment.

395
technology/internet/HTTP.md Normal file
View file

@ -0,0 +1,395 @@
---
aliases: ["HyperText Transfer Protocol"]
source: https://developer.mozilla.org/en-US/docs/Web/HTTP
obj: concept
---
# HyperText Transfer Protocol
Hypertext Transfer Protocol (HTTP) is an [application-layer](OSI%20Model.md) protocol for transmitting hypermedia documents, such as [HTML](HTML.md). It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a stateless protocol, meaning that the server does not keep any data (state) between two requests.
## Requests
### HTTP Request Structure
A typical HTTP request consists of the following components:
```http
GET /path/to/resource HTTP/1.1
Host: www.example.com
Accept: text/html
```
- Request Line: Specifies the HTTP method, the resource's URI, and the HTTP version.
- Headers: Additional information about the request, such as the host, accepted content types, etc.
- Body: Optional data sent with the request, typically used in POST or PUT requests.
### HTTP Response Structure
A typical HTTP response consists of the following components:
```http
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 123
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
```
- Status Line: Specifies the HTTP version, status code, and a brief status message.
- Headers: Provide additional information about the response, such as content type, length, etc.
- Body: Contains the actual data or resource requested.
### HTTP Multipart
HTTP Multipart is an extension of the Hypertext Transfer Protocol (HTTP) that allows for the transmission of multiple types of data in a single request or response. This is particularly useful when dealing with file uploads, form submissions, or any scenario where different types of data need to be sent simultaneously.
### Overview
HTTP Multipart messages are used to send multiple parts of data as a single message body. Each part can have its own content type and can be of different data types, such as text or binary. Multipart messages are identified by a unique boundary string that separates each part within the message.
### Structure of a Multipart Message
A Multipart message typically consists of the following structure:
```http
POST /upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=boundary_string
--boundary_string
Content-Disposition: form-data; name="text_data"
This is a text field.
--boundary_string
Content-Disposition: form-data; name="file"; filename="example.txt"
Content-Type: text/plain
Contents of the file go here.
--boundary_string--
```
- The `Content-Type` header specifies that the message body is a multipart form data, and it includes the boundary string.
- Each part of the message is separated by the boundary string.
- Parts can include text data or binary data, and they are defined by the Content-Disposition header.
- The name attribute in the `Content-Disposition` header specifies the name of the field or parameter.
- For file uploads, the `filename` attribute is included, along with the `Content-Type` header specifying the type of file.
## HTTP Methods
HTTP defines several methods or verbs that indicate the desired action to be performed on a resource. Common methods include:
- `GET`: Retrieve data from the server.
- `POST`: Submit data to the server to be processed.
- `PUT`: Update a resource on the server.
- `DELETE`: Remove a resource on the server.
- `HEAD`: Retrieve metadata about a resource without the actual data.
- `OPTIONS`: Query the server for the allowed methods on a resource.
## HTTP Headers
Headers can be grouped according to their contexts:
- Request headers contain more information about the resource to be fetched, or about the client requesting the resource.
- Response headers hold additional information about the response, like its location or about the server providing it.
- Representation headers contain information about the body of the resource, like its [MIME](../files/MIME.md) type, or encoding/compression applied.
- Payload headers contain representation-independent information about payload data, including content length and the encoding used for transport.
### Authentication Headers
- `Authorization`:
The HTTP `Authorization` request header can be used to provide credentials that authenticate a user agent with a server, allowing access to a protected resource.
```http
Authorization: <auth-scheme> <authorization-parameters>
```
### Caching Headers
- `Age`:
The `Age` header contains the time in seconds the object was in a proxy cache.
```http
Age: <delta-seconds>
```
- `Expires`:
The `Expires` HTTP header contains the date/time after which the response is considered expired.
```http
Expires: <http-date>
Expires: Wed, 21 Oct 2015 07:28:00 GMT
```
### Content negotiation Headers
- `Accept`:
The `Accept` request HTTP header indicates which content types, expressed as [MIME](../files/MIME.md) types, the client is able to understand. The server uses content negotiation to select one of the proposals and informs the client of the choice with the `Content-Type` response header. Browsers set required values for this header based on the context of the request. For example, a browser uses different values in a request when fetching a [CSS](CSS.md) stylesheet, image, video, or a script.
```http
Accept: <MIME_type>/<MIME_subtype>
Accept: <MIME_type>/*
Accept: */*
// Multiple types, weighted with the quality value syntax:
Accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*;q=0.8
```
- `Accept-Encoding`:
The `Accept-Encoding` request HTTP header indicates the content encoding (usually a compression algorithm) that the client can understand. The server uses content negotiation to select one of the proposals and informs the client of that choice with the `Content-Encoding` response header.
```http
Accept-Encoding: gzip
Accept-Encoding: compress
Accept-Encoding: deflate
Accept-Encoding: br
Accept-Encoding: identity
Accept-Encoding: *
// Multiple algorithms, weighted with the quality value syntax:
Accept-Encoding: deflate, gzip;q=1.0, *;q=0.5
```
- `Content-Language`:
The `Accept-Language` request HTTP header indicates the natural language and locale that the client prefers. The server uses content negotiation to select one of the proposals and informs the client of the choice with the `Content-Language` response header. Browsers set required values for this header according to their active user interface language. Users rarely change it, and such changes are not recommended because they may lead to fingerprinting.
```http
Accept-Language: <language>
Accept-Language: *
// Multiple types, weighted with the quality value syntax:
Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5
```
### Cookie Headers
- `Cookie`:
The `Cookie` HTTP request header contains stored HTTP [cookies](Cookie.md) associated with the server (i.e. previously sent by the server with the `Set-Cookie`` header or set in JavaScript using `Document.cookie`).
```http
Cookie: <cookie-list>
Cookie: name=value
Cookie: name=value; name2=value2; name3=value3
```
- `Set-Cookie`:
The `Set-Cookie` HTTP response header is used to send a [cookie](Cookie.md) from the server to the user agent, so that the user agent can send it back to the server later. To send multiple cookies, multiple `Set-Cookie` headers should be sent in the same response.
```http
Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<number>
Set-Cookie: <cookie-name>=<cookie-value>; Partitioned
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
Set-Cookie: <cookie-name>=<cookie-value>; Secure
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=None; Secure
// Multiple attributes are also possible, for example:
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly
```
### CORS Headers
- `Access-Control-Allow-Origin`:
The `Access-Control-Allow-Origin` response header indicates whether the response can be shared with requesting code from the given origin.
```http
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: <origin>
Access-Control-Allow-Origin: null
```
- `Access-Control-Allow-Headers`:
The `Access-Control-Allow-Headers` response header is used in response to a preflight request which includes the `Access-Control-Request-Headers` to indicate which HTTP headers can be used during the actual request.
```http
Access-Control-Allow-Headers: [<header-name>[, <header-name>]*]
Access-Control-Allow-Headers: *
```
- `Access-Control-Allow-Methods`:
The `Access-Control-Allow-Methods` response header specifies one or more methods allowed when accessing a resource in response to a preflight request.
```http
Access-Control-Allow-Methods: <method>, <method>, …
Access-Control-Allow-Methods: *
```
- `Access-Control-Expose-Headers`:
The `Access-Control-Expose-Headers` response header allows a server to indicate which response headers should be made available to scripts running in the browser, in response to a cross-origin request.
```http
Access-Control-Expose-Headers: [<header-name>[, <header-name>]*]
Access-Control-Expose-Headers: *
```
- `Access-Control-Max-Age`:
The `Access-Control-Max-Age` response header indicates how long the results of a preflight request (that is the information contained in the `Access-Control-Allow-Methods` and `Access-Control-Allow-Headers` headers) can be cached.
```http
Access-Control-Max-Age: <delta-seconds>
```
- `Access-Control-Request-Headers`:
The `Access-Control-Request-Headers` request header is used by browsers when issuing a preflight request to let the server know which HTTP headers the client might send when the actual request is made (such as with `setRequestHeader()`). The complementary server-side header of `Access-Control-Allow-Headers` will answer this browser-side header.
```http
Access-Control-Request-Headers: <header-name>, <header-name>, …
```
- `Access-Control-Request-Method`:
The `Access-Control-Request-Method` request header is used by browsers when issuing a preflight request, to let the server know which HTTP method will be used when the actual request is made. This header is necessary as the preflight request is always an `OPTIONS` and doesn't use the same method as the actual request.
```http
Access-Control-Request-Method: <method>
```
- `Origin`:
The `Origin` request header indicates the origin (scheme, hostname, and port) that caused the request. For example, if a user agent needs to request resources included in a page, or fetched by scripts that it executes, then the origin of the page may be included in the request.
```http
Origin: null
Origin: <scheme>://<hostname>
Origin: <scheme>://<hostname>:<port>
```
### Download Headers
- `Content-Disposition`:
In a regular HTTP response, the `Content-Disposition` response header is a header indicating if the content is expected to be displayed inline in the browser, that is, as a Web page or as part of a Web page, or as an attachment, that is downloaded and saved locally.
```http
Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"
```
### Message body Headers
- `Content-Length`:
The `Content-Length` header indicates the size of the message body, in bytes, sent to the recipient.
```http
Content-Length: <length>
```
- `Content-Type`:
The `Content-Type` representation header is used to indicate the original media type of the resource (prior to any content encoding applied for sending).
```http
Content-Type: text/html; charset=utf-8
Content-Type: multipart/form-data; boundary=something
```
- `Content-Encoding`:
The `Content-Encoding` representation header lists any encodings that have been applied to the representation (message payload), and in what order. This lets the recipient know how to decode the representation in order to obtain the original payload format. Content encoding is mainly used to compress the message data without losing information about the origin media type.
```http
Content-Encoding: gzip
Content-Encoding: compress
Content-Encoding: deflate
Content-Encoding: br
// Multiple, in the order in which they were applied
Content-Encoding: deflate, gzip
```
- `Content-Language`:
The `Content-Language` representation header is used to describe the language(s) intended for the audience, so users can differentiate it according to their own preferred language.
```http
Content-Language: de-DE
Content-Language: en-US
Content-Language: de-DE, en-CA
```
### Redirect Headers
- `Location`:
The `Location` response header indicates the [URL](URL.md) to redirect a page to. It only provides a meaning when served with a `3xx` (redirection) or `201` (created) status response.
```http
Location: <url>
```
### Request Context Headers
- `Referer`:
The `Referer` HTTP request header contains the absolute or partial address from which a resource has been requested. The `Referer` header allows a server to identify referring pages that people are visiting from or where requested resources are being used. This data can be used for analytics, logging, optimized caching, and more.
```http
Referer: <url>
```
- `Referrer-Policy`:
The `Referrer-Policy` HTTP header controls how much referrer information (sent with the Referer header) should be included with requests.
```http
Referrer-Policy: no-referrer
Referrer-Policy: no-referrer-when-downgrade
Referrer-Policy: origin
Referrer-Policy: origin-when-cross-origin
Referrer-Policy: same-origin
Referrer-Policy: strict-origin
Referrer-Policy: strict-origin-when-cross-origin
Referrer-Policy: unsafe-url
```
- `User-Agent`:
The `User-Agent` request header is a characteristic string that lets servers and network peers identify the application, operating system, vendor, and/or version of the requesting user agent.
```http
User-Agent: <product> / <product-version> <comment>
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:42.0) Gecko/20100101 Firefox/42.0
```
### Range Headers
- `Accept-Ranges`:
The `Accept-Ranges` HTTP response header is a marker used by the server to advertise its support for partial requests from the client for file downloads. The value of this field indicates the unit that can be used to define a range.
```http
Accept-Ranges: bytes
```
- `Ramge`:
The `Range` HTTP request header indicates the parts of a resource that the server should return. Several parts can be requested at the same time in one Range header, and the server may send back these ranges in a multipart document. If the server sends back ranges, it uses the `206 Partial Content` status code for the response. If the ranges are invalid, the server returns the `416 Range Not Satisfiable` error.
```http
Range: <unit>=<range-start>-
Range: <unit>=<range-start>-<range-end>
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>
Range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>, <range-start>-<range-end>
Range: <unit>=-<suffix-length>
```
- `Content-Range`:
The `Content-Range` response HTTP header indicates where in a full body message a partial message belongs.
```http
Content-Range: bytes <range-start>-<range-end>/<size>
Content-Range: bytes <range-start>-<range-end>/*
Content-Range: bytes */<size>
```
## HTTP Response Status Codes
HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes:
- Informational responses (`100 199`)
- Successful responses (`200 299`)
- Redirection messages (`300 399`)
- Client error responses (`400 499`)
- Server error responses (`500 599`)
### Informational responses
- `100 Continue`: This interim response indicates that the client should continue the request or ignore the response if the request is already finished.
- `101 Switching Protocols`: This code is sent in response to an Upgrade request header from the client and indicates the protocol the server is switching to.
- `102 Processing` ([WebDAV](../tools/WebDAV.md)): This code indicates that the server has received and is processing the request, but no response is available yet.
### Successful responses
- `200 OK`: The request succeeded.
- `201 Created`: The request succeeded, and a new resource was created as a result. This is typically the response sent after `POST` requests, or some `PUT` requests.
- `202 Accepted`: The request has been received but not yet acted upon. It is noncommittal, since there is no way in HTTP to later send an asynchronous response indicating the outcome of the request. It is intended for cases where another process or server handles the request, or for batch processing.
- `204 No Content`: There is no content to send for this request, but the headers may be useful. The user agent may update its cached headers for this resource with the new ones.
- `205 Reset Content`: Tells the user agent to reset the document which sent this request.
- `206 Partial Content`: This response code is used when the `Range` header is sent from the client to request only part of a resource.
- `207 Multi-Status` ([WebDAV](../tools/WebDAV.md)): Conveys information about multiple resources, for situations where multiple status codes might be appropriate.
- `208 Already Reported` ([WebDAV](../tools/WebDAV.md)): Used inside a `<dav:propstat>` response element to avoid repeatedly enumerating the internal members of multiple bindings to the same collection.
### Redirection messages
- `300 Multiple Choices`: The request has more than one possible response. The user agent or user should choose one of them. (There is no standardized way of choosing one of the responses, but [HTML](HTML.md) links to the possibilities are recommended so the user can pick.)
- `301 Moved Permanently`: The [URL](URL.md) of the requested resource has been changed permanently. The new [URL](URL.md) is given in the response.
- `302 Found`: This response code means that the URI of requested resource has been changed temporarily. Further changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.
- `303 See Other`: The server sent this response to direct the client to get the requested resource at another URI with a GET request.
- `304 Not Modified`: This is used for caching purposes. It tells the client that the response has not been modified, so the client can continue to use the same cached version of the response.
- `307 Temporary Redirect`: The server sends this response to direct the client to get the requested resource at another URI with the same method that was used in the prior request. This has the same semantics as the 302 Found HTTP response code, with the exception that the user agent must not change the HTTP method used: if a POST was used in the first request, a POST must be used in the second request.
- `308 Permanent Redirect`: This means that the resource is now permanently located at another URI, specified by the `Location` HTTP Response header. This has the same semantics as the `301 Moved Permanently` HTTP response code, with the exception that the user agent must not change the HTTP method used: if a POST was used in the first request, a POST must be used in the second request.
### Client error messages
- `400 Bad Request`: The server cannot or will not process the request due to something that is perceived to be a client error (e.g., malformed request syntax, invalid request message framing, or deceptive request routing).
- `401 Unauthorized`: Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.
- `403 Forbidden`: The client does not have access rights to the content; that is, it is unauthorized, so the server is refusing to give the requested resource. Unlike `401 Unauthorized`, the client's identity is known to the server.
- `404 Not Found`: The server cannot find the requested resource. In the browser, this means the [URL](URL.md) is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of `403 Forbidden` to hide the existence of a resource from an unauthorized client. This response code is probably the most well known due to its frequent occurrence on the web.
- `405 Method Not Allowed`: The request method is known by the server but is not supported by the target resource. For example, an API may not allow calling DELETE to remove a resource.
- `406 Not Acceptable`: This response is sent when the web server, after performing server-driven content negotiation, doesn't find any content that conforms to the criteria given by the user agent.
- `408 Request Timeout`: This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection.
- `409 Conflict`: This response is sent when a request conflicts with the current state of the server.
- `410 Gone`: This response is sent when the requested content has been permanently deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.
- `411 Length Required`: Server rejected the request because the Content-Length header field is not defined and the server requires it.
- `412 Precondition Failed`: The client has indicated preconditions in its headers which the server does not meet.
- `413 Payload Too Large`: Request entity is larger than limits defined by server. The server might close the connection or return an Retry-After header field.
- `414 URI Too Long`: The URI requested by the client is longer than the server is willing to interpret.
- `415 Unsupported Media Type`: The media format of the requested data is not supported by the server, so the server is rejecting the request.
- `416 Range Not Satisfiable`: The range specified by the Range header field in the request cannot be fulfilled. It's possible that the range is outside the size of the target URI's data.
- `417 Expectation Failed`: This response code means the expectation indicated by the Expect request header field cannot be met by the server.
- `418 I'm a teapot`: The server refuses the attempt to brew coffee with a teapot.
- `421 Misdirected Request`: The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.
- `422 Unprocessable Content` ([WebDAV](../tools/WebDAV.md)): The request was well-formed but was unable to be followed due to semantic errors.
- `423 Locked` ([WebDAV](../tools/WebDAV.md)): The resource that is being accessed is locked.
- `424 Failed Dependency` ([WebDAV](../tools/WebDAV.md)): The request failed due to failure of a previous request.
- `425 Too Early Experimental`: Indicates that the server is unwilling to risk processing a request that might be replayed.
- `426 Upgrade Required`: The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an Upgrade header in a 426 response to indicate the required protocol(s).
- `428 Precondition Required`: The origin server requires the request to be conditional. This response is intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.
- `429 Too Many Requests`: The user has sent too many requests in a given amount of time ("rate limiting").
- `431 Request Header Fields Too Large`: The server is unwilling to process the request because its header fields are too large. The request may be resubmitted after reducing the size of the request header fields.
- `451 Unavailable For Legal Reasons`: The user agent requested a resource that cannot legally be provided, such as a web page censored by a government.
### Server error messages
- `500 Internal Server Error`: The server has encountered a situation it does not know how to handle.
- `501 Not Implemented`: The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are GET and HEAD.
- `502 Bad Gateway`: This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.
- `503 Service Unavailable`: The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This response should be used for temporary conditions and the Retry-After HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.
- `504 Gateway Timeout`: This error response is given when the server is acting as a gateway and cannot get a response in time.
- `505 HTTP Version Not Supported`: The HTTP version used in the request is not supported by the server.
- `506 Variant Also Negotiates`: The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.
- `507 Insufficient Storage` ([WebDAV](../tools/WebDAV.md)): The method could not be performed on the resource because the server is unable to store the representation needed to successfully complete the request.
- `508 Loop Detected` ([WebDAV](../tools/WebDAV.md)): The server detected an infinite loop while processing the request.
- `510 Not Extended`: Further extensions to the request are required for the server to fulfill it.
- `511 Network Authentication Required`: Indicates that the client needs to authenticate to gain network access.

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,52 @@
---
obj: concept
wiki: https://en.wikipedia.org/wiki/MQTT
website: https://mqtt.org/
---
# MQTT
MQTT is an OASIS standard messaging protocol for the Internet of Things (IoT). It is designed as an extremely lightweight publish/subscribe messaging transport that is ideal for connecting remote devices with a small code footprint and minimal network bandwidth. MQTT today is used in a wide variety of industries, such as automotive, manufacturing, telecommunications, oil and gas, etc.
## Concepts
### 1. **Publisher-Subscriber Model:**
MQTT follows a publish-subscribe communication model, where clients (publishers) send messages to topics, and other clients (subscribers) receive messages from those topics.
### 2. **Broker:**
The MQTT broker is a server that receives published messages from clients and delivers them to the appropriate subscribers.
### 3. **Topics:**
Topics act as channels or categories to which messages are published. Subscribers express interest in specific topics to receive relevant messages.
## MQTT Components
### 1. **Publisher:**
- A client that sends messages to a specific topic.
### 2. **Subscriber:**
- A client that expresses interest in a specific topic and receives messages published to that topic.
### 3. **Broker:**
- The server that handles message routing between publishers and subscribers.
## Topics and Subscriptions
Each message is inside a topic allowing for organizing them.
### 1. **Topics:**
- Hierarchical and structured, topics enable flexible message routing.
### 2. **Wildcards:**
- MQTT supports wildcards (`+` and `#`) for subscribing to multiple topics.
## Real-world Use Case
### 1. **IoT (Internet of Things):**
- MQTT is widely used in IoT scenarios for efficient communication between devices.
### 2. **Home Automation:**
- Smart homes leverage MQTT for controlling and monitoring devices. For example zigbee2mqtt with [Home Assistant](../applications/web/Home%20Assistant.md).
### 3. **Messaging in Remote Locations:**
- Suitable for scenarios with low bandwidth, high latency, or unreliable connections.
## Docker Compose
To use MQTT with mosquitto as a broker:
```yaml
version: "3"
mqtt:
image: eclipse-mosquitto:2.0
restart: unless-stopped
volumes:
- "./mosquitto:/mosquitto"
ports:
- "1883:1883"
```

View file

@ -0,0 +1,80 @@
---
obj: concept
wiki: https://en.wikipedia.org/wiki/Network_Time_Protocol
rfc: https://datatracker.ietf.org/doc/html/rfc5905
---
# Network Time Protocol
The Network Time Protocol (NTP) is a networking protocol for clock synchronization between computer systems over packet-switched, variable-latency data networks. In operation since before 1985, NTP is one of the oldest Internet protocols in current use. NTP was designed by David L. Mills of the University of Delaware. One good implementation is OpenNTPD by [OpenBSD](../bsd/OpenBSD.md).
NTP is intended to synchronize all participating computers to within a few milliseconds of Coordinated Universal Time (UTC). It uses the intersection algorithm, a modified version of Marzullo's algorithm, to select accurate time servers and is designed to mitigate the effects of variable network latency. NTP can usually maintain time to within tens of milliseconds over the public Internet, and can achieve better than one millisecond accuracy in local area networks under ideal conditions. Asymmetric routes and network congestion can cause errors of 100 ms or more.
## Clock strata
NTP uses a hierarchical, semi-layered system of time sources. Each level of this hierarchy is termed a stratum and is assigned a number starting with zero for the reference clock at the top. A server synchronized to a stratum n server runs at stratum n + 1. The number represents the distance from the reference clock and is used to prevent cyclical dependencies in the hierarchy. Stratum is not always an indication of quality or reliability; it is common to find stratum 3 time sources that are higher quality than other stratum 2 time sources. A brief description of strata 0, 1, 2 and 3 is provided below.
- Stratum 0
These are high-precision timekeeping devices such as atomic clocks, GNSS (including GPS) or other radio clocks, or a PTP-synchonized clock. They generate a very accurate pulse per second signal that triggers an interrupt and timestamp on a connected computer. Stratum 0 devices are also known as reference clocks. NTP servers cannot advertise themselves as stratum 0. A stratum field set to 0 in NTP packet indicates an unspecified stratum.
- Stratum 1
These are computers whose system time is synchronized to within a few microseconds of their attached stratum 0 devices. Stratum 1 servers may peer with other stratum 1 servers for sanity check and backup. They are also referred to as primary time servers.
- Stratum 2
These are computers that are synchronized over a network to stratum 1 servers. Often a stratum 2 computer queries several stratum 1 servers. Stratum 2 computers may also peer with other stratum 2 computers to provide more stable and robust time for all devices in the peer group.
- Stratum 3
These are computers that are synchronized to stratum 2 servers. They employ the same algorithms for peering and data sampling as stratum 2, and can themselves act as servers for stratum 4 computers, and so on.
The upper limit for stratum is 15; stratum 16 is used to indicate that a device is unsynchronized. The NTP algorithms on each computer interact to construct a BellmanFord shortest-path spanning tree, to minimize the accumulated round-trip delay to the stratum 1 servers for all the clients.
In addition to stratum, the protocol is able to identify the synchronization source for each server in terms of a reference identifier (refid).
| Refid | Clock Source |
| ----- | ------------------------------------------------------------------------ |
| GOES | Geosynchronous Orbit Environment Satellite |
| GPS | Global Positioning System |
| GAL | Galileo Positioning System |
| PPS | Generic pulse-per-second |
| IRIG | Inter-Range Instrumentation Group |
| WWVB | LF Radio WWVB Fort Collins, Colorado 60 kHz |
| DCF | LF Radio DCF77 Mainflingen, DE 77.5 kHz |
| HBG | LF Radio HBG Prangins, HB 75 kHz (ceased operation) |
| MSF | LF Radio MSF Anthorn, UK 60 kHz |
| JJY | LF Radio JJY Fukushima, JP 40 kHz, Saga, JP 60 kHz |
| LORC | MF Radio Loran-C station, 100 kHz |
| TDF | MF Radio Allouis, FR 162 kHz |
| CHU | HF Radio CHU Ottawa, Ontario |
| WWV | HF Radio WWV Fort Collins, Colorado |
| WWVH | HF Radio WWVH Kauai, Hawaii |
| NIST | NIST telephone modem |
| ACTS | NIST telephone modem |
| USNO | USNO telephone modem |
| PTB | German PTB time standard telephone modem |
| MRS | (Informal) Multi Reference Sources |
| GOOG | (Unofficial) Google Refid used by google NTP servers as time4.google.com |
## Timestamps
The 64-bit binary fixed-point timestamps used by NTP consist of a 32-bit part for seconds and a 32-bit part for fractional second, giving a time scale that rolls over every 232 seconds (136 years) and a theoretical resolution of 232 seconds (233 picoseconds). NTP uses an epoch of January 1, 1900. Therefore, the first rollover occurs on February 7, 2036.
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:
${\displaystyle \theta ={\frac {(t_{1}-t_{0})+(t_{2}-t_{3})}{2}},}$
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.
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.
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.
Accurate synchronization is achieved when both the incoming and outgoing routes between the client and the server have symmetrical nominal delay. If the routes do not have a common nominal delay, a systematic bias exists of half the difference between the forward and backward travel times.

View file

@ -0,0 +1,21 @@
---
obj: concept
wiki: https://en.wikipedia.org/wiki/OSI_model
---
# OSI Model
The Open Systems Interconnection (OSI) model is a conceptual framework that standardizes the functions of a telecommunication or computing system into seven abstraction layers. Developed by the International Organization for Standardization (ISO), the OSI model facilitates communication and interoperability between different systems and devices by defining specific functions at each
layer.
#🐇 #notnow
## Layers
| Layer | Name | Common Protocols |
| ----- | ------------ | ----------------------------------------------- |
| 7 | Application | [HTTP](HTTP.md), [FTP](FTP.md), [SMTP](SMTP.md) |
| 6 | Presentation | SSL/TLS, [ASCII](../files/ASCII.md) |
| 5 | Session | Sockets |
| 4 | Transport | [TCP](TCP.md), [UDP](UDP.md), [QUIC](QUIC.md) |
| 3 | Network | IP, ICMP |
| 2 | Data Link | MAC, ARP |
| 1 | Physical | RJ45, WLAN, Bluetooth |

View file

@ -0,0 +1,32 @@
---
obj: concept
wiki: https://en.wikipedia.org/wiki/Power_over_Ethernet
---
# Power over Ethernet (POE)
Power over Ethernet (PoE) is a technology that enables the transmission of electrical power alongside data over standard Ethernet cables. This eliminates the need for separate power cables, simplifying the deployment of network devices and providing greater flexibility in various applications.
## How PoE Works
PoE works by integrating power and data into a single network cable. Standard Ethernet cables, such as Cat5e or Cat6, contain multiple twisted pairs of wires. In a PoE setup, one or more of these pairs are used to carry electrical power, while the remaining pairs transmit data.
The power is injected into the Ethernet cable by a PoE-enabled switch or a midspan (PoE injector) device. At the receiving end, the powered device (PD), such as a network camera or IP phone, separates the power from the data for use.
## PoE Standards
There are several PoE standards, each specifying different power levels and features. The most common standards include:
- **IEEE 802.3af**: Also known as PoE, this standard delivers up to 15.4 watts of DC power to each device.
- **IEEE 802.3at**: Commonly referred to as PoE+, this standard provides higher power levels, delivering up to 30 watts.
- **IEEE 802.3bt**: Also known as Ultra PoE, this standard offers even higher power levels, supporting up to 60 or 100 watts, depending on the device type.
## Applications of PoE
PoE is widely used in various industries and applications, including:
- **IP Cameras**: PoE simplifies the installation of surveillance cameras by providing power and data over a single cable.
- **VoIP Phones**: Many Voice over Internet Protocol (VoIP) phones are PoE-enabled, eliminating the need for additional power adapters.
- **Wireless Access Points (WAPs)**: PoE facilitates the deployment of wireless networks by powering access points through Ethernet cables.
- **Smart Lighting**: PoE is increasingly used for powering and controlling smart lighting systems in commercial and residential buildings.
- **Internet of Things (IoT) Devices**: PoE can power a variety of IoT devices, such as sensors and actuators, in a cost-effective and efficient manner.
## Advantages of PoE
- **Simplified Installation**: With PoE, there's no need for separate power cables, reducing installation time and costs.
- **Flexibility**: PoE provides flexibility in device placement since it is not limited by the proximity to power outlets.
- **Centralized Power Management**: PoE-enabled switches can centrally manage and monitor the power consumption of connected devices.
- **Cost-Effective**: PoE eliminates the need for additional electrical infrastructure, saving on installation and maintenance costs.

View file

@ -0,0 +1,29 @@
---
obj: concept
wiki: https://wikipedia.org/wiki/QUIC
rfc: https://datatracker.ietf.org/doc/html/rfc9000
website: https://quicwg.org
---
# QUIC
QUIC is a transport layer protocol developed by Google to improve the performance of web applications by reducing latency. It operates over the User Datagram Protocol ([UDP](UDP.md)) and is designed to provide a more efficient alternative to the traditional Transmission Control Protocol ([TCP](TCP.md)).
## Key Features
### 1. **Multiplexing:**
- QUIC supports multiplexing multiple streams of data within a single connection. This enables parallel processing of data, reducing latency and improving overall performance.
### 2. **Low Latency:**
- QUIC is designed to minimize connection establishment and data transfer latency. It achieves this by combining the initial connection handshake with the first data transfer.
### 3. **Adaptive Congestion Control:**
- QUIC includes built-in congestion control mechanisms that adapt to network conditions, optimizing data transfer rates while avoiding congestion.
### 4. **Connection Migration:**
- QUIC allows for seamless connection migration between different network interfaces, such as switching between Wi-Fi and cellular data, without disrupting the user experience.
### 5. **Forward Error Correction:**
- QUIC incorporates forward error correction (FEC) to recover lost or corrupted packets without the need for retransmission. This enhances reliability in unreliable network conditions.
## QUIC Components
### 1. **QUIC Transport:**
- Handles connection establishment, multiplexing, and reliable, in-order delivery of data.
### 2. **QUIC Crypto:**
- Responsible for securing the QUIC connection using encryption and authentication. It is based on TLS (Transport Layer Security).
### 3. **QUIC Loss Detection and Congestion Control:**
- Manages congestion control and packet loss recovery to ensure optimal data transfer rates.

View file

@ -0,0 +1,31 @@
---
aliases: ["Simple Mail Transfer Protocol"]
obj: concept
wiki: https://en.wikipedia.org/wiki/Simple_Mail_Transfer_Protocol
rfc: https://datatracker.ietf.org/doc/html/rfc5321
---
# Simple Mail Transfer Protocol
Simple Mail Transfer Protocol (SMTP) is a protocol used for the transmission of electronic mail ([email](eMail.md)) over a computer network. SMTP is a text-based protocol that facilitates the sending and receiving of [emails](../../../Server/eMails.md) between servers and is a fundamental component of [email](eMail.md) communication on the internet.
## Key Concepts
### 1. **Message Transfer:**
- SMTP is primarily responsible for the transfer of [email](eMail.md) messages between a sender's [email](eMail.md) client (Mail User Agent - MUA) and a recipient's [email](eMail.md) server (Mail Submission Agent - MSA) and between [email](eMail.md) servers (Mail Transfer Agent - MTA).
### 2. **Client-Server Interaction:**
- SMTP operates on a client-server model, where an [email](eMail.md) client sends messages to an [email](eMail.md) server for delivery. Servers communicate with each other to relay messages.
### 3. **Port Number:**
- SMTP uses port `25` for unencrypted communication. Port `587` is commonly used for secure communication with Transport Layer Security (TLS).
### 4. **Commands and Responses:**
- SMTP communication involves a series of commands and responses between the client and server. Common commands include `HELO` (client identification), `MAIL FROM` (specify sender address), `RCPT TO` (specify recipient address), `DATA` (begin message data input), and `QUIT` (terminate the session).
### 5. **Relaying:**
- SMTP allows for the relaying of messages between different [email](eMail.md) servers, facilitating the delivery of [emails](../../../Server/eMails.md) across different domains.
## SMTP Operation
### 1. **Handshake:**
- The SMTP session begins with a handshake, where the client identifies itself to the server using the `HELO` or `EHLO` (extended hello) command.
### 2. **Sender and Recipient Specification:**
- The client specifies the sender's address using the `MAIL FROM` command and the recipient's address using the `RCPT TO` command.
### 3. **Message Transmission:**
- The actual message is transmitted using the `DATA` command, allowing the client to send the message body and headers.
### 4. **Session Termination:**
- The session concludes with the `QUIT` command, indicating the end of the SMTP communication.

View file

@ -0,0 +1,35 @@
---
obj: concept
wiki: https://en.wikipedia.org/wiki/Transmission_Control_Protocol
rfc: https://datatracker.ietf.org/doc/html/rfc9293
---
# TCP
The Transmission Control Protocol (TCP) is one of the core protocols of the Internet Protocol (IP) suite. It operates at the transport layer and provides reliable, connection-oriented communication between devices on a network. TCP ensures the ordered and error-checked delivery of data, making it suitable for applications where accuracy and reliability are paramount.
## Key Characteristics
### 1. **Connection-Oriented:**
- TCP establishes a connection between two devices before data exchange. This connection is maintained throughout the communication session.
### 2. **Reliability:**
- TCP ensures the reliable delivery of data by using acknowledgments and retransmissions. If a segment is not acknowledged, it is retransmitted to ensure data integrity.
### 3. **Ordered Data Delivery:**
- Data sent over a TCP connection is delivered in the same order in which it was sent. This is achieved through sequence numbers assigned to each segment.
### 4. **Flow Control:**
- TCP incorporates flow control mechanisms to prevent a fast sender from overwhelming a slow receiver. It uses a sliding window mechanism to manage the flow of data.
### 5. **Full-Duplex Communication:**
- TCP supports full-duplex communication, allowing data to be sent and received simultaneously by both communicating devices.
## TCP Operation
### 1. **Three-Way Handshake:**
- TCP begins with a three-way handshake to establish a connection. This involves SYN (synchronize), SYN-ACK (synchronize acknowledgment), and ACK (acknowledge) segments.
### 2. **Data Transfer:**
- Once the connection is established, data can be transferred between the devices. Each segment is acknowledged, and retransmissions occur in case of lost or corrupted data.
### 3. **Connection Termination:**
- TCP ensures a reliable connection termination through a four-way handshake involving FIN (finish) and ACK segments.
## TCP Header
The TCP header includes various fields, including:
- **Source and Destination Port Numbers:** Identify the source and destination applications on the devices.
- **Sequence Number and Acknowledgment Number:** Manage the ordering and acknowledgment of data segments.
- **Window Size:** Specifies the size of the sender's receive window for flow control.
- **Checksum:** Ensures the integrity of the TCP header and data.

View file

@ -0,0 +1,7 @@
---
obj: concept
website: https://tailwindcss.com
---
# Tailwind CSS
#wip #🐇

View file

@ -0,0 +1,41 @@
---
obj: concept
wiki: https://wikipedia.org/wiki/User_Datagram_Protocol
rfc: https://datatracker.ietf.org/doc/html/rfc768
---
# UDP
The User Datagram Protocol (UDP) is a connectionless transport layer protocol in the Internet Protocol (IP) suite. Unlike Transmission Control Protocol ([TCP](TCP.md)), UDP does not establish a connection before sending data and does not guarantee the delivery of data. Instead, it provides a simple and lightweight mechanism for transmitting data quickly.
## Key Characteristics
### 1. **Connectionless:**
- UDP is connectionless, meaning it does not establish a connection before sending data. Each UDP packet is treated independently.
### 2. **Unreliable:**
- UDP does not guarantee the delivery of data, and there is no mechanism for retransmission if packets are lost or arrive out of order.
### 3. **Low Overhead:**
- UDP has minimal overhead compared to [TCP](TCP.md), making it suitable for applications where speed and low latency are prioritized over reliability.
### 4. **Broadcast and Multicast Support:**
- UDP supports broadcast and multicast communication, allowing a single UDP packet to be sent to multiple recipients simultaneously.
### 5. **No Flow Control:**
- UDP does not implement flow control mechanisms, so it may send data at a rate that the recipient cannot handle.
## Use Cases
### 1. **Real-Time Applications:**
- UDP is commonly used in real-time applications where low latency is critical, such as online gaming, video conferencing, and voice over IP (VoIP).
### 2. **Streaming Media:**
- Streaming services often use UDP for delivering media content due to its speed and the ability to handle occasional packet loss without severe impact.
### 3. **Network Monitoring:**
- UDP is used in network monitoring tools and protocols, such as the Domain Name System ([DNS](DNS.md)) and Simple Network Management Protocol (SNMP).
### 4. **IoT Devices:**
- Internet of Things (IoT) devices may use UDP for lightweight communication, especially when reliability is not the primary concern.
## UDP Header
The UDP header includes the following fields:
- **Source and Destination Port Numbers:** Identify the source and destination applications on the devices.
- **Length:** Specifies the length of the UDP header and data.
- **Checksum:** Provides a simple error-checking mechanism for the UDP header and data.
## Comparison with [TCP](TCP.md)
- **Reliability:** UDP is unreliable and does not guarantee the delivery of data, while TCP provides reliable, connection-oriented communication.
- **Overhead:** UDP has lower overhead than [TCP](TCP.md) since it lacks features such as connection setup, acknowledgment, and flow control.
- **Use Cases:** UDP is suitable for real-time applications and scenarios where low latency is crucial, while [TCP](TCP.md) is preferred for applications requiring reliable data transfer.

View file

@ -0,0 +1,48 @@
---
obj: concept
source: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL
---
# 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_.
# Syntax
URL: `http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument`
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:
| Scheme | Description | |
| ----------- | ------------------------------------------------------------------------------------------------- | --- |
| data | [Data URLs](Data%20URLs.md) | |
| file | Host-specific file names | |
| ftp | [File Transfer Protocol](https://developer.mozilla.org/en-US/docs/Glossary/FTP) | |
| http/https | [Hyper text transfer protocol (Secure)](https://developer.mozilla.org/en-US/docs/Glossary/HTTP) | |
| javascript | URL-embedded JavaScript code | |
| mailto | Electronic mail address | |
| ssh | Secure shell | |
| tel | telephone | |
| urn | Uniform Resource Names | |
| view-source | Source code of the resource | |
| 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.
## 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.
## 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.
## 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.
## 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.

View file

@ -0,0 +1,69 @@
---
obj: concept
wiki: https://en.wikipedia.org/wiki/Wake-on-LAN
arch-wiki: https://wiki.archlinux.org/title/Wake-on-LAN
---
# Wake on LAN
Wake-on-LAN (WoL or WOL) is an Ethernet or Token Ring computer networking standard that allows a computer to be turned on or awakened from sleep mode by a network message.
## Magic Packet
The magic packet is a frame that is most often sent as a broadcast and that contains anywhere within its payload 6 bytes of all 255 (FF FF FF FF FF FF in hexadecimal), followed by sixteen repetitions of the target computer's 48-bit MAC address, for a total of 102 bytes.
Since the magic packet is only scanned for the string above, and not actually parsed by a full protocol stack, it could be sent as payload of any network- and transport-layer protocol, although it is typically sent with [UDP](UDP.md).
### Creating & sending magic packet
There exists various software for creating magic packets. This is an example in [Python](../programming/languages/Python.md)
```python
import socket
def wol(lunaMacAddress: bytes):
s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
s.setsockopt(socket.SOL_SOCKET, socket.SO_BROADCAST, 1)
magic = b'\xff' * 6 + lunaMacAddress * 16
s.sendto(magic, ('<broadcast>', 7))
if __name__ == '__main__':
# pass to wol the mac address of the Ethernet port of the appliance to wakeup
wol(b'\x00\x15\xB2\xAA\x5B\x00')
```
## Setup
WOL must first be enabled in the UEFI / BIOS of the computer.
### Setup on [Linux](../linux/Linux.md)
To check and enable WOL on [Linux](../linux/Linux.md) the tool `ethtool` is used.
#### Check if WoL is enabled:
```
$ ethtool <interface> | grep Wake-on
Supports Wake-on: pumbag
Wake-on: d
```
If `Supports Wake-on:` only shows `d` WOL is not supported on that interface.
#### Enable WoL with this command:
```
ethtool -s <interface> wol g
```
To enable WOL persistently one can use [Systemd](../linux/Systemd.md):
File: `/etc/systemd/system/wol@.service`
```toml
[Unit]
Description=Wake-on-LAN for %i
Requires=network.target
After=network.target
[Service]
ExecStart=/usr/bin/ethtool -s %i wol g
Type=oneshot
[Install]
WantedBy=multi-user.target
```
Then activate this new service by starting `wol@<interface>.service`.

View file

@ -0,0 +1,23 @@
---
obj: concept
wiki: https://en.wikipedia.org/wiki/WebSocket
rfc: https://datatracker.ietf.org/doc/html/rfc6455
website: https://websockets.spec.whatwg.org
---
# WebSocket
WebSockets provide a bidirectional communication channel over a single, long-lived connection. This enables real-time, low-latency data exchange between a client and a server.
## WebSocket Protocol
### 1. **WebSocket Handshake:**
The WebSocket handshake is an [HTTP](HTTP.md)-based protocol that establishes a connection between the client and server. Once established, the connection switches to the WebSocket protocol.
### 2. **WebSocket Frames:**
Messages in WebSockets are sent as frames. Frames can be text, binary, or control frames used for connection management.
## Usage and Benefits
### 1. **Real-Time Applications:**
WebSockets are ideal for real-time applications like live chats, online gaming, financial trading, and collaborative tools.
### 2. **Reduced Latency:**
The persistent connection minimizes latency compared to traditional [HTTP](HTTP.md), making WebSockets suitable for applications requiring low-latency communication.
### 3. **Efficient Data Transfer:**
WebSockets use a compact binary frame format, reducing the overhead associated with text-based protocols.

View file

@ -0,0 +1,12 @@
---
obj: concept
wiki: https://en.wikipedia.org/wiki/Webhook
---
# Webhook
A webhook in web development is a method of augmenting or altering the behavior of a web page or web application with custom callbacks. These callbacks may be maintained, modified, and managed by third-party users and developers who may not necessarily be affiliated with the originating website or application.
The format is usually [JSON](../files/JSON.md). The request is done as a [HTTP](HTTP.md) POST request.
## Function
Webhooks are "user-defined [HTTP](HTTP.md) callbacks". They are usually triggered by some event, such as pushing code to a repository, a comment being posted to a blog and many more use cases. When that event occurs, the source site makes an [HTTP](HTTP.md) request to the [URL](URL.md) configured for the webhook. Users can configure them to cause events on one site to invoke behavior on another. One example would be sending [Discord](../applications/communication/Discord.md) messages on specific events.

View file

@ -0,0 +1,37 @@
---
obj: concept
wiki: https://en.wikipedia.org/wiki/Email
---
# eMail
Email, short for electronic mail, is a widely used method of exchanging digital messages over the Internet. It has become an integral part of personal and business communication, enabling the rapid and efficient exchange of information.
## Key Components
### 1. **Email Address:**
- An email address uniquely identifies an individual or entity in the email system. It typically consists of a local part (username) and a [domain](Domain.md) part (e.g., username@example.com).
### 2. **Mail User Agent (MUA):**
- The Mail User Agent is an email client or application used by individuals to compose, send, receive, and manage emails. Examples include Outlook, [Thunderbird](../applications/communication/Thunderbird.md), and [Gmail](../applications/communication/Gmail.md).
### 3. **Mail Transfer Agent (MTA):**
- The Mail Transfer Agent is responsible for routing and transferring emails between servers. Common MTAs include Sendmail, Postfix, and Microsoft Exchange.
### 4. **Mail Delivery Agent (MDA):**
- The Mail Delivery Agent stores incoming emails in the recipient's mailbox. Examples include Dovecot and Courier.
### 5. **Protocols:**
- **[SMTP](SMTP.md) (Simple Mail Transfer Protocol):** Used for sending and relaying emails between servers.
- **POP3 (Post Office Protocol 3):** Retrieves emails from a server and typically deletes them from the server after retrieval.
- **IMAP (Internet Message Access Protocol):** Allows users to access and manage emails on the server, supporting multiple devices.
### 6. **Email Headers:**
- Email headers contain metadata about the message, including sender, recipient, subject, date, and other routing information.
### 7. **Attachments:**
- Emails can include attachments, such as documents, images, or other files, which are transmitted along with the message.
## Email Workflow
1. **Composition:**
- The sender uses an MUA to compose an email, addressing it to one or more recipients.
2. **Sending:**
- The MUA uses [SMTP](SMTP.md) to send the email to the recipient's email server (MTA).
3. **Routing:**
- The recipient's MTA receives the email, checks the recipient's address, and relays it to the appropriate MDA.
4. **Delivery:**
- The MDA stores the email in the recipient's mailbox, making it accessible for retrieval.
5. **Retrieval:**
- The recipient's MUA retrieves emails from the server using POP3 or IMAP.

View file

@ -0,0 +1,23 @@
---
obj: meta/collection
---
# i2p
```dataview
table website, category, status from "knowledge/technology/internet/websites/i2p" where website != null
```
# onion
```dataview
table website, category, status from "knowledge/technology/internet/websites/onion" where website != null
```
# clear-web
```dataview
table website, category, status from "knowledge/technology/internet/websites/clearnet" where website != null
```
# From Notes
```dataview
table website from "/" where website != null
```

View file

@ -0,0 +1,9 @@
---
obj: website
website: https://www.amazon.de
wiki: https://en.wikipedia.org/wiki/Amazon_(company)
category: shop
---
# Amazon
Marketplace.

View file

@ -0,0 +1,16 @@
---
obj: website
website: https://www.apple.com
wiki: https://en.wikipedia.org/wiki/Apple_Inc.
category: company
---
# Apple
Apple Inc. is an American multinational technology company.
## Products
- MacBook
- iPhone
- Apple Watch
- iPad
- [macOS](../../../macos/macOS.md)

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,8 @@
---
obj: website
website: https://chat.openai.com/
category: service
---
# ChatGPT
Free LLM AI by OpenAI

View file

@ -0,0 +1,8 @@
---
obj: website
website: https://www.cloudflare.com
category: server
---
# Cloudflare
Network and Hosting Provider

View file

@ -0,0 +1,10 @@
---
obj: website
website: https://www.crunchyroll.com/de
category: content
---
# Crunchyroll
Anime Streaming Site
This site is supported by [yt-dlp](../../../applications/media/yt-dlp.md)

View file

@ -0,0 +1,8 @@
---
obj: website
website: https://www.fandom.com/
category: information
---
# Fandom
Wiki pages for every fictional universe created

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,8 @@
---
obj: website
website: https://www.instant-gaming.com/
category: shop
---
# Instant Gaming
Gaming Shop

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,13 @@
---
obj: website
website: https://www.microsoft.com
category: company
---
# Microsoft
Technology Company
## Products
- Microsoft 365
- Xbox
- [Windows](../../../windows/Windows.md)

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,8 @@
---
obj: website
website: https://myanimelist.net/
category: information
---
# MyAnimeList
Anime Watchtime Tracker / Lists

View file

@ -0,0 +1,8 @@
---
obj: website
website: https://www.netflix.com/browse
category: content
---
# Netflix
Netflix Media Streaming

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,8 @@
---
obj: website
website: https://odysee.com
category: social
---
# Odysee
Odysee is a video platform based on the LBRY protocol

View file

@ -0,0 +1,8 @@
---
obj: website
website: https://www.openstreetmap.org
category: service
---
# OpenStreetMap
Open source world map

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,9 @@
---
obj: website
website: https://www.reddit.com
wiki: https://en.wikipedia.org/wiki/Reddit
category: social
---
# Reddit
Reddit is an American social news aggregation, content rating, and discussion website. Registered users (commonly referred to as "redditors") submit content to the site such as links, text posts, images, and videos, which are then voted up or down by other members. Posts are organized by subject into user-created boards called "communities" or "subreddits".

View file

@ -0,0 +1,8 @@
---
obj: website
website: https://sendgrid.com
category: server
---
# SendGrid
Twilio SendGrid Mail Service

View file

@ -0,0 +1,8 @@
---
obj: website
website: https://soundcloud.com
category: content
---
# SoundCloud
SoundCloud Music Sharing Site

View file

@ -0,0 +1,8 @@
---
obj: website
website: https://www.steamgriddb.com
category: images
---
# SteamGridDB
Community Steam Icons

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,11 @@
---
obj: website
website: https://www.youtube.com
category: social
---
# YouTube
YouTube Video Platform
## Apps for YouTube
- [NewPipe](../../../applications/media/NewPipe.md)

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,8 @@
---
obj: website
website: https://nsw2u.com
category: content
---
# nsw2u
Nintendo Switch ROMs

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,9 @@
---
obj: website
website: http://tnaefzkcnhryeusi7hdpqujqiqmnbtah3dmjcg3gvezohunjuxbq.b32.i2p
category: market
status: down
---
# AlphaBay
Darknet market by Alpha01 & DeSnake

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,9 @@
---
obj: website
website: http://cnbiamvqy3z36k756qjiwlfxeiocrl2ksgfl4ex45b74qlo3gcvq.b32.i2p
category: market
status: down
---
# Cannabia
Cannabis focused darknet market

View file

@ -0,0 +1,9 @@
---
obj: website
website: http://pnu4kc43f4aemrz4t3wk6b5ebtsx45js45us7xhpkrqahxqs4jdq.b32.i2p
category: board
status: down
---
# Coffeechan
Chat

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,8 @@
---
obj: website
website: http://dreadytofatroptsdj6io7l3xptbet6onoyno2yv7jicoxknyazubrad.onion
category: board
---
# Dread
Dread forum

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,8 @@
---
obj: website
website: http://megalzwink435kangsseahebpbp3teedi4jjt64ne2g6d3oqy3qlweid.onion
category: link-registry
---
# MegaLinks
[Tor](../../../tools/Tor.md) link list

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long