How to Link to a Specific Line or Paragraph on a Web Page Using HTML (www.imagination.gs)

Published: 17th August 2008
Views: N/A

(www.imagination.gs)
Linking to another page on the Internet is pretty much a standard part of designing a website, so much so that it is included as a basic skill in any course on creating a website. When someone clicks on a link on your site, the browser normally takes that person to the top of the new document. That is the normal and expected behaviour.

But what if you wanted to link to a specific paragraph or line within a page? For example, my Frequently Asked Questions ("FAQ") page for thesitewizard.com's Feedback Form Wizard links from the questions to the specific paragraphs with the answers. This article describes how you can do this using straightforward HTML.

Requirements
For the technique described in this tutorial to work, you must be the author of the target page. That is, if you want to link to, say, paragraph 5 of a particular page, you must be able to modify the latter page to mark paragraph 5 with a special HTML tag.

You will be using "raw" HTML code here, so you must have some idea of how to enter HTML code into your editor.

For those using a web editor like DreamWeaver, Nvu or KompoZer, there are alternative methods to accomplish what I describe here. However, you can also follow the method below by switching to the "Code" (Dreamweaver) or "Source" (Nvu and KompoZer) mode of those editors. If you use a blogging program that automatically translates things you type to HTML, you will have to find some way to enter its HTML mode.

How to Use Anchors with Names
For ease of explanation, let's take the following HTML code as an example.

Normal Behaviour In a Browser



This is the text of the top paragraph. Normally, when a web browser opens a new page, it will take the user to the top of the page.



Linking Directly to a Specific Location



To override this behaviour, certain standard techniques can be used. In particular, you will need to create named anchors in the body of the text at the point where you want to link to.



The example above has two paragraphs, each with its own sub-title, enclosed in

pairs. Let's say that for our purpose, we want to link directly to the title of the second paragraph. To do this, we have to insert an invisible marker, which I will refer to as a named anchor, into the text. A named anchor looks a bit like a hyperlink where the HTML code is concerned, but does not function as a link.

A named anchor has the following format:

The landing place of the link
Do not be deceived: this is not a normal hyperlink. An ordinary link has a "href" to point to a particular web address. This anchor merely has a name. The text "The landing place of the link" will not be underlined or printed in blue the way normal links are (by default), nor will it be clickable. It will have the normal style of that block of text and not the appearance of a hyperlink.

Using this named anchor, the second paragraph from our example above will now look like this:

Linking Directly to a Specific Location



To override this behaviour, certain standard techniques can be used. In particular, you will need to create named anchors in the body of the text at the point where you want to link to.


I happened to name this anchor "exactline", but you can name your anchors anything you like, within the rules given later in this article.

To create a link pointing to the location of a named anchor, simply affix "#name-of-named-anchor" (without the quotes) to the web address ("URL") you are linking to. The "name-of-named-anchor" must of course match the name you gave earlier, otherwise the browser won't know which part of the file to skip to.

For example, if our example above resides on http://www.example.com/some-page-or-other.html, and we wanted to directly link to our named anchor, we can use the following link:

Click here
Notice that the example links to "#exactline" because the earlier named anchor was called "exactline".

It is also possible to link to specific paragraphs within the same page. For example, if you were to click this link, you will be taken back to the start of this section. (Don't click it if you don't want to lose your place in this paragraph). One way to do this is to link in the usual way I mentioned earlier. Alternatively, since we're referring to a location within the same page, you don't have to specify the whole URL. Simply use the hash followed by the named anchor. For example, use:

Click here


Additional Information
What are the Rules for My Anchor Names?
Use ASCII characters for your anchor names.

Make sure your anchors have different names. Do not create two anchors with the same name or create two names that are different only in their case. That is, don't create an anchor with the name "top" and another with the name "Top". That said, if you use "Top" for your anchor name, make sure that you link to "#Top" and not "#top", otherwise browsers are not obliged to find the anchor.

Where Should I Put the Closing Anchor Tag?
In my example above, I created a named anchor in the H2 header, so it's easy for me to decide where to place the closing tag. But what if you wanted to link directly to some words in a paragraph without a header? It's easy to figure where the starting tag goes, but where do you place the closing tag?

There's no hard and fast rule. You can place it anywhere you want. For example, one way is to tag a single word, like this:

To override this behaviour...


What If I Delete the Named Anchor But Others Have Linked to It?
If you click a link to a location, say http://www.example.com/some-page.html#lastpara, and the browser cannot find the "lastpara" named anchor on the page, the browser will simply take you to the top of the page. So if you test your web page and find that you land at the beginning of the page when you shouldn't, it may mean that you have forgotten to create a named anchor, or you gave it a different name/spelling than what you used in the referring link.

Will Named Anchors Create Problems for the Search Engines?
As far as I can tell, search engines ignore the "#some-text" portion of a URL. The anchor names are a device used to facilitate usability and are implemented in web browsers for the benefit of humans, so the search engines don't really need to bother with it.

Aren't There Other Methods to Create an Anchor Name?
Yes, there are. However, the above method is a well-used method that is supported by all browsers in use, old and new. Some of the other newer methods don't have such universal browser support.

Conclusion
The ability to link directly to specific locations within a page provides you with some flexibility when you need to direct your visitors to exact places on certain web pages. This HTML tutorial shows you that linking in this way is actually quite easy, once you know how it is done.

by Christopher Heng
(www.imagination.gs)


Report this article Ask About This Article


Loading...
More to Explore