HTML5: How to specify on what device the linked document will be displayed?

Last update on February 10 2024 11:41:58 (UTC/GMT +8 hours)

Solution :

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html>
<head>
<meta charset="utf-8"><!-- Specifies the character encoding for the document -->
<title>How to specify on what device the linked document will be displayed</title><!-- Sets the title of the document -->
</head>
<body>
<img src="https://www.w3resource.com/w3r_images/html-area-element.png" alt="area example " width="308" height="190" border="0" usemap="#Map"><!-- Inserts an image with an associated image map -->

<map name="Map"><!-- Defines an image map with the name "Map" -->
<area shape="rect" coords="8,5,100,77"   href="https://www.w3resource.com/mysql/mysql-tutorials.php" target="_blank" alt="mysql tutorial" media="handheld"><!-- Defines a rectangular area within the image map with a hyperlink to a MySQL tutorial and specifies that the linked document is intended for handheld devices -->
<area shape="circle" coords="155,93,59" href="https://www.w3resource.com/php/php-home.php" target="_blank" alt="php tutorial" media="handheld"><!-- Defines a circular area within the image map with a hyperlink to a PHP tutorial and specifies that the linked document is intended for handheld devices -->
<area shape="rect" coords="197,136,306,188"  href="https://www.w3resource.com/sql/sql-tutorials.php" alt="sql tutorials" media="handheld"><!-- Defines another rectangular area within the image map with a hyperlink to SQL tutorials and specifies that the linked document is intended for handheld devices -->
</map><!-- Ends the image map -->
</body>
</html>

Explanation:

The HTML document starts with a declaration of its type and version (<!DOCTYPE html>).
The <html> element encloses the entire HTML document.
The <head> section contains metadata about the document, but in this case, it's empty.
Inside the <body> section, there's an <img> element that inserts an image (html-area-element.png) with specified attributes like alt, width, height, border, and usemap.
Below the image, there's an image map (<map> element) named "Map" which defines clickable areas on the image.
Inside the image map, there are three clickable areas (<area> elements) defined:

A rectangular area linking to a MySQL tutorial page (href="https://www.w3resource.com/mysql/mysql-tutorials.php") and specifying that the linked document is intended for handheld devices (media="handheld").
A circular area linking to a PHP tutorial page (href="https://www.w3resource.com/php/php-home.php") and specifying that the linked document is intended for handheld devices (media="handheld").
Another rectangular area linking to SQL tutorials page (href="https://www.w3resource.com/sql/sql-tutorials.php") and specifying that the linked document is intended for handheld devices (media="handheld").

Each <area> element has attributes like shape (defining the shape of the area), coords (specifying the coordinates of the shape), href (indicating the target URL), target (setting where the linked document will open), alt (providing alternative text for the area), and media (specifying the target device type for the linked document).

Live Demo:

See the Pen exercise-link-media-tag-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page