HTML media attribute

Last update on August 19 2022 21:51:12 (UTC/GMT +8 hours)

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

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

View this example in a separate browser window

Example of HTML media attribute with link

Previous: HTML maxlength attribute
Next: HTML method attribute