HTML <source> media Attribute

❮ HTML <source> tag

Example

<picture>
  <source media="(min-width:650px)" srcset="computer.png">
  <source media="(min-width:465px)" srcset="clock.png">
  <img src="mobile.png" alt="mobile" style="width:auto;">
</picture>

Meaning

The media attribute specifies the intended media type of the linked media source, to provide a hint to a user agent as to whether the media referenced is appropriate or how it might be used.

It is similar to the idea of a media attribute in a style sheet specifying print, screen, projection, or other common values.


Standard Syntax

HTML: <source media="mediaQuery">
XHTML: <source media="mediaQuery" />



Browser Support




Status







Possible Operators

Value Description
and AND operator
not NOT operator
, OR Operator

Divices

Value Description
all (Default) Suitable for all devices
aural Speech synthesizers
braille Braille feedback devices
handheld Handheld devices (like small screen, limited bandwidth etc…)
projection Projectors
print Print preview pages.
screen Screen of the devices
tty Teletypes and similar media using a fixed-pitch character grid
tv Television devices

Attribute Values

Value Description Example
width Specifies the width of the screen should targeted.min- and max- prefixes can be used. media="screen and (min-width:320px)
height Specifies the height of the screen should targeted.min- and max- prefixes can be used. media="screen and (max-height:640px)
device-width Specifies the width of the device screen should targeted.min- and max- prefixes can be used. media="screen and (device-width:600px)"
device-height Specifies the height of the device screen should targeted.min- and max- prefixes can be used. media="screen and (device-height:600px)"
orientation Specifies the orientation of the device value can be landscape or portrait media="all and (orientation: portrait)"
aspect-ratio Specifies the width/height of the screen should targeted.min- and max- prefixes can be used. media="screen and (aspect-ratio:16/9)"
device-aspect-ratio Specifies the device-width/device-height ratio of the screen should targeted.min- and max- prefixes can be used. media="screen and (aspect-ratio:16/9)"
color Specifies the bits per color of navigated page should be display. media="screen and (color:4)"
color-index Specifies the number of colors the navigated display can handle. min- and max- prefixes can be used. media="screen and (min-color-index:256)"
monochrome The bits per pixel in a monochrome frame buffer. min- and max- prefixes can be used. media="screen and (monochrome:3)"
resolution the pixel density (dpi or dpcm) of the navigated display. min- and max- prefixes can be used. media="print and (resolution:200dpi)"
scan Scanning method of a tv display. Values Can be "progressive" and "interlace". media="tv and (scan:interlace)"
grid the output device is grid or bitmap. Value can be "1" for grid, and "0" otherwise. media="handheld and (grid:1)"
❮ HTML <source> tag