Wednesday, May 09, 2007

Linking to a section of a post

I hope I can do a good job of explaining this. I am looking for a way to link to a certain section of a post. It is probably best explained with an example.

A little while ago I wrote a post describing and explaining Indian Spices. It is a long post and I would now like to use this as a reference for my future posts. So, say I am writing about a recipe which contains turmeric powder, I would link to be able to link to my Indian Spice post and have the particular section where I described Turmeric Powder come up. Currently when I link to the post it simply does the usual and brings the reader to the beginning of the post leaving them to scroll down to find the entry about the particular spice. Not comfortable.
(did that make sense?)

I often see this on pages like FAQs etc.

So I was wondering if there is a special code or a way to do this and if anyone can talk me through it.

This Post was written by Meeta from What's For Lunch, Honey?


Sophie said...

Hi Meeta,

I've emailed you an explanation of how to do this as blogger won't display all of the html tags that are needed to explain how to do it.

If anybody else wants to know about this there is an OK explanation here:

XHTML tutorial

The technique might not work in blogger based blogs because it has rules about which html tags are allowed but you may as well try it (if it doesn't strip the tags out it might work!)


Meeta said...

Sophie, thanks for the mail and explanation. I am going to try it now and see if it works!! You made my day!!

Kalyn said...

Meeta, I'd love to know if it works for you. I've been wondering how to do this for a while now. (Looking forward to seeing how you'll link to the Indian spices too!)

Derrick said...

Since your blog publishes items on separate pages, this is very easy.

You'll have to edit the original post, but at each spice point, put code that looks like this <a name="turmeric" /> (you might need to do "turmeric" ></a>).

Then you can link to

Note the #turmeric at the end.

The a tag actually stands for anchor, and this was its original use, defining an anchor in a document that you can go to right away. Linking to another page, the most common use of the a tag, was somewhat later in HTML's development. If you've ever wondered why every HTML element other than linking uses an obvious word or letter for its purpose (such as b for bold, or table for table), now you know.

Derrick said...

Ack, blogger cut off the url. It would be the full page address, including.html, followed by # and the name of the anchor tag you added. So #turmeric.

Kalyn said...

Derrick, thanks so much. I'm definitely going to start using this for some pages where I have long lists, like my recipe archives. Saving this post now.

Sam said...

I used this method extensively in last years menu for hope - for the FAQs so it does indeed work on blogger.

example here

look at the source code for more details

also - sophie there is also a way to display html tags

You can use escaped characters to show code in HTML. So you can tell folks they need to type:

Blah Blah

< = <

> = >

this from a very kind anonymous comment in the very second ever post at food blog scool!

Sam said...

ok that didn't work in the comments- check here to see what I am talking about

Meeta said...

Hi Kalyn,

Yes, it did work for me and I have started using it successfully. If you look on my sidebar you will see a new section called "The Know Hows of Food" Here I have linked to all ingredients and in some cases methods that I have discussed in previous posts. I love it!! I have an extra menu called "The Indian Spice Kitchen" and all the spices are linked there individually. In the future I can now simply refer to these.

Sophie, you are a genius and I wish I could hug you for this!!