HTML <a> media attribute
Definition and Usage
media The attribute specifies which media or device the linked document is optimized for.
This attribute is used to specify that the target URL is designed for special devices (such as iPhone), voice, or print media.
This attribute can accept multiple values.
Can only be href attribute Use when it exists.
Note:This attribute is purely advisory.
Example
Set the media attribute of the link:
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)"> Open the media attribute page for printing. </a>
Syntax
<a media="value>
Possible operators
| Operators | Description |
|---|---|
| and | Specifies the AND operator. |
| not | Specifies the NOT operator. |
| , | Specifies the OR operator. |
Device
| Value | Description |
|---|---|
| all | Default. Suitable for all devices. |
| aural | Speech synthesizer. |
| braille | Braille feedback device. |
| handheld | Handheld devices (small screen, limited bandwidth). |
| projection | Projector. |
| Print preview mode/print page. | |
| screen | Computer screen. |
| tty | Teletype and similar media using a monospaced character grid. |
| tv | Television type devices (low resolution, limited pagination capability). |
Value
| Value | Description |
|---|---|
| width |
Specifies the width of the target display area. Prefixes such as "min-" and "max-" can be used. Example: media="screen and (min-width:500px)" |
| height |
Specifies the height of the target display area. Prefixes such as "min-" and "max-" can be used. Example: media="screen and (max-height:700px)" |
| device-width |
Specifies the width of the target display/paper. Prefixes such as "min-" and "max-" can be used. Example: media="screen and (device-width:500px)" |
| device-height |
Specifies the height of the target display/paper. Prefixes such as "min-" and "max-" can be used. Example: media="screen and (device-height:500px)" |
| orientation |
Specifies the orientation of the target display/paper. Possible values: "portrait" or "landscape" Example: media="all and (orientation: landscape)" |
| aspect-ratio |
Specifies the width/height ratio of the target display area. Prefixes such as "min-" and "max-" can be used. Example: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio |
Specifies the device-width/device-height ratio of the target display/paper. Prefixes such as "min-" and "max-" can be used. Example: media="screen and (aspect-ratio:16/9)" |
| color |
Specifies the number of bits for each color of the target display. Prefixes such as "min-" and "max-" can be used. Example: media="screen and (color:3)" |
| color-index |
Specifies the number of colors that the target display can handle. Prefixes such as "min-" and "max-" can be used. Example: media="screen and (min-color-index:256)" |
| monochrome |
Specifies the number of bits per pixel in a monochrome frame buffer. Prefixes such as "min-" and "max-" can be used. Example: media="screen and (monochrome:2)" |
| resolution |
Specifies the pixel density of the target display/paper (dpi or dpcm). Prefixes such as "min-" and "max-" can be used. Example: media="print and (resolution:300dpi)" |
| scan |
Specifies the scanning method of the TV display. Possible values are: "progressive" and "interlace". Example: media="tv and (scan:interlace)" |
| grid |
Specifies whether the output device is a grid or bitmap. Possible Values: "1" represents a grid, "0" is other. Example: media="handheld and (grid:1)" |
Browser Support
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
