References

Beginner-friendly references for web development, with live, editable examples.

The HTML media attribute

Attribute All modern browsers Updated
Quick answer

The HTML media attribute specifies the media query the resource applies to. It is used on the <link>, <source> and <style> elements.

Overview

The media attribute applies the resource to matching media only. It is used on the <link>, <source> and <style> elements.

It belongs to the document head: metadata, stylesheet and script loading, encoding and resource hints. These attributes shape how the page is interpreted and how efficiently its resources load.

Syntax

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

Values

Value
A media query, e.g. (min-width: 600px) or print.

Best practices

  • Declare the character encoding with <meta charset="utf-8"> first in the <head>.
  • Load scripts with defer (or as modules) so they do not block parsing.
  • Protect third-party resources with integrity and crossorigin (Subresource Integrity).
  • Use resource hints like preload deliberately, paired with the right as value.

Frequently asked questions

What does the media attribute do?
Applies the resource to matching media only.
Where do head attributes apply?
On the metadata elements in the <head>: <meta>, <link>, <script> and <base>.
What is the difference between async and defer?
async runs a script as soon as it loads in no set order; defer runs scripts in order after the document is parsed.
Which elements use the media attribute?
It is an element-specific attribute, used on the <link>, <source> and <style> elements.
maxlength method