Im new to HTML, and while studying some HTML tags, im constantly seeing media attribute is supported by some elements other than link tag. I know in <link> tag you can use media attribute to link an html doc to 2 different external css files that have screen size-specific formatting.

But i don't understand the use of media attribute inside the <a> tag or <source> tag. what is the use case of media tag in these 2 tags.

When i run the below codes (from w3school website) with or without the media attribute, i can't see any difference.

<!-- examples from w3 school -->

<a href="att_a_media.asp?output=print"
media="print and (resolution:300dpi)">
Open media attribute page for print.</a>

<!-- or -->

<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">

Is the media attribute important for these 2 tags, can i just safely ignore them ?

CodePudding user response：

media is one of available attributes for <a>, <area>, <link>, <source> and <style> tags.

MDN describes media:

This attribute specifies the media that the linked resource applies to. Its value must be a media type / media query. This attribute is mainly useful when linking to external stylesheets — it allows the user agent to pick the best adapted one for the device it runs on.

In HTML, media queries can be applied to various elements:

• In the <link> element's media attribute, they define the media to which a linked resource (typically CSS) should be applied.
• In the <source> element's media attribute, they define the media to which that source should be applied. (This is only valid inside
  <picture> elements.)
• In the <style> element's media attribute, they define the media to which the style should be applied.

Examples from MDN:

<!-- link tag -->
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

<!-- picture tag -->
<picture>
   <source srcset="mdn-logo-wide.png" media="(min-width: 800px)">
   <source srcset="mdn-logo-medium.png" media="(min-width: 600px)">
   <img src="mdn-logo-narrow.png" alt="MDN Web Docs">
</picture>

MDN Notes:

In HTML 4, this can only be a simple white-space-separated list of media description literals, i.e., media types and groups, where defined and allowed as values for this attribute, such as print, screen, aural, braille. HTML5 extended this to any kind of media queries, which are a superset of the allowed values of HTML 4.

Browsers not supporting CSS3 Media Queries won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.

CodePudding user response：

It's Specifies the pixel density (dpi) of the target display/paper. "min-" and "max-" prefixes can be used. You can see the result if you try to print the web page.

<a href="att_a_media.asp?output=print"
media="print and (resolution:300dpi)">
Open media attribute page for print.</a>

<source> is the child of the <picture> element most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to fill the browser viewport.

Example:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

CodePudding user response：

it specifies what media or device the linked document is optimized for.This attribute is used to specify that the target URL is designed for special devices (like iPhone), speech or print media. Only used if the href attribute is present. and Yes You can Ignore The media Attribute if you dont need it