Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

HTML target Attribute

HTML Web Development Front End Technology

The target attribute of the <area> element specifies where to open the linked document when a clickable area within an image map is activated. It determines whether the link opens in the current window, a new window, or a specific frame.

Syntax

Following is the syntax for the target attribute −

<area target="_blank|_self|_parent|_top|framename">

Target Attribute Values

The target attribute accepts the following values −

  • _blank − Opens the linked document in a new window or tab.

  • _self − Opens the linked document in the same frame or window (default behavior).

  • _parent − Opens the linked document in the parent frame.

  • _top − Opens the linked document in the full body of the window, breaking out of all frames.

  • framename − Opens the linked document in a named frame or iframe.

Target Attribute Values _blank New Window/Tab _self Same Window _parent Parent Frame _top Full Window

Using Target with Image Maps

Image maps use the <area> element to define clickable regions within an image. Each area can have its own target behavior, allowing different parts of the same image to open links in different ways.

Example

Following example demonstrates the target attribute with different values in an image map −

<!DOCTYPE html>
<html>
<head>
   <title>Target Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>Learning Technologies</h2>
   <p>Click on different areas to see target behavior:</p>
   
   <img src="/images/usemap.gif" alt="Tutorial Map" border="0" usemap="#tutorials" style="border: 2px solid #ccc;"/>
   
   <map name="tutorials">
      <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27"
            href="/perl/index.htm" alt="Perl Tutorial" target="_blank"/>
      <area shape="rect" coords="22,83,126,125" alt="HTML Tutorial"
            href="/html/index.htm" target="_self" />
      <area shape="circle" coords="73,168,32" alt="PHP Tutorial"
            href="/php/index.htm" target="_blank" />
   </map>
   
   <p><b>Note:</b> Perl and PHP links open in new tabs (_blank), while HTML opens in the same window (_self).</p>
</body>
</html>

The image map defines three clickable areas with different target behaviors −

Tutorial Map Image with Clickable Areas:
- Polygon area (Perl): Opens in new tab
- Rectangle area (HTML): Opens in same window  
- Circle area (PHP): Opens in new tab

Target with Named Frames

The target attribute can also reference a specific named frame or iframe to open the linked document within that frame.

Example

Following example shows how to use target with a named iframe −

<!DOCTYPE html>
<html>
<head>
   <title>Target with Named Frame</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>Navigation Menu</h2>
   
   <img src="/images/navigation.gif" alt="Navigation" usemap="#nav" style="border: 1px solid #ddd;"/>
   
   <map name="nav">
      <area shape="rect" coords="10,10,100,40" 
            href="/html/index.htm" alt="HTML" target="contentFrame"/>
      <area shape="rect" coords="10,50,100,80" 
            href="/css/index.htm" alt="CSS" target="contentFrame"/>
      <area shape="rect" coords="10,90,100,120" 
            href="/javascript/index.htm" alt="JavaScript" target="_blank"/>
   </map>
   
   <h3>Content Area:</h3>
   <iframe name="contentFrame" src="/html/index.htm" width="400" height="200" style="border: 1px solid #ccc;">
      Your browser does not support iframes.
   </iframe>
</body>
</html>

In this example, HTML and CSS links load within the named iframe contentFrame, while JavaScript opens in a new tab.

Default Target Behavior

If the target attribute is not specified, the default behavior is _self, meaning the linked document opens in the same window or frame where the area was clicked.

Example − No Target Specified

<!DOCTYPE html>
<html>
<head>
   <title>Default Target Behavior</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>Default Target Example</h2>
   
   <img src="/images/simple-map.gif" alt="Simple Map" usemap="#defaultMap" style="border: 1px solid #999;"/>
   
   <map name="defaultMap">
      <area shape="rect" coords="0,0,150,50" 
            href="/tutorials/index.htm" alt="Tutorials">
      <area shape="rect" coords="0,60,150,110" 
            href="/articles/index.htm" alt="Articles" target="_self">
   </map>
   
   <p>Both areas behave the same way (open in current window) since _self is the default.</p>
</body>
</html>

Browser Support and Considerations

The target attribute is widely supported across all modern browsers. However, consider the following points −

  • User Experience − Opening links in new tabs (_blank) can be disruptive to users. Use it judiciously.

  • Security − When using target="_blank", consider adding rel="noopener" for security reasons.

  • Accessibility − Always provide clear alt text for area elements to support screen readers.

Target Attribute Values Comparison

Target Value Behavior Use Case
_blank Opens in new window/tab External links, downloadable resources
_self Opens in same window (default) Normal navigation within the site
_parent Opens in parent frame Breaking out of child frames
_top Opens in full window Breaking out of all frames
framename Opens in named frame Loading content in specific iframe

Conclusion

The target attribute in <area> elements provides precise control over where linked documents open when users interact with image map regions. Use _blank for external links, _self for same-window navigation, and named frames for loading content into specific areas of your page layout.

Updated on: 2026-03-16T21:38:53+05:30

170 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements