Links and attributes

Target, rel, and downloads

Decide when a link should open a new tab, describe its relationship, or suggest downloading a resource instead of navigating to it.

6 minute lesson

~~~

Links normally open in the current tab. That is a good default because it leaves navigation under the visitor’s control.

When a new tab is genuinely useful, use target="_blank":

<a
  href="https://example.com/report/"
  target="_blank"
  rel="noopener"
>
  Open the external report in a new tab
</a>

rel describes the relationship between the current page and the destination. noopener prevents the new page from receiving access to the page that opened it in older browser behavior. Modern browsers generally provide this protection for _blank, but stating it is harmless and explicit.

Opening a new tab can surprise people. If you do it, say so in the link text or nearby context.

The download attribute suggests downloading a same-origin resource:

<a href="/files/route-map.pdf" download>Download the route map</a>

The browser and server still have the final say. Cross-origin links may ignore the attribute, and response headers can affect the result.

Quick check

Result

You got of right.

Lesson completed