We use cookies

This site uses cookies from cmlabs to deliver and enhance the quality of its services and to analyze traffic..

Master SEO vocabulary with all essential terms and meanings here.

rel Attribute

Last updated: Jun 20, 2024

By using the rel attribute, you can establish relationships between the current document and other documents, which is useful in UX empowerment strategies and SEO optimization.

Let's discover what is rel in HTML and how to create page numbering with rel below.

 

What Is rel in HTML?

Within the HTML code structure, there's the rel attribute, which is a component of the <a> tag or link to define the relationship between each page. 'rel' itself is an abbreviation of 'relationship'.

The rel attribute is also valid in <link>, <area>, and <form>, where the supported values depend on the element in which the attribute is found. However, some values might only be relevant in certain subsets of these elements.

So, what is rel in HTML? It is the attribute that specifies the relationship between the linked document and the current document. Search engines often use the rel attribute to gather more information about a link.

The rel attribute is only used when there's an href attribute within a structure. The href determines the location of the linked file or document, while the rel function in HTML is to mark the relationship between the linked document and the relevant document.

Then, you can use the appropriate rel attribute values for the type of relationship between pages. Here are the possible values ​​of the rel attribute:

  • author: The targeted page is the author's page.
  • alternate: The targeted page is an alternative page with the same purpose as the currently opened page.
  • bookmark: The targeted page is often bookmarked.
  • help: The targeted page is a help page.
  • external: The targeted page is outside the current page's section.
  • next: The targeted page is a continuation of the current one.
  • license: The targeted page is a license page.
  • nofollow: The targeted page is not directly attributed.
  • noopener: The targeted page operates separately and protects from windows.opener.
  • noreferrer: The targeted page prevents search engines from directing to a new page.
  • sponsored: The targeted page is an advertisement page.
  • ugc: The targeted page is user-generated content.
  • tag: The tag of the currently opened page.
  • search: The targeted page is a search page.
  • prev: The targeted page is the content of the previous page.

 

To write the rel attribute, you insert the rel attribute within the opening <a> tag as shown in the following example:

<a href="#" title="#" rel="#" target="_blank"><strong>#</strong></a>

Then, if there are multiple values ​​for the rel attribute, you can write them separated by spaces or commas like this:

With spaces:

<a href="url" rel="noindex nofollow noopener ugc">text link</a>

With commas:

<a href="url" rel="ugc,nofollow,sponsored">text link</a>

Here is an example of using the rel attribute on the <link> element:

<link rel="stylesheet" href="/assets/css/dul-button.css">

The purpose of the rel attribute on the <link> element is to indicate that the linked file is a CSS file or stylesheet, while the href function indicates the location of that file.

You can use the rel attribute in browsers that support it, such as Chrome, Edge, Firefox, Safari, and Opera.

The rel attribute does not have a default value. So, if the attribute is removed or if there are no values ​​in the supported attribute, then the document does not have any specific relationship with the target resource other than the hyperlink between them.

For example, if the rel attribute on <link> and <form> is missing, has no keywords, or has no one or more keywords separated by spaces above, then the element does not create any links.

On the other hand, <a> and <area> will still create links, but without the specified relationships.

 

Page Numbering with rel Attribute

Now that you understand what is rel in HTML, you also need to know how to use the rel attribute for page numbering.

As explained earlier, there are various values ​​for the rel attribute in HTML, such as next and prev. These two values ​​can be used to indicate the relationship between the URL components in a sequence with page numbering.

The sequence could be an article with multiple component pages, a product category with items spread across various pages, or a forum message sequence divided into sequential URLs.

Adding rel="next" and rel="prev" markup to the component pages in the sequence can inform search engines to combine indexing properties (like links) from the URLs or component pages into the sequence as a whole.

This means that links should not be scattered between page-1.html, page-2.html, and so on, but grouped according to the sequence.

Furthermore, rel="next" and rel="prev" markup also provide information to search engines to direct visitors to the most relevant URL.

However, it's important to note that there are some exceptions in the implementation of rel="next" and rel="prev".

If you want to offer a "view all" page to site visitors, you need to follow guidelines from search engines, such as Google, to understand how they display "view all" pages.

Search engines will display the "view all" page if it matches the search results rather than displaying component pages that tend to appear with rel="next" and rel="prev".

On the other hand, if you don't want search engines to display a "view all" page or if your site indeed doesn't have such a page, you can use rel="next" and rel="prev" markup as outlined in Google's official guidelines.

cmlabs

cmlabs

WDYT, you like my article?

Latest Update
Last updated: Nov 21, 2024
Last updated: Nov 08, 2024
Last updated: Nov 06, 2024
Explore Other Terms

Streamline your analysis with the SEO Tools installed directly in your browser. It's time to become a true SEO expert.

Free on all Chromium-based web browsers

Install it on your browser now? Explore Now cmlabs chrome extension pattern cmlabs chrome extension pattern

Need help?

Tell us your SEO needs, our marketing team will help you find the best solution

Here is the officially recognized list of our team members. Please caution against scam activities and irresponsible individuals who falsely claim affiliation with PT CMLABS INDONESIA DIGITAL (cmlabs). Read more
Marketing Teams

Agita

Marketing

Ask Me
Marketing Teams

Destri

Marketing

Ask Me
Marketing Teams

Thalia

Marketing

Ask Me
Marketing Teams

Irsa

Marketing

Ask Me
Marketing Teams

Yuliana

Business & Partnership

Ask Me
Marketing Teams

Rochman

Product & Dev

Ask Me
Marketing Teams

Said

Career & Internship

Ask Me

Interested in joining cmlabs? Boost your chances of becoming an SEO Specialist with our new program, cmlabs Academy. it's free!

Check

New! cmlabs Added 2 Tools for Chrome Extensions! What Are They?

Check

There is no current notification..