Semantic Anchor Links
HTML anchor links (<a>
) have a feature called a relation attribute (<a rel="">
) that 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.[1]
Author
Use the rel="author"
to indicates that the linked document provides information about the author. This can be useful when writting blog articles.
<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"
o reference keywords, or categories.[2]
<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>