Topics

HTML Media

The media element identifies the type of media or device for which the linked document is best suited.

This feature is used to indicate that the destination URL is intended for usage with specific devices (such as iPhones), speech, or print media.

This attribute accepts a variety of values.

 

Applies to

The media attribute can be applied to the elements listed below:

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

Examples :

A link with a media attribute:

<a href="att_a_media.php?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>

Output :

 

Source example

Use of the media attribute:

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

Output :

 

Style example :

Specify the style to use for print:

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

Output :

 

HTML method Attribute

The media element identifies the type of media or device for which the linked document is best suited.

This feature is used to indicate that the destination URL is intended for usage with specific devices (such as iPhones), speech, or print media.

This attribute accepts a variety of values.

 

Applies to

The media attribute can be applied to the elements listed below:

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

 

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>

 

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>