HTML | media Attribute

HTML | <link> media Attribute

Last Updated : 06 Jun, 2022

The HTML link media attribute is used to specify what media/device the target resource is optimized for. This attribute used to specify a different style for different media type.

The media attribute can accept several values.

Syntax:

<link media="value">

Possible Operators:

Value	Description
and	AND operator
not	NOT operator
,	OR operator

Devices:

Value	Description
all	Suitable for all devices
aural	Speech synthesizers
braille	Braille feedback devices
handheld	Handheld devices (small screen, limited bandwidth)
projection	Projectors
print	Print preview mode/printed pages
screen	Computer screens
tty	Teletypes and similar media using a fixed-pitch character grid
tv	Low resolution or limited scroll ability type devices like Television.

Values:

Value	Description
width	Targeted display area’s width.
height	Targeted display area’s height
device-width	Target display or paper’s width.
device-height	Target display or paper’s height.
orientation	Target display or paper’s orientation.
aspect-ratio	Width/height ratio of the targeted display area.
device-aspect-ratio	Device-width/device-height ratio of the target display/paper.
color	Bits per color of target display.
color-index	Number of colors the target display can handle.
monochrome	Bits per pixel in a monochrome frame buffer.
resolution	Pixel density (dpi or dpcm) of the target display/paper.
scan	Scanning method of a tv display.
grid	If the output device is grid or bitmap.

Note: Prefixes like "min-" and "max-" can be used. Example:

html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" 
          type="text/css" 
          href="index_screen.css">

    <link rel="stylesheet" 
          type="text/css"
          href="index_print.css" 
          media="print">
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <p><a href="index.html" target="_blank">
      Click here
      </a>
    </center>
</body>

</html>

Output:

Supported Browsers: The browsers supported by HTML link media attribute are listed below:

Google Chrome 1 and above
Edge 12 and above
Internet Explorer 6 and above
Firefox 1 and above
Apple Safari 4 and above
Opera 12.1 and above

HTML | media Attribute

V

Vijay Sirra

Improve

Article Tags :

Similar Reads

HTML | <a> media Attribute

The HTML <a> media attribute specifies the media or device the linked document is optimized for. This attribute specifies that the target URL is designed for devices like iPhone, speech or print media. This attribute can accept several values. This can be used only if the href attribute is pre

HTML | <a> media Attribute

The HTML <a> media attribute specifies the media or device the linked document is optimized for. This attribute specifies that the target URL is designed for devices like iPhone, speech or print media. This attribute can accept several values. This can be used only if the href attribute is pre

HTML | <area> media Attribute

The HTML area media attribute is used to specify the media or device the target URL is optimized for. this attribute specify the style is for specific devices like print media or speech. This attribute can accept several values. Only used if the href attribute is present. This attribute is purely ad

HTML | <style> media Attribute

The HTML style media attribute is used to specify the media or device the CSS style is optimized for. this attribute specify the style is for specific devices like print media or speech. This attribute can accept several values. Syntax:<style media="value">Possible Operators:ValueDescriptionan

HTML | <style> media Attribute

The HTML style media attribute is used to specify the media or device the CSS style is optimized for. this attribute specify the style is for specific devices like print media or speech. This attribute can accept several values. Syntax:<style media="value">Possible Operators:ValueDescriptionan

HTML | <source> media Attribute

The HTML source media attribute accepts any valid media query that would normally be defined in a CSS. This attribute can accept several values. Syntax: <source media="media_query"> Possible Operators: Value Description and AND operator not NOT operator , OR operator Devices: Value Description