`<link media="">`

In HTML Attributes

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Attribute of: HTML Link Options Illustrated With Code Examples
What does <link media=""> do?: Tells the browser what type of device a resource is designed for.

Defining Devices

When coding in HTML, you may want to use <link> to pull in content from different stylesheets or scripts. The media attribute tells the browser what type of device each script is designed for.

You might use media to tell the browser that you have different stylesheets for display and print. That way, your visitor will see a version that’s optimized for their mobile device when viewing on a small screen, and at the same time, they get will get a different layout when printing.

Specifying the Intended Device

<link rel="stylesheet" type="text/css" href="http://mysite.com/style-print.css" media="print">

You can specify alternate layouts for screen readers, TVs, mobile devices – or even a synthesized voice. A link can have more than one device type specified; separate devices with AND, OR or a comma.

<link rel="stylesheet" type="text/css" href="http://mysite.com/style-display.css" media="screen,handheld">

You will find a complete list of device types for this attribute on the W3Schools website, under the Devices heading.

Claire Broadley

Claire is seasoned technical writer, editor, and HTML enthusiast. She writes for HTML.com and runs a content agency, Red Robot Media.

Browser Support for media


9	3.5	All	12	4	10.1