HTML Validation

The “longdesc” attribute on the “img” element is obsolete. Use a regular “a” element to link to the description.

About This HTML Issue

The deprecated property longdesc on img elements was used in HTML4 to specify the URL of a text or HTML file which contained a long-form description of the image. This could be used to provide optional added details beyond the short description provided in the title or alt attributes.

Here’s an example from HTML4:

<img
  src="cat.jpg"
  alt="Smiling Cat"
  longdesc="image-descriptions/smiling-cat.html" />

This, however, is no longer valid in HTML5 and can be converted to the following instead:

<a href="image-descriptions/smiling-cat.html">
  <img src="cat.jpg" alt="Smiling Cat" />
</a>

Learn more:

→ MDN: longdesc property

Last reviewed: November 28, 2022

Was this guide helpful?

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing

Related W3C Validator Issues

CSS: Deprecated media feature “max-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

Replace device-based media features with viewport-based features; use max-width instead of max-device-width.

max-device-width and min-device-width were removed from modern media queries because they target physical device dimensions, not the browser viewport. They fail on high‑DPI screens, resizable windows, and zoom scenarios. Use viewport-relative features like width, min-width, and max-width, which respond to the layout viewport and are supported across browsers. For device pixel density, prefer resolution (e.g., min-resolution: 2dppx) instead of -webkit-min-device-pixel-ratio. Keep breakpoints content-driven; pick sizes where your layout needs to adapt, not specific devices.

HTML Examples

Example causing the validator warning

<!doctype html>
<html lang="en">
<head>
  <title>Deprecated Media Feature</title>
  <style>
    /* Deprecated: targets device width, not viewport */
    @media only screen and (max-device-width: 480px) {
      body {
        background: pink;
      }
    }
  </style>
</head>
<body>
  <p>Deprecated media feature example.</p>
</body>
</html>

Fixed example using viewport-based queries

<!doctype html>
<html lang="en">
<head>
  <title>Viewport-Based Media Query</title>
  <style>
    /* Recommended: respond to viewport width */
    @media (max-width: 480px) {
      body {
        background: pink;
      }
    }

    /* Optional: high-DPI tweak using resolution */
    @media (min-width: 481px) and (min-resolution: 2dppx) {
      body {
        background: lightblue;
      }
    }
  </style>
</head>
<body>
  <p>Fixed media feature example.</p>
</body>
</html>

CSS: Deprecated media feature “min-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

Replace device-based media features like min-device-width with viewport-based features such as min-width.

The min-device-width and max-device-width media features are deprecated in Media Queries Level 5 and are flagged by validators. They target the physical device screen, which is unreliable across modern devices and zoom settings. Use min-width/max-width to respond to the layout viewport instead. This aligns with responsive design best practices and works consistently with zoom, orientation changes, and different device pixel ratios.

Common replacements:

@media (min-device-width: X) → @media (min-width: X)
@media (max-device-width: X) → @media (max-width: X)
If you were targeting pixel density, prefer resolution (e.g., min-resolution: 2dppx) or feature queries as needed.

HTML Examples

Example causing the warning

<!doctype html>
<html lang="en">
<head>
  <title>Deprecated media feature example</title>
  <style>
    /* Deprecated: targets physical device width */
    @media screen and (min-device-width: 768px) {
      .card { padding: 24px; }
    }
  </style>
</head>
<body>
  <div class="card">Content</div>
</body>
</html>

Fixed example (viewport-based)

<!doctype html>
<html lang="en">
<head>
  <title>Viewport-based media queries</title>
  <style>
    /* Recommended: targets the layout viewport width */
    @media (min-width: 768px) {
      .card { padding: 24px; }
    }

    /* Optional: high-density displays */
    @media (min-width: 768px) and (min-resolution: 2dppx) {
      .card { border: 1px solid #ccc; }
    }
  </style>
</head>
<body>
  <div class="card">Content</div>
</body>
</html>

Bad value X for attribute “media” on element “link”: The media “projection” has been deprecated

The media attribute on the link element cannot use the deprecated value projection; only valid CSS media types should be specified.

The media attribute specifies what media/device the linked resource is designed for, using a media query or a list of valid media types. In modern HTML and CSS, commonly accepted values include all, print, and screen.

The value projection was intended for projectors but has been deprecated and is no longer recognized by browsers or the HTML standard. To ensure validity and compatibility, remove projection and use only accepted types such as screen and/or print.

Incorrect example (with deprecated value):

<link rel="stylesheet" href="style.css" media="screen, projection">

Correct examples:

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

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

If you intend your stylesheet for screens and print, you can use both screen, print; for only screens, use just screen. If the stylesheet should apply to all devices, you can omit the media attribute or use all:

<link rel="stylesheet" href="style.css">

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

Bad value “screen,projection” for attribute “media” on element “link”: The media “projection” has been deprecated

Ready to validate your sites?
Start your free trial today.

Pro Trial Free Trial