HTML media Attribute

HTML media Attribute

The HTML media attribute specifies the media conditions under which a linked resource, style block, source resource, or theme color applies. Its value is a media query or media query list.

Elements That Use the media Attribute

The media attribute can be used with the <link>, <style>, <source>, and <meta> elements. Its exact purpose depends on the element.

media Values

The value of the media attribute is a media query list. It can use media types such as screen and print, media features such as viewport width, or combinations of conditions.

media="print"
media="screen"
media="(width <= 600px)"
media="screen and (width >= 800px)"
media="(prefers-color-scheme: dark)"

When the media attribute is omitted from a <link> or <style> element, the resource or styles are not restricted to a particular media condition.

Using media with <link>

The media attribute is commonly used with a stylesheet <link> to specify when the linked stylesheet applies.

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="print.css" media="print">

In this example, styles.css applies normally, while print.css applies when the document is being printed or displayed in a print-preview environment.

Using media with <style>

The media attribute can be placed on a <style> element to make the entire embedded stylesheet conditional.

<style media="(width <= 600px)">
  body {
    font-size: 18px;
  }
</style>

These styles apply only when the media query matches. This is similar to placing the CSS rules inside an @media rule.

Using media with <source>

The media attribute can help the browser select an appropriate <source> resource based on the current media conditions. It is commonly used with responsive images inside <picture> and can also be used with media sources.

<picture>
  <source srcset="/img/images/image-1200x800.png" media="(width >= 900px)">
  <source srcset="/img/images/image-600x400.png" media="(width >= 600px)">
  <img src="/img/images/image-300x200.png" alt="Responsive image" width="300" height="200">
</picture>

The browser evaluates the media conditions in source order and can select the first suitable source. The <img> element provides the fallback image when none of the preceding source conditions match.

Using media with <meta>

On a <meta> element, the media attribute is used with name="theme-color" to specify the conditions under which a theme color applies. It must not be used on other <meta> metadata.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222222" media="(prefers-color-scheme: dark)">

This allows supporting browsers to use different suggested interface colors depending on the user's preferred color scheme.

Common Mistakes

Do not confuse the media attribute with the CSS @media rule. Both use media queries, but the HTML attribute controls when a particular HTML resource or metadata value applies, while the CSS rule conditionally applies a group of CSS rules.

Do not confuse the media attribute with the type attribute. The media attribute describes conditions such as viewport size or print output, while type identifies the resource's MIME type where applicable.

When using <source> inside <picture>, always provide an <img> element as the fallback.

Do not use media on a <meta> element unless its name is theme-color. In other metadata contexts, the attribute has no effect and must not be used.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The media attribute is widely supported for established uses such as linked stylesheets, embedded styles, and responsive source selection. Compatibility details can vary by element and by the feature associated with the media condition.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the media Attribute

The example uses the media attribute on <source> elements to select different images according to the preview width. Drag the divider between the code and result panes to change the preview width and see which image is displayed.

Summary

The HTML media attribute contains a media query or media query list that specifies the conditions under which a resource, stylesheet, source, or theme color applies. It can be used with the <link>, <style>, <source>, and <meta> elements, with behavior determined by the element on which it appears.