HTML - media Attribute

The HTML media attribute is used to specify a hint of the media for which the linked resource was designed.

When used the style element it defines which media the style should be applied to. Its value is a media query, which is default to all if the media attribute is missing.

The media attribute is allowed with an <source> if its parent element is an <picture> element but is not allowed if its parent element is an <audio> or <video> element.

This attribute works with the following elements −

  • <a> element
  • <link> element
  • <area> element
  • <source> element
  • <style> element
The ‘media’ attribute can accept several values.

Following are operators supported by media attribute value −

  • and specifies AND operator
  • , (comma) specifies OR operator
  • not (specifies NOT operator)

Here, are some examples of the valid media value expressions −

  • media = all and (orientation: portrait)
  • media = screen and (min-width : 680px)
  • media = screen and (max-width : 720px)
  • media = print

Syntax

Following is the syntax for HTML media attribute − 

<tag media = "value"></tag>

Example

In the following example, we are going to use the media attribute with the a tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'media' attribute</title>
   <style>
      a {
         text-decoration: none;
         background-color: aqua;
         padding: 10px;
      }
   </style>
</head>
<body>
   <!--HTML 'media' attribute-->
   <p>Example of the HTML 'media' attribute</p>
   <a href="#" media="screen and (max-width: 680px;)">TutorialsPoint</a>
</body>
</html>

On running the above code, the output window will pop up displaying the text along with a hyperlink applied with CSS on the webpage.

Example

Consider the another scenario, where we are going to use the media attribute with the link tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'media' attribute</title>
   <!--used media = 'print'-->
   <link rel="stylesheet" href="style.css" media="print">
   <style></style>
</head>
<body>
   <!--HTML 'media' attribute-->
   <p>Example of the HTML 'media' attribute</p>
   <h2>Open the media attribute page for print </h2>
   <a href="https://www.tutorialspoint.com/codingground.htm" target="_blank">Click here</a>
</body>
</html>

When we run the above code, it will generate an output consisting of the text along with a hyperlink displayed on the webpage.

Example

Let's look at the following example, where we are going to use the media attribute with the source tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'media' attribute</title>
   <!--used media = 'print'-->
   <link rel="stylesheet" href="style.css" media="print">
   <style></style>
</head>
<body>
   <!--HTML 'media' attribute-->
   <p>Example of the HTML 'media' attribute</p>
   <picture>
      <source srcset="https://www.tutorialspoint.com/static/images/logo.png?v3" media="screen and (min-width: 650px)">
      <img src="https://www.tutorialspoint.com/static/images/logo.png?v3" alt="">
   </picture>
   <p>The media attribute is allowed in the 'source' element if the parent element is the 'picture' element.</p>
</body>
</html>

On running the above code, the output window will pop up displaying the image on the webpage.

html_attributes_reference.htm
Advertisements