recursal/MDN huggingface dataset:
Using images in HTML
====================

The HTML `<img>` element lets you embed images into an HTML document, while the `<picture>` element enables responsive images. In this guide you'll find links to resources that deal with adding images to websites.

References
----------

These articles cover some of the HTML elements and CSS properties that are used to control how images are displayed on the web.

### HTML

`<img>`

The **HTML `<img>` element** is used to embed an image in a webpage. It supports a wide range of attributes that control how the image behaves and allows you to add important information like `alt` text for people who don't see the image.

`<picture>`

The **HTML `<picture>` element** contains zero or more `<source>` elements and one `<img>` element which provides versions of an image for different display/device scenarios. The browser considers each child `<source>` element and chooses the best match among them.

### CSS

`object-fit`

The **`object-fit`** CSS property sets how the content of a replaced element, such as an `<img>` or `<video>`, should be resized to fit its container.

`object-position`

The **`object-position`** CSS property specifies the alignment of content in a selected replaced element within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.

`background-image`

The **`background-image`** CSS property sets one or more background images for an element.

Guides
------

These articles provide guidance on selecting and configuring image types.

Image file type and format guide

A guide to the various image file types commonly supported by web browsers including details about their individual use cases, capabilities, and compatibility factors. Additionally, this article provides guidance for selecting the best image file type for a given situation.

Including `width` and `height` attributes helps avoid jank

This changes how browsers load images so their aspect ratios are calculated by the browser early on and can later be used to reserve the display size of an image before it's loaded.

Other topics
------------

Related topics that may be of interest.

Learn HTML: Responsive Images

In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them.
Using audio and video in HTML
=============================

The HTML `<audio>` and `<video>` elements let you embed audio and video content into a web page. More than that, their underlying interfaces are the key to manipulating and playing back media in general, even offscreen. In this guide, we'll review the media elements and how to use them in HTML content.

**Note:** This guide is a planned update to integrate content from various scattered places on MDN into one cohesive document or document set. The work is not yet scheduled but hopefully will come soon. For now, some of the key information you may be looking for can be found in our Learning Area article on the topic.

We don't have a particularly good guide to using these objects offscreen at this time, although Audio and video manipulation may be a good start.

See also
--------

* Web media technologies
Guide to streaming audio and video
==================================

In this guide, we'll examine the techniques used to stream audio and/or video media on the web, and how you can optimize your code, your media, your server, and the options you use while performing the streaming to bring out the best quality and performance possible.

Protocols
---------

In addition to the configuration of the server and the streaming code, there are sometimes special protocols which can be used to optimize performance.

### HTTPS Live Streaming

**HTTPS Live Streaming** (**HLS**) is a protocol developed by Apple and supported by Safari on all of their platforms. HLS may also be supported in other environments, although in some cases this support is conditional.

For example, because many websites' mobile-specific content assume that mobile browsers support HLS, Firefox for Android does as well, in order to avoid strange compatibility errors from occurring due to this assumption being incorrect. The desktop version of Firefox, however, does not support HLS.

HLS uses playlists to allow the user to not only select the media to stream, but also to choose among versions or forms of the same media. For example, HLS lets the server stream a video with multiple audio streams which the user can choose from, in order to hear their own language. Additionally, forms of the stream can be provided which are optimized for different network conditions. In this way, live streams can be made flexible and highly performant.

As of mid-2017, HLS has been standardized as RFC 8216.

See also
--------

* Web media technologies
* Guide to media types and formats on the web
* `<audio>` and `<video>`
Partitioned: All third-party storage access requests
====================================================

Message
-------

Firefox:
```

CookiePartitionedForeign=Partitioned cookie
or storage access was provided to "<URL>" because it is loaded in the
third-party context and storage partitioning is enabled.
```

What went wrong?
----------------

 A request to access cookies or storage was *partitioned* because it
 came from a third-party (a different origin) and
 dynamic state partitioning is enabled.

 With Dynamic State Partitioning enabled, Firefox provides embedded resources with a
 separate storage bucket for every top-level website. Embedded third-parties may
 request access to the top-level storage bucket via the Storage Access API.
 You can also disable Dynamic State Partitioning with the
 `network.cookie.cookieBehavior` pref.

See also
--------

* State Partitioning
Blocked: Custom cookie permission
=================================

Message
-------

Firefox:
```

CookieBlockedByPermission=Request to access cookies or storage on "X" was blocked because of custom cookie permission.
```

What went wrong?
----------------

A request to access cookies or storage was blocked because there's a custom user-defined permission set.

The permission can be changed or removed by:

* Going to *Preferences > Content Blocking > Cookies and Site Data*
* Clicking on the *Manage Permissions* button and updating the listed exceptions
See also
--------

