HTML media Attribute

Description

The HTML media attribute is used to specify the media type and conditions for which a linked resource is designed to be used. This attribute can be applied within <link>, <source>, and <style> elements, offering the ability to tailor content or styling based on specific media conditions, like screen size, resolution, or media type (e.g., print, screen). The media attribute uses media queries to define these conditions, enabling developers to create responsive designs that adapt to various devices and viewing environments.

For example, within a <link> element that references a stylesheet, the media attribute can determine when that stylesheet is applied based on the viewport width, orientation, or other factors. Similarly, in <source> elements nested within <picture> or <video>, the media attribute allows for the selection of different image or video sources to match the display capabilities of the device, ensuring optimal loading and viewing experiences.

In essence, the media attribute plays a critical role in modern web development, facilitating responsive and adaptable content delivery that enhances user experience across a wide range of devices and contexts.

Syntax

<tagname media="expression" />

Values

Devices

allSuitable for all devices. This is the default.
auralSpeech synthesizers
brailleBraille feedback devices -- for the visually impaired
handheldHandheld devices with small screens and limited bandwidth
projectionProjector devices
printPrinted pages or in print-preview mode
screenComputer screens
ttyTeletypes and similar devices using a fixed-pitch character grid
tvTelevision type devices with low resolution and limited scrolling

Values

widthWidth of targeted display. Name can be prefixed with min- or max-.
heightHeight of targeted display. Name can be prefixed with min- or max-.
device-widthWidth of the device or paper. Name can be prefixed with min- or max-.
device-heightHeight of the device or paper. Name can be prefixed with min- or max-.
orientationOrientation of the device or paper. Landscape or Portrait.
aspect-ratioRatio of width/height of the targeted display. Name can be prefixed with min- or max-.
device-aspect-ratioRatio of width/height of the device or paper. Name can be prefixed with min- or max-.
colorBits per color of targeted display. Name can be prefixed with min- or max-.
monochromeBits per pixel in a monochrome frame buffer. Name can be prefixed with min- or max-.
resolutionPixel density of the targeted display or paper. Name can be prefixed with min- or max-.
scanScanning method of a tv display.
gridWhether output device is a grid or bitmap type.

Applies To

The media attribute can be used on the following html elements.

Example

HTML

<picture>

  <source media="(min-width: 650px)" srcset="images/sunset1.jpg">

  <source media="(min-width: 465px)" srcset="images/sunset.jpg">

  <!-- The img element will be selected if none of the above sources match -->

  <img src="images/sunset1.jpg" alt="Sunset">

</picture>

Result

Editor