HTML <source> media attribute

HTML <source> tag

Definition and Usage

media The attribute accepts any valid media query that is commonly defined in CSS.

Note:This attribute can accept multiple values.

Example

An element that contains two source files and a fallback image:

<picture>
  <source media="(min-width:650px)" srcset="flower-1.jpg">
  <source media="(min-width:465px)" srcset="flower-2.jpg">
  <img src="flower-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Try it yourself

Syntax

<source media="media_query>

Possible operators

Operators Description
and Specifies the AND operator.
not Specifies the NOT operator.
, Specifies the OR operator.

Device

Value Description
all Default. Suitable for all devices.
aural Speech synthesizer.
braille Braille feedback device.
handheld Handheld devices (small screen, limited bandwidth).
projection Projector.
print Print preview mode/print page.
screen Computer screen.
tty Teletype and similar media using a monospaced character grid.
tv Television type devices (low resolution, limited pagination capability).

Value

Value Description
width

Specifies the width of the target display area.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (min-width:500px)"
height

Specifies the height of the target display area.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (max-height:700px)"
device-width

Specifies the width of the target display/paper.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (device-width:500px)"
device-height

Specifies the height of the target display/paper.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (device-height:500px)"
orientation

Specifies the orientation of the target display/paper.

Possible values: "portrait" or "landscape"

Example: media="all and (orientation: landscape)"
aspect-ratio

Specifies the width/height ratio of the target display area.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Specifies the device-width/device-height ratio of the target display/paper.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (aspect-ratio:16/9)"
color

Specifies the number of bits for each color of the target display.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (color:3)"
color-index

Specifies the number of colors that the target display can handle.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (min-color-index:256)"
monochrome

Specifies the number of bits per pixel in a monochrome frame buffer.

Prefixes such as "min-" and "max-" can be used.

Example: media="screen and (monochrome:2)"
resolution

Specifies the pixel density (dpi or dpcm) of the target display/paper.

Prefixes such as "min-" and "max-" can be used.

Example: media="print and (resolution:300dpi)"
scan

Specifies the scanning method of the TV display.

Possible values are: "progressive" and "interlace".

Example: media="tv and (scan:interlace)"
grid

Specifies whether the output device is a grid or bitmap.

Possible values: "1" represents a grid, "0" is for others.

Example: media="handheld and (grid:1)"

Browser Support

The numbers in the table indicate the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 9.0 15.0 9.1 25.0

HTML <source> tag