* Content blocking on support.mozilla.org
Blocked: All third-party storage access requests
================================================

Message
-------

Firefox:
```

CookieBlockedForeign=Request to access cookies or storage on "X" was blocked because we are blocking all third-party storage access requests and content blocking is enabled.
```

What went wrong?
----------------

A request to access cookies or storage was blocked because it came from a third-party (a different origin) and content blocking is enabled.

The permission can be changed or removed by:

* Going to *Preferences > Content Blocking* and either
* adding an exception with the *Manage Exceptions*… button
* choosing the *Custom* Content Blocking and unchecking the *Cookies* checkbox

If the resource that is being blocked doesn't need authentication, you can fix the warning message by adding a `crossorigin="anonymous"` attribute to the relevant element.

See also
--------

* Content blocking on support.mozilla.org
* The `crossorigin` attribute
Blocked: All storage access requests
====================================

Message
-------

Firefox:
```

CookieBlockedAll=Request to access cookies or storage on "X" was blocked because we are blocking all storage access requests.
```

What went wrong?
----------------

A request to access cookies or storage was blocked because the browser is blocking all storage access.

The permission can be changed or removed by:

* Going to *Preferences > Content Blocking*
* In the *Custom* Content Blocking section, selecting a value other than *All Cookies* for the *Cookies* item

If the resource that is being blocked doesn't need authentication, you can fix the warning message by adding a `crossorigin="anonymous"` attribute to your element.

See also
--------

* Content blocking on support.mozilla.org
* The `crossorigin` attribute
Blocked: Storage access requests from trackers
==============================================

Message
-------

Firefox:
```

Request to access cookie or storage on “X” was blocked because it came from a tracker and content blocking is enabled.
```

What went wrong?
----------------

A request to access cookies or storage was blocked because the browser identified it as coming from a tracker and content blocking is enabled.

The permission can be changed or removed by:

* Going to *Preferences > Privacy & Security > Enhanced Tracking Protection* and either
    + adding an exception with the *Manage Exceptions*… button
    + choosing the *Custom* Content Blocking and unchecking the *Tracker* checkbox

If the blocked resource doesn't need authentication, you can fix the warning message by adding a `crossorigin="anonymous"` attribute to the relevant element.

See also
--------

* Enhanced Tracking Protection in Firefox for desktop on support.mozilla.org
* The `crossorigin` attribute
Errors
======

This page lists the errors that can be raised due to Firefox's anti-tracking functionality, governed by the Storage Access Policy. You can find further information about them by clicking on the links below:

A request to access cookies or storage was

* blocked because of a custom cookie permission
* blocked because it came from a tracker and content blocking is enabled
* blocked because we are blocking all storage access requests
* blocked because we are blocking all third-party storage access requests and content blocking is enabled
* granted *partitioned* access because it came from a third-party and dynamic state partitioning is enabled
Resources and URIs
==================

HTTP allows a browser, or another user agent, to communicate with different *resources* on the Internet: to do this the browser needs both the *identity* and the *location* of the resources. These two bits of information are described by a URI.

Identifying resources on the Web

URIs and how to access resources on the Web.

Data URLs

A specific kind of URIs, data URLs, embed the resource itself inside the identifier.

Choosing between www and non-www URLs

Advice on using a www-prefixed domain or not, this article explains the consequences of the choice as well as how to make it.

MIME Types

MIME media types define what kind of document a specific resource is. This article presents both the syntax and the most useful MIME types for use on the Web.

Common MIME types

List of common MIME types useful for Web developers.
HTTP request methods
====================

HTTP defines a set of **request methods** to indicate the desired action to be performed for a given resource. Although they can also be nouns, these request methods are sometimes referred to as *HTTP verbs*. Each of them implements a different semantic, but some common features are shared by a group of them: e.g. a request method can be safe, idempotent, or cacheable.

`GET`

The `GET` method requests a representation of the specified resource. Requests using `GET` should only retrieve data.

`HEAD`

The `HEAD` method asks for a response identical to a `GET` request, but without the response body.

`POST`

The `POST` method submits an entity to the specified resource, often causing a change in state or side effects on the server.

`PUT`

The `PUT` method replaces all current representations of the target resource with the request payload.

`DELETE`

The `DELETE` method deletes the specified resource.

`CONNECT`

The `CONNECT` method establishes a tunnel to the server identified by the target resource.

`OPTIONS`

The `OPTIONS` method describes the communication options for the target resource.

`TRACE`

The `TRACE` method performs a message loop-back test along the path to the target resource.

`PATCH`

The `PATCH` method applies partial modifications to a resource.

Specifications
--------------

