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 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

ValueExplanation
media_queryDefines 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.

Meet the Author