HTML media Attribute

Example

<a href="a-attr-media.html?output=print" media="print and (resolution:300dpi)">Open media attribute page for print.</a>

Meaning

Specification suggests the value should be used to indicate whether a destination is appropriate for screen, print, PDA, and so on

Notes: This attribute is advisory.

Standard Syntax

<element media="value">

Browser Support

Status

Applies to:

The media attribute can be used on the following element:

Element	Attribute
<a>	media
<area>	media
<link>	media
<source>	media
<style>	media

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)"

More Examples

<area> Example

<img src="img/desk.jpg" usemap="#image-map">

<map name="image-map">
    <area media="screen and (min-color-index:256)" target="_blank" alt="Computer" title="Computer" href="img/computer.png" coords="365,99,905,783" shape="rect">
    <area target="_blank" alt="Cup" title="Cup" href="img/cup.png" coords="1047,672,97" shape="circle">
    <area target="_blank" alt="Mobile" title="Mobile" href="img/mobile.png" coords="960,385,1040,541" shape="rect">
    <area target="_blank" alt="Book" title="Book" href="img/book.png" coords="175,426,96,527,20,664,232,755,298,628,364,505" shape="poly">
</map>

<link> Example

<head>
	<link rel="stylesheet" type="text/css" href="demo/demo.css">
	<link rel="stylesheet" type="text/css" href="demo/print.css" media="print">
</head>

<source> Example

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

<style> Example

<style media="print">
body {background: tomato;}
h1 {color: white;}
p {font-family: monospace;}
</style>

❮ HTML Attributes