YouTip

## HTML `` media Attribute The `media` attribute of the `` (anchor) tag specifies the media type or device for which the target URL is optimized. This attribute informs the browser and user agents about the intended target device (such as a smartphone, a screen reader, or a printer) so they can handle the linked resource more efficiently. --- ## Definition and Usage * **Purpose:** The `media` attribute defines the target device or media type optimized for the linked document. * **Dependency:** This attribute is only functional and valid when the `href` attribute is present on the `` tag. * **HTML5 Feature:** The `media` attribute on the `` tag was introduced in HTML5. --- ## Browser Support The `media` attribute is supported by all major modern web browsers: * Google Chrome * Mozilla Firefox * Safari * Microsoft Edge * Opera *Note: While browsers support the syntax, the actual behavior (such as pre-fetching or styling based on the media query) depends on the browser's implementation and the specific device context.* --- ## Syntax ```html Link Text ``` ### Example The following example demonstrates a link optimized specifically for high-resolution printing: ```html Print-Optimized Version (300 DPI) ``` --- ## Media Query Operators You can combine multiple conditions in the `media` attribute using logical operators: | Operator | Description | | :--- | :--- | | `and` | Specifies an **AND** operator. Both conditions must be true. | | `not` | Specifies a **NOT** operator. Negates the query. | | `,` (comma) | Specifies an **OR** operator. Either condition can be true. | --- ## Target Devices (Media Types) The following values specify the general category of device for which the destination URL is designed: | Value | Description | | :--- | :--- | | `all` | **Default.** Suitable for all devices. | | `aural` | Speech synthesizers and screen readers. | | `braille` | Braille tactile feedback devices. | | `handheld` | Handheld devices (typically small screens, limited bandwidth). | | `projection` | Projectors. | | `print` | Print preview mode or printed pages. | | `screen` | Computer screens, tablets, and smartphones. | | `tty` | Teletypes and similar media using a fixed-pitch character grid. | | `tv` | Television-type devices (low resolution, limited scrolling capability). | --- ## Media Features (Values) Media features allow you to target more specific characteristics of the output device. Most of these features can be prefixed with `min-` or `max-` to express "greater than or equal to" and "less than or equal to" constraints. | Feature | Description | Example | | :--- | :--- | :--- | | `width` | Specifies the width of the target display area. | `media="screen and (min-width:500px)"` | | `height` | Specifies the height of the target display area. | `media="screen and (max-height:700px)"` | | `device-width` | Specifies the physical width of the target device screen/paper. | `media="screen and (device-width:500px)"` | | `device-height` | Specifies the physical height of the target device screen/paper. | `media="screen and (device-height:500px)"` | | `orientation` | Specifies the orientation of the target display.
Possible values: `"portrait"` or `"landscape"`. | `media="all and (orientation: landscape)"` | | `aspect-ratio` | Specifies the width-to-height ratio of the target display area. | `media="screen and (aspect-ratio:16/9)"` | | `device-aspect-ratio` | Specifies the physical device-width to device-height ratio. | `media="screen and (device-aspect-ratio:16/9)"` | | `color` | Specifies the bits per color component of the target display. | `media="screen and (color:3)"` | | `color-index` | Specifies the number of colors the target display can handle. | `media="screen and (min-color-index:256)"` | | `monochrome` | Specifies the bits per pixel in a monochrome frame buffer. | `media="screen and (monochrome:2)"` | | `resolution` | Specifies the pixel density of the target display/paper (in `dpi` or `dpcm`). | `media="print and (resolution:300dpi)"` | | `scan` | Specifies the scanning method of a TV display.
Possible values: `"progressive"` or `"interlace"`. | `media="tv and (scan:interlace)"` | | `grid` | Specifies whether the output device is a grid (like a TTY terminal) or bitmap.
Possible values: `"1"` for grid, `"0"` otherwise. | `media="handheld and (grid:1)"` | --- ## Considerations and Best Practices 1. **Informational Purpose:** The `media` attribute on `` tags is primarily advisory. It helps search engines, browsers, and assistive technologies understand what kind of resource lies behind the link, but it does not prevent a user on a different device from clicking the link. 2. **SEO and Performance:** Search engine crawlers can use this attribute to better index device-specific versions of your pages. 3. **Contrast with ``:** Do not confuse the `` tag's `media` attribute with the `` tag's `media` attribute. While `` actively controls when a stylesheet is applied, `` merely describes the target destination.