Bad value X for attribute “media” on element “link”: Parse Error.

The media attribute tells the browser under which conditions a linked stylesheet (or other resource) should be applied. Its value must be a valid media query list as defined by the CSS Media Queries specification. When the W3C HTML Validator reports a parse error for this attribute, it means the value couldn’t be parsed as a valid media query. The browser may ignore the attribute entirely or behave unpredictably, potentially loading the stylesheet in all conditions or not at all.

Common causes of this error include:

• Typos in media types or features — e.g., scrren instead of screen, or max-widht instead of max-width.
• Missing parentheses around media features — e.g., max-width: 600px instead of (max-width: 600px).
• Invalid or stray characters — e.g., extra commas, semicolons, or unmatched parentheses.
• Using CSS syntax instead of media query syntax — e.g., writing @media screen or including curly braces.
• Incorrect logical operators — e.g., using or at the top level instead of a comma, or misspelling not or only.
• Server-side template placeholders left unresolved — e.g., media="{{mediaQuery}}" rendered literally.

Getting this right matters for standards compliance and predictable cross-browser behavior. Browsers are generally lenient and may try to recover from malformed media queries, but the recovery behavior isn’t guaranteed to be consistent. A broken media attribute can cause stylesheets to load when they shouldn’t (wasting bandwidth) or not load when they should (breaking layout). It also affects performance, since browsers use the media attribute to prioritize resource loading.

To fix the issue, verify that your media value is a syntactically correct media query. Use valid media types (screen, print, all), wrap media features in parentheses, and separate multiple queries with commas.

Examples

Incorrect: missing parentheses around media feature

<!-- ❌ Parse error: media features must be wrapped in parentheses -->

<link rel="stylesheet" href="responsive.css" media="max-width: 600px">

Correct: parentheses around media feature

<link rel="stylesheet" href="responsive.css" media="(max-width: 600px)">

Incorrect: typo in media type

<!-- ❌ Parse error: "scrren" is not a valid media type -->

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

Correct: valid media type

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

Incorrect: using or instead of a comma to separate queries

<!-- ❌ Parse error: top-level "or" is not valid between media queries -->

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

Correct: comma-separated media query list

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

Incorrect: stray semicolon in the value

<!-- ❌ Parse error: semicolons are not valid in media queries -->

<link rel="stylesheet" href="styles.css" media="screen; (max-width: 768px)">

Correct: combining media type and feature with and

<link rel="stylesheet" href="styles.css" media="screen and (max-width: 768px)">

More valid media query examples

<!-- Simple media type -->

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

<!-- Apply to all media (default behavior, but explicit) -->

<link rel="stylesheet" href="base.css" media="all">

<!-- Multiple conditions with "and" -->

<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px) and (max-width: 1024px)">

<!-- Using "not" to exclude a media type -->

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

<!-- Multiple queries separated by commas (logical OR) -->

<link rel="stylesheet" href="special.css" media="(max-width: 600px), (orientation: portrait)">

<!-- Prefers-color-scheme for dark mode -->

<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">

If you’re unsure whether your media query is valid, try testing it in a browser’s developer tools by adding a <style> block with @media and the same query — if the browser highlights it as invalid, the same value will fail in the media attribute.

Learn more:

MDN Reference

MDN: <link>: The External Resource Link element

→