w3resource

HTML media attribute

media

The purpose of the HTML media attribute is to define the media type that the resource linked to the element is designed for.

Supported elements

HTML media attribute supports style and link elements.

Syntax

<ElementName media="value" >.....</ElementName>

Where ElementName is any supported element.

Type of value

Media description.

Value

Value Intended media
screen Computer screens. This is the default value.
tty Fixed-pitch character grid, such as teletypes, terminals, or portable devices those have limitations in display capabilities.
tv Television type devices (low resolution, color, limited scrollability).
projection Projectors.
handheld Handheld devices (small screen, monochrome, bitmapped graphics, limited bandwidth).
print Print preview mode/printed in an opaque media.
braille Braille feedback devices.
aural Speech synthesizers.
all Suitable for all devices.

Default value

Default value of HTML media attribute is screen.

Supported doctypes

HTML 4.01 strict, HTML 4.01 transitional, HTML 4.01 frameset.

Example of HTML media attribute with style

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of HTML media attribute with style</title>
<style type="text/css" media="screen, print, projection" />
p {background-color: aliceblue; color: maroon} 
</style>
</head>
<body>
<p>We are learning html with w3resource.com</p>
</body>
</html>

Result

html media attribute with style

View this example in a separate browser window

Example of HTML media attribute with style

Example of HTML media attribute with link

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of HTML media attribute with link</title>
<link rel='stylesheet' href='link.css' type='text/css' media="screen" />
</head>
<body>
<p>We are learning html with w3resource.com</p> 
</body>
</html>

Result

html media attribute with link

View this example in a separate browser window

Example of HTML media attribute with link

Previous: HTML maxlength attribute
Next: HTML method attribute