Labels

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.

It is just like media queries, which applies different CSS properties to the same element depending on various screen sizes.

Applies to

The media attribute can be used on the following elements:

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>

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>

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>

Source Example

Use of the media attribute:

<source srcset="sun.jpg" media="screen and (min-width:320px)">

Style Example

Specify the style to use for print:

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

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
Tags

Comments

Post a Comment