HTML reference manual

HTML tag list

HTML source media attribute

The source media attribute accepts any valid media query defined typically in CSS, and the media attribute can accept multiple values.

　HTML <source> tag

Online Example

A <picture> element with two source files and a fallback image:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML source media attribute usage-基础教程(oldtoolbag.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</<head>
<body>
<picture>
　　<source media="(min-width:　650px)" srcset="img_pink_flowers.jpg">
　　<source media="(min-width:　465px)" srcset="img_white_flower.jpg">
　　<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<p>Adjust the browser size to view different versions of the image loaded at different viewport sizes. The browser will find the first source element that matches the current viewport width of the media query and retrieve the image specified in the srcset attribute.</p>
<p>The img element is the last child of the picture declaration block. The img element is used for backward compatibility for browsers that do not support the picture element or do not have a matching source tag.
</p>
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support the media attribute. Note: IE12and earlier versions or Safari 9.0 and earlier versions do not support the picture element

Definition and Usage

The media attribute accepts any valid media query defined in CSS.

Note:This attribute can accept multiple values.

HTML 4.01 with HTML5differences

<source> tag is HTML5 of the new tag.

Syntax

<source media="value>

Possible operators

Value	Description
and	Specify an AND operator.
not	Specify a NOT operator.
,	Specify an OR operator.

device

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

Value

Value	Description
width	width of the target display area. can be used with "min-" and "max-" prefix. Example: media="screen and (min-width:500px)"
height	height of the target display area. can be used with "min-" and "max-" prefix. Example: media="screen and (max-height:700px)"
device-width	Specify the target display/width of the paper. can be used with "min-" and "max-" prefix. Example: media="screen and (device-width:500px)"
device-height	Specify the target display/height of the paper. can be used with "min-" and "max-" prefix. Example: media="screen and (device-height:500px)"
orientation	Specify the target display/Orientation of the paper. Possible values: "portrait" or "landscape". Example: media="all and (orientation: landscape)"
aspect-ratio	width of the target display area/height ratio. can be used with "min-" and "max-" prefix. Example: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	Specify the target display/device of the paper-width/device-height ratio. can be used with "min-" and "max-" prefix. Example: media="screen and (aspect-ratio:16/9)"
color	bits for the target display/color. can be used with "min-" and "max-" prefix. Example: media="screen and (color:3)"
color-index	Specify the number of colors the target display can handle. can be used with "min-" and "max-" prefix. Example: media="screen and (min-color-index:256)"
monochrome	Specify the bits in the monochrome frame buffer/pixel. can be used with "min-" and "max-" prefix. Example: media="screen and (monochrome:2)"
resolution	Specify the target display/pixels per inch (dpi or dpcm) of the paper. can be used with "min-" and "max-" prefix. Example: media="print and (resolution:300dpi)"
scan	Specify the scanning method of the TV display. Possible values: "progressive" and "interlace". Example: media="tv and (scan:interlace)"
grid	Specify whether the output device is a grid or bitmap. Possible values:"1" for grid, otherwise for "0". Example: media="handheld and (grid:1)"

　HTML <source> tag

HTML: <template> tag