Tutorials References Menu

HTML media Attribute


Definition and Usage

The media attribute specifies what media/device the linked document is optimized for.

This attribute is used to specify that the target URL is designed for special devices (like iPhone) , speech or print media.

This attribute can accept several values.


Applies to

The media attribute can be used on the following elements:

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

Examples

A Example

A link with a media attribute:

<a href="att_a_media.asp?output=print"
media="print and (resolution:300dpi)">
Open media attribute page for print.</a>
Try it Yourself »

Area Example

An image map, with a clickable area:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm" media="screen and (min-color-index:256)">
</map>
Try it Yourself »

Link Example

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

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
Try it Yourself »

Source Example

Use of the media attribute:

<source src="movie.ogg" type="video/ogg"
media="screen and (min-width:320px)">
Try it Yourself »

Style Example

Specify the style to use for print:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}

</style>
Try it Yourself »

Browser Support

The media attribute has the following browser support for each element:

Element
a Yes Yes Yes Yes Yes
area Yes Yes Yes Yes Yes
link Yes Yes Yes Yes Yes
source Not supported Not supported Not supported Not supported Not supported
style Yes Yes Yes Yes Yes