Ping and rel types
Learn rel types like noopener, noreferrer, license and bookmark.
The rel attribute and new types
The rel attribute tells the link's relation. You should remember noopener from external links opened in a new tab. Now two new types: license points to a licence or copyright page, bookmark to a permanent link of a post.
Example: <a href="/license" rel="license">Licence</a> says the link goes to the licence page. <a href="/posts/first-post" rel="bookmark">Permanent link</a> says this URL is the permanent location of a post.
noopener, noreferrer and ping
With target="_blank" on external links, rel="noopener" adds security: the opened tab cannot reach the opener page's window.opener. noreferrer stops the referer information from reaching the target page; useful for privacy.
You usually write them together: rel="noopener noreferrer". The ping attribute does something else: when the link is clicked, the browser sends small background requests to listed URLs; it is mostly used to track user behaviour.
Exercise Write a safe external link
Write an external link: href goes to https://wikipedia.org and rel="noopener noreferrer" makes it safe. The link text is Wikipedia.
Show example solution
<a href="https://wikipedia.org" rel="noopener noreferrer">Wikipedia</a>Test yourself
-
Which rel value points to a licence page?
- bookmark
- license
- noopener
- noreferrer
Show answer
license — Correct. license is reserved for licence and copyright pages.
-
Complete the rel attribute
<a href="https://wikipedia.org" target="_blank" rel="____">Wikipedia</a>Show answer
<a href="https://wikipedia.org" target="_blank" rel="noopener noreferrer">Wikipedia</a> -
Match each rel type to its meaning
- noopener
- Safe new tab
- noreferrer
- Blocks referer info
- license
- Points to licence page
- bookmark
- Permanent post link