| Specification |
| --- |
| HTTP Semantics # CONNECT |
| HTTP Semantics # DELETE |
| HTTP Semantics # GET |
| HTTP Semantics # HEAD |
| HTTP Semantics # OPTIONS |
| HTTP Semantics # POST |
| HTTP Semantics # PUT |
| HTTP Semantics # TRACE |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* HTTP headers
Basics of HTTP
==============

HTTP is an extensible protocol that relies on concepts like resources and Uniform Resource Identifiers (URIs), simple message structure, and client-server communication flow. On top of these basic concepts, numerous extensions have been developed over the years that add updated functionality and semantics with new HTTP methods or headers.

Articles
--------

Overview of HTTP

Describes what HTTP is and its role in web architecture, including its position in the protocol stack.

Evolution of HTTP

HTTP was created in the early 1990s and has been extended several times. This article goes through its history and describes HTTP/0.9, HTTP/1.0, HTTP/1.1, and the modern HTTP/2, as well as novelties introduced over the years.

Resources and URIs

A brief introduction to the concept of resources, identifiers, and locations on the web.

Identifying resources on the Web

Describes how web resources are referenced and how to locate them.

Data URLs

A specific kind of URI that directly embeds the resource it represents. Data URLs are very convenient, but have some caveats.

Resource URLs 
Non-standard

Resource URLs, those prefixed with the `resource` scheme are used by Firefox and Firefox browser extensions to load resources internally, but is also available to some sites the browser connects to as well.

MIME types

Since HTTP/1.0, different types of content can be transmitted. This article explains how this is accomplished using the `Content-Type` header and the MIME standard.

Choosing between www and non-www URLs

This article provides guidance on how to choose whether to use a www-prefixed domain or not, along with the consequences of that choice.

Flow of an HTTP session

This article describes a typical HTTP session; i.e. what happens when you follow a link or load an image into a web page.

HTTP Messages

HTTP Messages transmitted during requests or responses have a very clear structure. This introductory article describes this structure, its purpose, and its possibilities.

Frame and message structure in HTTP/2

HTTP/2 encapsulates and represents HTTP/1.x messages in a binary frame. This article explains the frame structure, its purpose, and the way it's encoded.

Connection management in HTTP/1.x

HTTP/1.1 was the first version of HTTP to support persistent connection and pipelining. This article explains both concepts.

Connection management in HTTP/2

HTTP/2 completely revisited how connections are created and maintained. This article explains how HTTP frames allow multiplexing and solve the 'head-of-line' blocking problem of former HTTP versions.

Content Negotiation

HTTP introduces a set of headers, starting with `Accept` as a way for a browser to announce the format, language, or encoding it prefers. This article explains how this advertisement happens, how the server is expected to react, and how it chooses the most adequate response.
417 Expectation Failed
======================

 The HTTP **`417 Expectation Failed`** client error response
 code indicates that the expectation given in the request's `Expect`
 header could not be met.

See the `Expect` header for more details.

Status
------


```http
417 Expectation Failed
```

Specifications
--------------

| Specification |
| --- |
| HTTP Semantics # status.417 |

See also
--------

* `Expect`
100 Continue
============

 The HTTP **`100 Continue`** informational status response code
 indicates that everything so far is OK and that the client should continue with the
 request or ignore it if it is already finished.

 To have a server check the request's headers, a client must send
 `Expect``: 100-continue` as a header in its initial request
 and receive a `100 Continue` status code in response before sending the body.

Status
------


```http
100 Continue
```

Specifications
--------------

| Specification |
| --- |
| HTTP Semantics # status.100 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Expect`
* `417`
426 Upgrade Required
====================

 The HTTP **`426 Upgrade Required`** client error response code
 indicates that 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 with this response to indicate the
 required protocol(s).

Status
------


```http
426 Upgrade Required
```

Examples
--------


```http
HTTP/1.1 426 Upgrade Required
Upgrade: HTTP/2.0
Connection: Upgrade
Content-Length: 53
Content-Type: text/plain

This service requires use of the HTTP/2.0 protocol
```

Specifications
--------------

| Specification |
| --- |
| HTTP Semantics # status.426 |

See also
--------

* `Upgrade`
* `101` `Switching Protocols`
511 Network Authentication Required
===================================

 The HTTP **`511 Network Authentication Required`** response
 status code indicates that the client needs to authenticate to gain network access.

 This status is not generated by origin servers, but by intercepting proxies that
 control access to the network.

 Network operators sometimes require some authentication, acceptance of terms, or other
 user interaction before granting access (for example in an internet café or at an
 airport). They often identify clients who have not done so using their Media Access
 Control (MAC) addresses.

Status
------


```http
511 Network Authentication Required
```

Specifications
--------------

| Specification |
| --- |
| RFC 6585 # section-6 |

See also
--------

