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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-media-on-element-link-parse-error
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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](https://www.w3.org/TR/mediaqueries-5/). 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

```html
<!-- ❌ Parse error: media features must be wrapped in parentheses -->
<link rel="stylesheet" href="responsive.css" media="max-width: 600px">
```

### Correct: parentheses around media feature

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

### Incorrect: typo in media type

```html
<!-- ❌ Parse error: "scrren" is not a valid media type -->
<link rel="stylesheet" href="styles.css" media="scrren">
```

### Correct: valid media type

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

### Incorrect: using `or` instead of a comma to separate queries

```html
<!-- ❌ 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

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

### Incorrect: stray semicolon in the value

```html
<!-- ❌ 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`

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

### More valid media query examples

```html
<!-- 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.