There’s been so many times that I’ve wished I could quickly link to a specific headline in an article, but there’s no id attributes on the tag…so I can’t.
But then there’s nothing I can do to fix it, because it actually requires the blog author to overhaul their site to add `id`s to all the heading tags which may not be a quick job.
So, my dear blog author, here’s my work around until you do serve `id`s in your headings.
[](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
JavaScript to generated permalinks[](#javascript-to-generated-permalinks)
We’re going to add a single JavaScript file that will crawl through all our heading elements, and convert the text of the heading into an id.
Then, if there’s a hash fragment in the URL, the window will jump down to the named element. Thus "faking" permalink support.
The id[](#the-id)
The id attribute is only applied if there’s no id on the heading element and is simply a regular expression that strips away anything that isn’t an alphanumeric and converts it to lowercase.
So a heading that reads: "What does a Pro account get you?" is converted to whatdoesaproaccountgetyou. [Pretty simple](https://jsbin.com/help/pro#whatdoesaproaccountgetyou).
Exposing the link[](#exposing-the-link)
Inspired by Github’s readme permalinks, when you hover near the left of the title then you’ll see a ¶ character that is clickable and gives the reader the permalink.
This style is injected via the JavaScript, and it’s quite possible you’ll need to tweak it a little to get it style correctly on your own site (but it’s pretty small).
Usage[](#usage)
Simple. [Download the script](https://github.com/remy/permalink). Then just slap the script in the footer of your site (or after all your heading tags) and it’ll upgrade your headings for your visitors:
<script src="js/permalink.js"></script>Now I can share headline specific links to your site whilst all you needed to do was add one line. Thank you!
Published 8-Aug 2014 under #code & #javascript. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/automatic-permalinks-for-blog-posts.md)
Comments
Lock Thread
Login
Add Comment[M ↓ Markdown]()
[Upvotes]()[Newest]()[Oldest]()
Neil
0 points
8 years ago
I’ve had the same thought as you and built a Django app last year that will parse the HTML and add an id attribute if it doesn’t exist. The code is no longer running but here is the source [https://github.com/nwjlyons…;](https://github.com/nwjlyons/frag).
Sagi avinash varma
0 points
9 years ago
Have been a big fan of this.\ can you release it as a browser extension so that its applicable everywhere and as community builds people can share permalinks seemlessly
?
Anonymous
0 points
9 years ago
You may also find [fragmentions](http://www.kevinmarks.com/fragmentions.html) of interest… it’s similar, but is designed to work for any text on the page.
?
Anonymous
0 points
9 years ago
You can also use CSS to expose the fragment which is something I first noticed on A List Apart:
h1[id]:hover::after { content: '#' attr(id) ; }
I’ve gone into a bit more detail in a blog post: [http://decadecity.net/blog/…;](http://decadecity.net/blog/2014/01/27/improving-usability-headings-fragment-identifiers#css)
[Commento](https://commento.io)