You know relative anchor links, right? They're the things that help you
to link to a section of a document, e.g. https://example.com/your-doc#part-of-doc
.
This is especially helpful for customer support help centers (knowledge bases,
documentation, etc).
I can never ever remember how to do this, so I'm making this gist to store my brain on the internet. Here are some things I forget:
- Use
name
to name your relative link - Don't include
#
in the name value - Relative links make them look like links even though when you click them, they do nothing. Use CSS to clean it up.
Format your relative link like this:
<h3><a class="relative" name="inspect-mode">Inspect Mode</a></h3>
You'll be able to link to that doc with e.g. https://example.com/your-doc#inspect-mode
Note the .relative
class applied to that doc. Use the following CSS to make the relative
anchor not look like a clickable link:
a.relative {
color: inherit;
-webkit-text-decoration:none;
-moz-text-decoration:none;
-ms-text-decoration:none;
-o-text-decoration:none;
text-decoration:none
}
a.relative:hover,a.relative:active {
color: inherit;
-webkit-text-decoration:none;
-moz-text-decoration:none;
-ms-text-decoration:none;
-o-text-decoration:none;
text-decoration:none
}
You can also just add the anchor without wrapping text:
<a name=“whatever”></a>```
That will let yet you link to something without needing to add special CSS.