YouTip

## HTML `` `rel` Attribute The `rel` attribute of the `` (anchor) tag specifies the relationship between the current document and the linked document. While web browsers do not typically change the visual appearance of a link based on this attribute, search engines, web crawlers, and browsers use this metadata to better understand the structure and security context of your website. --- ## Syntax The `rel` attribute is only used when the `href` attribute is present. ```html Link Text ``` --- ## Code Examples ### 1. Preventing Search Engines from Crawling a Link (`nofollow`) This tells search engine crawlers not to follow or pass SEO authority ("link juice") to the destination page. ```html Cheap Flights ``` ### 2. Opening External Links Securely (`noopener` and `noreferrer`) When opening a link in a new tab (`target="_blank"`), it is a security best practice to use `noopener` and `noreferrer` to prevent the destination page from accessing your page via the `window.opener` API. ```html Visit External Site Securely ``` ### 3. Linking to an Alternative Version (`alternate`) This indicates that the linked document is an alternative version of the current page (e.g., a print-friendly version, a translation, or an RSS feed). ```html Spanish Version of this Page ``` --- ## Attribute Values Below is a comprehensive list of standard `rel` attribute values used with the `` tag: | Value | Description | | :--- | :--- | | `alternate` | Links to an alternate version of the document (e.g., a print page, translation, or mirror). | | `author` | Links to the author of the document or article. | | `bookmark` | A permanent URL used for bookmarking (permalink). | | `external` | Indicates that the referenced document is not part of the same site as the current document. | | `help` | Links to a help document or user guide. | | `license` | Links to the copyright information or licensing agreement for the document. | | `next` | Indicates that the linked document is the next part of a series or sequence. | | `prev` | Indicates that the linked document is the previous part of a series or sequence. | | `nofollow` | Instructs search engines (like Google) not to follow or endorse the target link. | | `noopener` | Prevents the newly opened page from accessing the window that opened it (`window.opener`), improving security. | | `noreferrer` | Prevents the browser from sending the referrer header to the destination page. | | `opener` | Explicitly allows the newly opened page to access the window that opened it (default behavior). | | `search` | Links to a search tool or resource for the document. | | `tag` | Specifies a tag (keyword) that applies to the current document. | > **Note on Legacy Values:** Older HTML specifications (like HTML 4.01) included values such as `stylesheet`, `start`, `contents`, `index`, `glossary`, `chapter`, `section`, `subsection`, and `appendix`. In modern HTML5, many of these have been deprecated or are rarely used on `` tags, though `stylesheet` remains standard for the `` tag. --- ## Key Considerations * **SEO & Crawler Optimization:** Using `rel="nofollow"` is highly recommended for paid links, user-generated content (like forum comments), or untrusted links to avoid search engine penalties. * **Security Best Practices:** Always pair `target="_blank"` with `rel="noopener"` or `rel="noreferrer"` to protect your users from malicious reverse tab-nabbing exploits. Modern browsers now apply `noopener` behavior by default to links with `target="_blank"`, but explicitly declaring it ensures backward compatibility. * **Multiple Values:** You can specify multiple space-separated values within a single `rel` attribute: ```html Secure Untrusted Link ```