HTML5: How to specify the relationship between the current document and the linked document?

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

Solution :

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata about the document -->
<meta charset="utf-8"><!-- Specifies the character encoding for the document -->
<title>How to specify the relationship between the current document and the linked document</title><!-- Sets the title of the document -->
</head><!-- Ends the head section -->
<body><!-- Contains the content of the document -->
<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" rel="alternate"><!-- Defines a rectangular area within the image map with a hyperlink to a MySQL tutorial and specifies that the linked document is an alternative version -->
<area shape="circle" coords="155,93,59" href="https://www.w3resource.com/php/php-home.php" target="_blank" alt="php tutorial" rel="alternate"><!-- Defines a circular area within the image map with a hyperlink to a PHP tutorial and specifies that the linked document is an alternative version -->
<area shape="rect" coords="197,136,306,188" href="https://www.w3resource.com/sql/sql-tutorials.php" alt="sql tutorials" rel="alternate"><!-- Defines another rectangular area within the image map with a hyperlink to SQL tutorials and specifies that the linked document is an alternative version -->
</map><!-- Ends the image map -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

The HTML document begins 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, including the character encoding and title.
Inside the <body> section, there's an <img> element that inserts an image with associated 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 an alternative version (rel="alternate").
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 an alternative version (rel="alternate").
Another rectangular area linking to SQL tutorials page (href="https://www.w3resource.com/sql/sql-tutorials.php") and specifying that the linked document is an alternative version (rel="alternate").

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 rel (specifying the relationship between the current document and the linked document).

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page