* Proxy server
308 Permanent Redirect
======================

 The HyperText Transfer Protocol (HTTP)
 **`308 Permanent Redirect`** redirect status response code
 indicates that the resource requested has been definitively moved to the URL given by
 the `Location` headers. A browser redirects to this page and search
 engines update their links to the resource (in 'SEO-speak', it is said that the
 'link-juice' is sent to the new URL).

 The request method and the body will not be altered, whereas `301` may
 incorrectly sometimes be changed to a `GET` method.


**Note:** Some Web applications may use the
 `308 Permanent Redirect` in a non-standard way and for other purposes. For
 example, Google Drive uses a `308 Resume Incomplete` response to indicate
 to the client when an incomplete upload stalled. (See Perform a resumable download on Google Drive documentation.)


Status
------


```http
308 Permanent Redirect
```

Specifications
--------------

| Specification |
| --- |
| HTTP Semantics # status.308 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `301 Moved Permanently`, the equivalent of this status code, but that may
 change the method used when it is not a `GET`.
* `302 Found`, a temporary redirect
422 Unprocessable Content
=========================

 The HyperText Transfer Protocol (HTTP)
 **`422 Unprocessable Content`** response status code indicates
 that the server understands the content type of the request entity, and the syntax of
 the request entity is correct, but it was unable to process the contained instructions.

**Warning:** The client should not repeat this request without modification.

Status
------


```http
422 Unprocessable Content
```

Specifications
--------------

| Specification |
| --- |
| HTTP Semantics # status.422 |
413 Content Too Large
=====================

The HTTP **`413 Content Too Large`** response status code indicates that the request entity is larger than limits defined by server; the server might close the connection or return a `Retry-After` header field.

Prior to RFC 9110 the response phrase for the status was **`Payload Too Large`**. That name is still widely used.

Status
------


```http
413 Content Too Large
```

Specifications
--------------

| Specification |
| --- |
| HTTP Semantics # status.413 |

See also
--------

* `Connection`
* `Retry-After`
407 Proxy Authentication Required
=================================

 The HTTP **`407 Proxy Authentication Required`** client error
 status response code indicates that the request has not been applied because it lacks
 valid authentication credentials for a proxy server that is between the
 browser and the server that can access the requested resource.

 This status is sent with a `Proxy-Authenticate` header that contains
 information on how to authorize correctly.

Status
------


```http
407 Proxy Authentication Required
```

Example response
----------------


```http
HTTP/1.1 407 Proxy Authentication Required
Date: Wed, 21 Oct 2015 07:28:00 GMT
Proxy-Authenticate: Basic realm="Access to internal site"
```

Specifications
--------------

| Specification |
| --- |
| HTTP Semantics # status.407 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* HTTP authentication
* `WWW-Authenticate`
* `Authorization`
* `Proxy-Authorization`
* `Proxy-Authenticate`
* `401`, `403`
300 Multiple Choices
====================

 The HTTP **`300 Multiple Choices`** redirect status response code indicates that the request has more than one possible response.
 The user-agent or the user should choose one of them.
 As there is no standardized way of choosing one of the responses, this response code is very rarely used.

If the server has a preferred choice, it should generate a `Location` header.

Status
------


```http
300 Multiple Choices
```

Specifications
--------------

| Specification |
| --- |
| HTTP Semantics # status.300 |

See also
--------

* `301` `Moved Permanently`
* `302` `Found`, the temporary redirect
* `308` `Permanent Redirect`
206 Partial Content
===================

 The HTTP **`206 Partial Content`** success status response code
 indicates that the request has succeeded and the body contains the requested ranges
 of data, as described in the `Range` header of the request.

 If there is only one range, the `Content-Type` of the whole response is
 set to the type of the document, and a `Content-Range` is provided.

 If several ranges are sent back, the `Content-Type` is set to
 `multipart/byteranges` and each fragment covers one range, with
 `Content-Range` and `Content-Type` describing it.

Status
------


```http
206 Partial Content
```

Examples
--------

A response containing one single range:


```http
HTTP/1.1 206 Partial Content
Date: Wed, 15 Nov 2015 06:25:24 GMT
Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
Content-Range: bytes 21010-47021/47022
Content-Length: 26012
Content-Type: image/gif

# 26012 bytes of partial image data…
```


A response containing several ranges:


```http
HTTP/1.1 206 Partial Content
Date: Wed, 15 Nov 2015 06:25:24 GMT
Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
Content-Length: 1741
Content-Type: multipart/byteranges; boundary=String\_separator

--String_separator
Content-Type: application/pdf
Content-Range: bytes 234-639/8000

# the first range
--String_separator
Content-Type: application/pdf
Content-Range: bytes 4590-7999/8000

# the second range
--String_separator--
```

Specifications
--------------

| Specification |
| --- |
| HTTP Semantics # status.206 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `If-Range`
* `Range`
* `Content-Range`
* `Content-Type`