HTML <a> with media Attribute
HTML <a> with media Attribute
The media attribute defines what device/media the linked file optimized for.
The media attribute is used only when the href attribute is set.
Note: The media attribute is purely advisory, with no built-in functionality.
Example
HTML Online Editor
<!DOCTYPE html>
<html>
<body>
<a href="/html/tag-a" media="print and (resolution:360dpi)">Click to Open</a>
</body>
</html>
Syntax
<a media="device operator (value)">
Device
| Value | Description |
|---|---|
| all | Default. Suitable for all devices |
| aural | Speech synthesizers |
| braille | Braille feedback devices |
| handheld | Handheld devices (small screen like phone and other devices) |
| projection | Projectors |
| Print preview mode | |
| screen | Computer/Laptop screens |
| tty | Teletypes and similar media using a fixed-pitch character grid |
| tv | Television type devices (low resolution, limited scroll ability) |
Operator
| Value | Explanation |
|---|---|
| and | AND operator |
| not | NOT operator |
| , | OR operator |
Value
| Value | Description |
|---|---|
| width | Defines the width of the targeted display area. Example: media="screen and (min-width:500px)" Example: media="screen and (max-width:800px). |
| height | Defines the height of the targeted display area. Example: media="screen and (min-height:500px)" Example: media="screen and (max-height:800px)" |
| device-width | Defines the width of the target display. Example: media="screen and (device-min-width:500px)" Example: media="screen and (device-max-width:800px)" |
| device-height | Defines the height of the target display. Example: media="screen and (device-min-height:500px)" Example: media="screen and (device-max-height:800px)" |
| orientation | Defines the orientation of the target display. Example: media="screen and (orientation: portrait)" Example: media="screen and (orientation: landscape)" |
| aspect-ratio | Defines the width/height ratio of the targeted display . Example: media="screen and (aspect-min-ratio:4/3)" Example: media="screen and (aspect-max-ratio:16/9)" |
| device-aspect-ratio | Defines the device-width/device-height ratio of the target display. Example: media="screen and (aspect-min-ratio:16/9)" Example: media="screen and (aspect-max-ratio:16/9)" |
| color | Defines the bits per color of target display. Example: media="screen and (min-color:2)" Example: media="screen and (max-color:15)" |
| color-index | Defines the number of colors the target display can handle. Example: media="screen and (min-color-index:128)" Example: media="screen and (max-color-index:256)" |
| monochrome | Defines the bits per pixel in a monochrome frame buffer. Example: media="screen and (min-monochrome:2)" Example: media="screen and (max-monochrome:10)" |
| resolution | Defines the pixel density (dpi or dpcm) of the target display/paper. Example: media="print and (min-resolution:300dpi)" Example: media="print and (max-resolution:500dpi)" |
| scan | Defines scanning method of a tv display. Example: media="tv and (scan:progressive)" Example: media="tv and (scan:interlace)" |
| grid | Defines if the output device is grid or bitmap. Example: media="grid and (grid:0)" Example: media="grid and (grid:1)" |
Attribute Value
| Value | Explanation |
|---|---|
| media_query | Defines what device/media the linked file optimized for. |
Reminder
Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in HTML.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.