HTML Reference Manual

HTML Tag Reference

HTML link media attribute

The link media attribute specifies the type of media the target resource is intended for/Optimized for devices, this attribute is typically used with CSS stylesheets to specify different styles for different media types.

　HTML <link> tag

Online Example

Two different stylesheets for two different media types (screen and print):

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML <link> hreflang Attribute Usage-基础教程(oldtoolbag.com)</title>/title>
<link rel="stylesheet" type="text/css" href="demo_screen.css">
<link rel="stylesheet" type="text/css" href="demo_print.css" media="print">
</head>
<body>
<h1>oldtoolbag.com Example/h1>
<p><a href="tryhtml_link_media.html" target="_blank">Click here</a>/<a href="#" onclick="window.open('tryit.html'); return false;">Open this page in a new window (without the tryit section).</a>/p>
<p>If you print this page or open it in the print preview, you will see that it uses the 'media="print"' stylesheet for styling. The 'Print' stylesheet contains black text on a white background.</p>/p>
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

All major browsers support the media attribute.

Definition and Usage

The media attribute specifies the type of media for which the target resource is intended/The device is optimized.

This attribute is usually used with CSS style sheets to specify different styles for different media types.

The media attribute can accept multiple values.

HTML 4.01 with HTML5differences

The media attribute now supports more values.

Syntax

<link media="value>

Possible operators

Value	Description
and	Define an AND operator.
not	Define a NOT operator.
,	Define 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/Print page.
screen	Computer screen.
tty	Teletype and similar media using a monospaced character grid.
tv	Television type devices (low resolution, limited scrolling ability).

Value

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

　HTML <link> tag

HTML: <template> tag