Relative anchor links for your documentation

readme.md

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.