HTML Course 5.4 target and rel attributes and security best practices

5.4 The target Attribute

The target attribute on an anchor (<a>) or form (<form>) element specifies where to open the linked document. By default, browsers use _self, which replaces the current page. Common values:

• _self – load in the same browsing context (default)
• _blank – open in a new tab or window
• _parent – load in parent frame (if inside an <iframe>)
• _top – load in full body of the window, breaking out of all frames
• framename – a named <iframe name='framename'> target

Example: Opening a link in a new tab:

Visit Example
  

If you use a custom frame name, name your iframe and reference it:

Chapter 1
  

5.4.1 Detailed Behaviors and Caveats

• _blank always creates a new browsing context. Modern browsers may reuse a hidden tab if links share the same source, but treat them as separate contexts.
• _self is implicit and safe, as it doesn’t spawn new windows or enable external manipulations.
• Custom frame names must begin with a letter and cannot conflict with reserved names (_self, _blank, etc.).
• When targeting cross-origin URLs, the window.opener object is set by default for _blank links, enabling potential reverse-tabnabbing attacks.

5.4.2 The rel Attribute

The rel attribute defines the relationship between the current document and the linked resource. Common values include:

Typical secure usage when combining target='_blank':

  External Site

  

5.4.3 Security Best Practices

Using target='_blank' without further precautions exposes the page to reverse-tabnabbing. The newly opened page can call window.opener.location = 'malicious-site' to redirect your original page.

1. Always include rel='noopener' when using target='_blank'.
2. Use noreferrer if you also want to hide the referrer URL from the destination.
3. Audit third-party links: ensure no untrusted scripts can exploit window.opener.
4. For enhanced isolation, consider using <iframe sandbox> or Content Security Policy (CSP) directives.

Combined example with detailed comments:

   rel='noopener noreferrer'  
>
  Safe External Link

  

5.4.4 Summary

• target controls where content loads; use it consciously to manage navigation flow.
• rel defines link relationships; noopener and noreferrer mitigate security risks.
• Always pair target='_blank' with rel='noopener noreferrer' to follow security best practices.