HTML5: How to specify the location of the linked document?

Last update on February 10 2024 11:42:54 (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 the location of the linked document</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"><!-- Defines a rectangular area within the image map with a hyperlink to a MySQL tutorial -->
<area shape="circle" coords="155,93,59" href="https://www.w3resource.com/php/php-home.php" target="_blank" alt="php tutorial"><!-- Defines a circular area within the image map with a hyperlink to a PHP tutorial -->
<area shape="rect" coords="197,136,306,188"  href="https://www.w3resource.com/sql/sql-tutorials.php" alt="sql tutorials"><!-- Defines another rectangular area within the image map with a hyperlink to SQL tutorials -->
</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").
A circular area linking to a PHP tutorial page (href="https://www.w3resource.com/php/php-home.php").
Another rectangular area linking to SQL tutorials page (href="https://www.w3resource.com/sql/sql-tutorials.php").

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), and alt (providing alternative text for the area).

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page