How do HTML link relations relate to fragment identifiers?

276 Views Asked by ACJ At 14 May 2019 at 08:15

Sometimes, we use the rel attribute do convey meaning to a link to a specific page or page fragment, like so:

<link rel="author" href="https://example.com/humans.txt">
<a rel="bookmark" href="https://example.com/page#thing">thing</a>

So far, so good.

Case

Now say I have a glossary page, https://example.com/glossary, and on that page, I have a definition list with a bunch of terms:

<dl id="dictionary">
  <dt id="foo">foo</dt>
  <dd>A foo is not a <a href="#bar">bar</a>.</dd>
  <dt id="bar">bar</dt>
  <dd>A metric unit of pressure that serves alcoholic beverages.</dd>
</dl>

This makes we wonder what the proper/best way is to link to the glossary, and to a specific term in said glossary. I’ve come up with the following options:

For the glossary:

1. <link rel="glossary" href="https://example.com/glossary">
2. <link rel="glossary" href="https://example.com/glossary#dictionary">

For a specific term:

1. <a rel="bookmark" href="https://example.com/glossary#bar">bar</a>
2. <a rel="glossary" href="https://example.com/glossary#bar">bar</a>
3. <a rel="bookmark glossary" href="https://example.com/glossary#bar">bar</a>
4. <a href="https://example.com/glossary#bar">bar</a>

What do you think are the best options, and why? Please note that it’s entirely possible the best way is something I have not considered.

Original Q&A

There are 1 best solutions below

unor On 14 May 2019 at 16:06 BEST ANSWER

The glossary link type refers to "a document providing a glossary of terms that pertain to the current document".

The bookmark link type gives the permalink for the nearest ancestor article, and if there is none, for the nearest ancestor section.

So, when you link to a term definition for a term that appears in a blog post (or similar), you must not use the bookmark type, otherwise the permalink for this blog post would be the URL of the term definition. But as the blog post contains terms that are defined in the glossary, you can link to the glossary with the glossary link type.

<!DOCTYPE html>
<title>Blog post that contains a term defined in the glossary</title>
<link rel="glossary" href="/glossary" />

<article>
  <p>The <a href="/glossary#foo">foo</a> is great.</p>
</article>

Providing fragment identifiers for the glossary should never hurt, and it would even be required in a few cases: for example, when the fragment identifier is needed to display the glossary, or when the document contains other main content in addition to the glossary.

NB: You could use the dfn element in the dt element, and move the id attribute to the dfn element.

<dl id="dictionary">
  <dt><dfn id="foo">foo</dfn></dt>
  <dd>A foo is not a <a href="#bar">bar</a>.</dd>
</dl>

You might also be interested in adding structured data, using Schema.org’s DefinedTerm and DefinedTermSet.

How do HTML link relations relate to fragment identifiers?

Case

There are 1 best solutions below

Related Questions in HTML

Related Questions in HYPERLINK

Related Questions in SEMANTIC-MARKUP

Related Questions in REL

Trending Questions

Popular # Hahtags

Popular Questions