Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.