Semantic Anchor Links

HTML anchor links have an interesting feature nested in its rel attribute.

This attribute lets you define a connection between the current document and the resource it links to. You can use this attribute to create selectors in CSS that are more descriptive and easier to understand. This article will discuss some of the most helpful rel attributes.¹

Author

Use the rel="author" to indicates that the linked document provides information about the author. This can be useful when writting blog articles.

<!-- HTML -->
<article>
  <header>
    <h1>Semantic anchor links</h1>
    <a rel="author" href="https://yannicknana.fr">Yannick Nana</a>
  </header>
 <!-- Article content -->
</article>

External

Use rel="external" to infer that the referenced document is not part of current website.

<a rel="external" href="https://frontendstories.com">Frontend Stories</a>

Help

Use the rel="help" to reference a page with information about a documentation or help page.

<footer>
  For assistance go to <a rel="help" href="/help-center">help center</a>
</footer>

Tag

Use the rel="tag" to reference keywords and categories.²

<article>
  <header>
    <h1>Semantic anchor links</h1>
    <nav>
      <a rel="tag" href="/tags/html">HTML</a>
      <a rel="tag" href="/tags/css">CSS</a>
    </nav>
  </header>
</article>

Next and Prev

Use rel="prev" or rel="next" to state relationships between a sequence of pages.

<nav>
  <a rel="prev" href="/headless-cms">Previous</a>
  <a rel="next" href="/design-tips">Next</a>
</nav>