HTML5: How to specify where to open the target URL?

Last update on February 06 2024 11:31:08 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE html><!-- Specifies the document type as HTML -->
<html><!-- Starts the HTML document -->
<head><!-- Contains metadata about the HTML document -->
<title>How to specify where to open the target URL</title><!-- Sets the title of the HTML page -->
</head>
<body><!-- Contains the visible content of the HTML document -->
<img src="https://www.w3resource.com/w3r_images/html-area-element.png" alt="area example " width="308" height="190" border="0" usemap="#Map"><!-- Displays 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 linking to MySQL tutorial and specifies to open it in a new tab or window -->
<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 linking to PHP tutorial and specifies to open it in a new tab or window -->
<area shape="rect" coords="197,136,306,188" href="https://www.w3resource.com/sql/sql-tutorials.php" alt="sql tutorials"><!-- Defines another rectangular area linking to SQL tutorials without specifying where to open the link -->
</map>
</body>
</html>

Explanation:

The <!DOCTYPE html> declaration specifies the document type and version of HTML.
The <html> element is the root element of the HTML document.
The <head> section contains metadata about the HTML document, such as the title.
The <title> tag sets the title of the HTML page.
The <body> element contains the visible content of the HTML document.
The <img> tag displays an image with the specified source, dimensions, and attributes, including an alternate text for accessibility, and an associated image map.
The <map> element defines an image map with the name "Map".
The <area> tags define clickable areas within the image map, each with a specific shape, coordinates, hyperlink, and alternate text. The target="_blank" attribute specifies to open the link in a new tab or window for the first two areas, while the third area does not have this attribute, so it will open in the same tab or window by default.

Live Demo:

See the Pen area-target-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page(area)